<template>
  <div class="ele-body">
    <el-card shadow="never">
      <order-search @search="reload" />

      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="systemRoleTable"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            icon="el-icon-refresh"
            type="primary"
            @click="btnView"
            class="ele-btn-icon"
            >获取最新工单
          </el-button>
        </template>

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link type="primary" :underline="false" @click="SendOrders(row)">
            派单
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="btnView(row)"
          >
            查看详情
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>

    <!-- 执行任务 -->
    <SendOrders
      v-if="dialogOrderView"
      :visible.sync="dialogOrderView"
    ></SendOrders>
    <process-detail
      v-if="dialogViewVisible"
      :visible.sync="dialogViewVisible"
      :processInstanceId="processInstanceId"
    ></process-detail>
  </div>
</template>

<script>
  import {} from '@/api/mes';
  import OrderSearch from './components/order-search.vue';
  import { Message } from 'element-ui';
  import SendOrders from './components/send-order.vue';

  export default {
    name: 'FlowableTaskTodo',
    components: {
      OrderSearch,
      SendOrders
    },
    data() {
      return {
        columns: [
          {
            type: 'index',
            label: '序号',
            width: 50,
            align: 'center',
            fixed: 'left'
          },

          {
            prop: 'processInstanceName',
            label: '流程实例名称',
            align: 'center',
            width: 300,
            showOverflowTooltip: true
          },
          {
            prop: 'processInstanceName',
            label: '流程实例名称',
            align: 'center',
            width: 300,
            showOverflowTooltip: true
          },
          {
            prop: 'processInstanceName',
            label: '流程实例名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'processInstanceName',
            label: '流程实例名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'processInstanceName',
            label: '流程实例名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'processInstanceName',
            label: '流程实例名称',
            align: 'center',
            width: 300,
            showOverflowTooltip: true
          },
          {
            prop: 'processInstanceName',
            label: '流程实例名称',
            align: 'center',
            width: 300,
            showOverflowTooltip: true
          },
          {
            prop: 'processInstanceName',
            label: '流程实例名称',
            align: 'center',
            width: 300,
            showOverflowTooltip: true
          },

          {
            prop: 'name',
            label: '任务名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'dueDate',
            label: '到期日期',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'owner',
            label: '所有人',
            align: 'center',

            showOverflowTooltip: true
          },

          {
            prop: 'assignee',
            label: '执行人',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'assignee1',
            label: '执行状态',
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'right'
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 230,
            align: 'center',
            resizable: false,
            slot: 'action',
            fixed: 'right',

            showOverflowTooltip: true
          }
        ],

        listQuery: {
          taskName: undefined,
          processInstanceBusinessKey: undefined,
          taskDueAfter: undefined,
          taskDueBefore: undefined
        },
        dialogOrderView: false,
        formJson: undefined,
        executeTaskId: '',
        processInstanceId: '',
        dialogViewVisible: false
      };
    },

    methods: {
      async datasource({ page, limit, where }) {
        const res = await getAction('/flowable/task/listTodo', {
          ...where,
          current: page,
          size: limit
        });
        const { data } = res.data;
        return {
          list: data.records,
          count: data.total
        };
      },
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },

      btnQuery() {
        this.reload();
      },
      btnReset() {
        this.listQuery = {
          taskName: undefined,
          processInstanceBusinessKey: undefined,
          taskDueAfter: undefined,
          taskDueBefore: undefined
        };
        this.reload();
      },

      SendOrders(row) {
        // this.processInstanceId = row.id;
        this.dialogOrderView = true;
      },
      btnView(row) {
        this.$router.push({
          path: '/mes/workOrder/detail'
        });
      }
    }
  };
</script>
