<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="filter-container">
        <el-checkbox v-model="listQuery.processUnfinished"
          >流程未办结</el-checkbox
        >
        <el-checkbox v-model="listQuery.processFinished"
          >流程已办结</el-checkbox
        >
      </div>
      <div class="filter-container">
        <el-input
          v-model="listQuery.processInstanceId"
          placeholder="流程实例ID"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="btnQuery"
        />
        <el-input
          v-model="listQuery.taskName"
          placeholder="任务名称"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="btnQuery"
        />
        <el-input
          v-model="listQuery.processInstanceBusinessKey"
          placeholder="业务主键Key"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="btnQuery"
        />
        <el-date-picker
          v-model="listQuery.taskCreatedAfter"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="创建时间开始"
          type="datetime"
          style="width: 200px"
          class="filter-item"
        ></el-date-picker>
        <el-date-picker
          v-model="listQuery.taskCreatedBefore"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="创建时间结束"
          type="datetime"
          style="width: 200px"
          class="filter-item"
        ></el-date-picker>
        <el-date-picker
          v-model="listQuery.taskCompletedAfter"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="完成时间开始"
          type="datetime"
          style="width: 200px"
          class="filter-item"
        ></el-date-picker>
        <el-date-picker
          v-model="listQuery.taskCompletedBefore"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="完成时间结束"
          type="datetime"
          style="width: 200px"
          class="filter-item"
        ></el-date-picker>
        <el-dropdown
          split-button
          type="primary"
          @click="btnQuery"
          class="filter-item"
        >
          <i class="el-icon-search el-icon--left"></i>查询
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset"
              >重置</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="systemRoleTable11"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <!-- <el-button
            icon="el-icon-plus"
            type="primary"
            @click="btnImport"
            class="ele-btn-icon"
            >导入
          </el-button> -->
        </template>
        <!-- 工作耗时 -->
        <template v-slot:workTimeInMillis="{ row }">
          {{ getTime(row.workTimeInMillis) }}
        </template>
        <!-- 总耗时 -->
        <template v-slot:durationInMillis="{ row }">
          {{ getTime(row.durationInMillis) }}
        </template>

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

    <process-detail
      v-if="dialogViewVisible"
      :visible.sync="dialogViewVisible"
      :processInstanceId="processInstanceId"
    ></process-detail>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination';
  import { getAction } from '@/api/flowable/manage';
  import ProcessDetail from '../components/ProcessDetail';

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

          {
            prop: 'processInstanceName',
            label: '流程实例名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '任务名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '开始时间',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'endTime',
            label: '完成时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'workTimeInMillis',
            label: '工作耗时',
            align: 'center',
            slot: 'workTimeInMillis',
            showOverflowTooltip: true
          },
          {
            prop: 'durationInMillis',
            label: '总耗时',
            align: 'center',
            slot: 'durationInMillis',
            showOverflowTooltip: true
          },
          {
            prop: 'owner',
            label: '所有人',
            align: 'center',

            showOverflowTooltip: true
          },

          {
            prop: 'assignee',
            label: '执行人',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 230,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        dicts: [],
        records: null,
        selectedRecords: [],
        total: 0,
        listQuery: {
          processInstanceId: undefined,
          taskName: undefined,
          processInstanceBusinessKey: undefined,
          taskCreatedAfter: undefined,
          taskCreatedBefore: undefined,
          taskCompletedAfter: undefined,
          taskCompletedBefore: undefined,
          processUnfinished: false,
          processFinished: false
        },
        formJson: undefined,
        processInstanceId: '',
        dialogViewVisible: false
      };
    },

    methods: {
      reload (where) {
        this.$refs.table.reload({ page: 1, where: this.listQuery });
      },
      async datasource ({ page, limit, where }) {
        const res = await getAction('/flowable/task/listDone', {
          ...where,
          current: page,
          size: limit
        });
        const { data } = res.data;
        return {
          list: data.records,
          count: data.total
        };
      },
      getTime (time) {
        if (time == '' || time == null) {
          return '';
        }
        let h = parseInt((time / 60 / 60) % 24);

        let m = parseInt((time / 60) % 60);

        let s = parseInt(time % 60);

        if (time >= 3600) {
          return `${h}时${m}分${s}秒`;
        } else if (time >= 60) {
          return `${m}分${s}秒`;
        } else {
          return `${time}秒`;
        }
      },

      btnQuery () {
        this.reload();
      },
      btnReset () {
        this.listQuery = {
          processInstanceId: undefined,
          taskName: undefined,
          processInstanceBusinessKey: undefined,
          taskCreatedAfter: undefined,
          taskCreatedBefore: undefined,
          taskCompletedAfter: undefined,
          taskCompletedBefore: undefined,
          processUnfinished: false,
          processFinished: false
        };
        this.reload();
      },
      btnView (processInstanceId) {
        this.processInstanceId = processInstanceId;
        this.dialogViewVisible = true;
      }
    }
  };
</script>
<style scoped>
  .app-container {
    padding: 10px;
  }
  .filter-container .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 5px;
    margin-right: 4px;
  }
  .filter-container {
    padding-bottom: 5px;
  }
</style>
