<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: {
    // 查询条件
    _searchParam(name, rows) {
      const data = {
        page: 1,
        rows: rows
      }
      if (name) {
        data.name = name
      }
      return data
    },
    _detail() {
      this.$emit('on-result-change', 'FoodMyTask')
    },
    _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._flowDiagramModal(data.taskId)
          break
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
        default:
          this._request()
      }
    }
  }
}
</script>
