<template>
  <div>
    <Card style="width:100%">
      <div class="config_meta">
        <p class="fl">审批待办</p>
        <div class="fr">
          <Tooltip content="刷新" placement="left-start">
            <Icon @click="_request" type="ios-refresh" size="30" color="#2d8cf0" style="cursor:pointer;"></Icon>
          </Tooltip>
          <Tooltip content="查看更多" placement="left-start" style="margin-left: 5px">
            <Icon @click="_detail" type="ios-more" size="30" color="#2d8cf0" style="cursor:pointer;"></Icon>
          </Tooltip>
        </div>
        <div class="clear"></div>
      </div>
      <div style="width: 100%;">
        <element-table ref="pageTable" :pageColumns="pageColumns" :table-height="tableHeight"
                       @on-result-change="_tableResultChange" :hide-page="true" :getPage="tableData" opt-col-width="100">
          <el-table-column
            :prop="item.key"
            :label="item.title"
            :width="item.width"
            :min-width="200"
            :fixed="item.fixed?item.fixed:undefined"
            v-for="item in pageColumns"
            :key="item.key"
            show-overflow-tooltip sortable>
            <template slot-scope="scope">
              <span v-if="item.dateTime">{{$dateformat(scope.row['flowInfo'].applyTime,'yyyy-mm-dd HH:MM')}}</span>
              <span v-else-if="item.flowName" class="blue-color">{{scope.row['flowInfo'].flowName}}</span>
              <span v-else-if="item.remark">{{scope.row['flowInfo'].remark}}</span>
              <span v-else-if="item.applyName">{{scope.row['flowInfo'].applyName}}</span>
              <span v-else>{{scope.row[item.key]}}</span>
            </template>
          </el-table-column>
        </element-table>
      </div>
    </Card>
<!--    &lt;!&ndash; 流程图 &ndash;&gt;-->
<!--    <FlowDiagram ref="flowDiagramModal"/>-->
<!--    &lt;!&ndash; 详情 &ndash;&gt;-->
<!--    <FlowDetail ref="flowDetailModal"/>-->
  </div>
</template>

<script>
/**
 * 待办任务
 */
export default {
  components: {
    // FlowDiagram: () => import('../../workflow/FlowDiagram'),
    // FlowDetail: () => import('../../workflow/FlowDetail')
  },
  data() {
    return {
      tableData: { records: [] },
      pageColumns: [
        { title: '流程名称', key: 'display', width: 170, flowName: true },
        { title: '申请原因', key: 'remark', remark: true },
        { title: '申请人', key: 'userName', width: 130, applyName: true },
        { title: '申请时间', key: 'applyTime', width: 140, dateTime: true }
      ]
    }
  },
  mounted() {
    // this._request()
  },
  computed: {
    tableHeight() {
      return this.$tableHeight('tableModal')
    }
  },
  methods: {
    _request() {
      // 食品报告借阅审批、食品样品处理申请审批（目前）两种审批加起来最多展示7条数据
      this.tableData.records = []
      this.$store
        .dispatch(
          'FlowProcess/pageTask',
          this._searchParam('食品报告借阅评审', 7)
        )
        .then(() => {
          // 没有数据可能会返回undefined的情况
          const records = this.$store.state.FlowProcess.page.records
          const taskByReport = records || []
          const taskByReportLen = taskByReport ? taskByReport.length : 0
          let taskBySample = []
          // 首先查询【食品报告借阅评审】
          if (taskByReportLen < 7) {
            // ①数量小于7，则继续查询【食品样品处理申请审批】
            const rows = Number(7 - taskByReportLen) // 还需要查询多少条数据
            this.$store
              .dispatch(
                'FlowProcess/pageTask',
                this._searchParam('食品样品处理申请审批', rows)
              )
              .then(() => {
                // eslint-disable-next-line camelcase
                const records_sample = this.$store.state.FlowProcess.page
                  .records
                // eslint-disable-next-line camelcase
                taskBySample = records_sample || []
                // 数组合并
                this.tableData.records = taskByReport.concat(taskBySample)
              })
          } else {
            // ②数量等于7，则不用再查询了
            this.tableData.records = taskByReport
          }
        })
    },
    // 查询条件
    _searchParam(name, rows) {
      const data = {
        page: 1,
        rows: rows
      }
      if (name) {
        data.name = name
      }
      return data
    },
    _detail() {
      this.$emit('on-result-change', 'FoodMyTask')
    },
    _claimTask(taskId) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要认领该任务？',
        onOk: () => {
          this.$store.dispatch('FlowProcess/claimTask', taskId).then(() => {
            if (this.$store.state.FlowProcess.success) {
              this.$Message.success('认领成功！')
              this._request()
            } else {
              this.$Message.error('该任务已被其他人员认领！')
            }
          })
        }
      })
    },
    _flowDiagramModal(taskId) {
      this.$refs.flowDiagramModal._open(taskId)
    },
    _flowDetailModal(taskId) {
      this.$refs.flowDetailModal._open(taskId)
    },
    _iconClick(res, data) {
      switch (res) {
        case '详情':
          this._flowDetailModal(data.taskId)
          break
        case '认领':
          this._claimTask(data.taskId)
          break
        case '流程图':
          this._flowDiagramModal(data.taskId)
          break
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
        default:
          this._request()
      }
    }
  }
}
</script>
