<template>
  <div>
    <el-row>
      <el-col :span="24">
        <Form inline onsubmit="return false" :label-width="70">
          <label class="label-sign" />
          <Form-item class="search-item" label="流程名称:">
            <el-input v-model="formObj.name" placeholder="请输入流程名称" clearable @keyup.enter.native="_formSearch" />
          </Form-item>
          <Form-item class="search-btn">
            <el-button type="primary" @click="_formSearch">
              搜索
            </el-button>
          </Form-item>
        </Form>
      </el-col>
      <!-- 表格 -->
      <el-col :span="24">
        <element-table
          ref="pageTable"
          :page-columns="pageColumns"
          :table-height="tableHeight"
          :get-page="getPage"
          @on-result-change="_tableResultChange"
        >
          <el-table-column
            v-for="item in pageColumns"
            :key="item.key"
            show-overflow-tooltip
            sortable
            :prop="item.key"
            :label="item.title"
            :width="item.width"
            :min-width="200"
            :fixed="item.fixed?item.fixed:undefined"
          >
            <template slot-scope="scope">
              <div v-if="item.dateTime">
                {{ $dateformat(scope.row['flowInfo'].applyTime,'yyyy-mm-dd HH:MM') }}
              </div>
              <div v-else-if="item.flowName" class="blue-color">
                {{ scope.row['flowInfo'].flowName }}
              </div>
              <div v-else-if="item.remark" @click="_detail(scope.row)">
                {{ scope.row['flowInfo'].remark }}
              </div>
              <div v-else-if="item.applyName">
                {{ scope.row['flowInfo'].applyName }}
              </div>
              <div v-else>
                {{ scope.row[item.key] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            slot="col"
            label="操作"
            align="center"
            :width="100"
            fixed="right"
          >
            <template slot-scope="scope">
              <icon-list
                :msg="scope.row.claim === true ? iconMsg : iconMsgDis"
                :row-data="scope.row"
                @on-result-change="_iconClick"
              />
            </template>
          </el-table-column>
        </element-table>
      </el-col>
    </el-row>

    <!-- 流程图 -->
    <flowDiagram ref="flowDiagramModal" />
    <!-- 详情 -->
    <flowDetail ref="flowDetailModal" />

    <component :is="currentComponent" ref="refModal" />
  </div>
</template>
<script>
import { flowProcess } from '../../../api'
import purchaseOrderDetail from '../../flowform/chemical/purchaseOrderDetail'
import deliveryOrderDetail from '../../flowform/chemical/deliveryOrderDetail'
import equipScrapFirstStepDetail from '../../flowform/equip/equip-scrap/equipScrapFirstStepDetail'
import equipRepairFirstStepDetail from '../../flowform/equip/equip-repair/equipRepairFirstStepDetail'
import equipOutDetail from '../../flowform/equip/equip-out/equipOutDetail'
import equipPurchaseFirstStepDetail from '../../flowform/equip/equip-purchase/equipPurchaseFirstStepDetail'
import equipCheckDetail from '../../flowform/equip/equip-check/equipCheckDetail'
import equipMaintainDetail from '../../flowform/equip/equip-maintain/equipMaintainDetail'
import flowDiagram from './flowDiagram'
import flowDetail from './flowDetail'

export default {
  components: {
    flowDiagram,
    flowDetail,
    purchaseOrderDetail,
    deliveryOrderDetail,
    equipScrapFirstStepDetail,
    equipRepairFirstStepDetail,
    equipOutDetail,
    equipPurchaseFirstStepDetail,
    equipCheckDetail,
    equipMaintainDetail
  },
  data() {
    return {
      currentComponent: '',
      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 }
      ],
      getPage: {},
      iconMsg: [
        { type: 'pt-word', id: 'workflow-task-detail', name: '详情' },
        { type: 'pt-config', id: 'workflow-task-flow', name: '流程图' }
      ],
      iconMsgDis: [
        { type: 'pt-ok', id: 'workflow-task-claim', name: '认领' },
        { type: 'pt-config', id: 'workflow-task-flow', name: '流程图' }
      ],
      formObj: {
        name: ''
      }
    }
  },
  computed: {
    tableHeight: function() {
      return this.$tableHeight('', 210)
    }
  },
  mounted() {
    this._formSearch()
    if (this.$route.query.taskId) {
      this._flowDetailModal(this.$route.query.taskId)
    }
  },
  methods: {
    _detail(data) {
      switch (data.flowInfo.flowName) {
        case '耗材出库流程':
          this.currentComponent = 'deliveryOrderDetail'
          break
        case '耗材采购流程':
          this.currentComponent = 'purchaseOrderDetail'
          break
        case '仪器采购流程':
          this.currentComponent = 'equipPurchaseFirstStepDetail'
          break
        case '仪器期间核查流程':
          this.currentComponent = 'equipCheckDetail'
          break
        case '仪器维保流程':
          this.currentComponent = 'equipMaintainDetail'
          break
        case '仪器维修流程':
          this.currentComponent = 'equipRepairFirstStepDetail'
          break
        case '仪器报废流程':
          this.currentComponent = 'equipScrapFirstStepDetail'
          break
        case '仪器出库流程':
          this.currentComponent = 'equipOutDetail'
          break
        default:
          this.currentComponent = ''
      }
      if (this.currentComponent) {
        this.$nextTick(function() {
          this.$refs.refModal._open(data.flowInfo.id)
        })
      }
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await flowProcess.pageTask(this.formObj)
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _claimTaskConfirm(taskId) {
      this.$confirm('确定要认领该任务?', '提示', { type: 'warning' }).then(
        () => {
          this._claimTask(taskId)
        }
      )
    },
    _claimTask: async function(taskId) {
      const result = await flowProcess.claimTask(taskId)
      if (result) {
        this.$message.success('认领成功！')
        this._page()
      } 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._claimTaskConfirm(data.taskId)
          break
        case '流程图':
          this._flowDiagramModal(data.taskId)
          break
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
      }
    }
  }
}
</script>
