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

      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="systemRoleTable12"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <!-- <el-button
            icon="el-icon-plus"
            type="primary"
            @click="btnImport"
            class="ele-btn-icon"
            >导入
          </el-button> -->
        </template>

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-dropdown>
            <span class="el-dropdown-link"
              >操作<i class="el-icon-arrow-down el-icon--right"></i
            ></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                icon="el-icon-view"
                @click.native="btnView(row.processInstanceId)"
                >查看详情
              </el-dropdown-item>
              <el-dropdown-item
                v-if="row.assignee == null || row.assignee == ''"
                icon="el-icon-edit"
                divided
                @click.native="btnClaim(row)"
                >认领并执行
              </el-dropdown-item>
              <!-- v-if="
                  row.assignee === $store.getters.sysUser.userId &&
                  row.endTime == null
                " -->
              <el-dropdown-item
                icon="el-icon-edit"
                v-if="
                  (row.endTime == null || row.endTime == '') &&
                  row.assignee == userId
                "
                divided
                @click.native="btnUnclaim(row)"
                >取消签收
              </el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-edit"
                v-if="
                  (row.endTime == null || row.endTime == '') &&
                  (row.assignee != null || row.assignee != '') &&
                  row.assignee == userId
                "
                divided
                @click.native="btnExcuteTask(row)"
                >执行
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </ele-pro-table>
    </el-card>

    <!-- 执行任务 -->
    <execute-task
      v-if="dialogExcuteTaskVisible"
      :visible.sync="dialogExcuteTaskVisible"
      :executeTaskId="executeTaskId"
      @executeTaskFinished="list"
    ></execute-task>
    <process-detail
      v-if="dialogViewVisible"
      :visible.sync="dialogViewVisible"
      :processInstanceId="processInstanceId"
    ></process-detail>
  </div>
</template>

<script>
  import {
    deleteAction,
    getAction,
    postAction,
    putAction
  } from '@/api/flowable/manage';
  import { Message } from 'element-ui';
  import ExecuteTask from '../components/ExecuteTask';
  import ProcessDetail from '../components/ProcessDetail';
  import TodoSearch from '@/views/flowable/taskTodo/todo-search';

  export default {
    name: 'FlowableTaskTodo',
    components: { ExecuteTask, ProcessDetail, TodoSearch },
    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: 'dueDate',
            label: '到期日期',
            align: 'center',
            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
          }
        ],
        userId: localStorage.getItem('userId'),

        listQuery: {
          taskName: undefined,
          processInstanceBusinessKey: undefined,
          taskDueAfter: undefined,
          taskDueBefore: undefined
        },
        dialogExcuteTaskVisible: 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 });
      },
      // list() {
      //   this.$refs.table.reload({ page: 1 });

      // getAction('/flowable/task/listTodo', this.listQuery).then((res) => {
      //   const { data } = res;
      //   console.log(data);
      //   this.records = data.data.records;
      //   this.total = data.data.total;
      // });
      // },
      btnQuery () {
        this.listQuery.current = 1;
        this.reload();
      },
      btnReset () {
        this.listQuery = {
          taskName: undefined,
          processInstanceBusinessKey: undefined,
          taskDueAfter: undefined,
          taskDueBefore: undefined
        };
        this.reload();
      },
      btnClaim (row) {
        putAction('/flowable/task/claim', { taskId: row.id })
          .then(({ data }) => {
            Message.success('认领' + data.message + '，请编辑执行');
            this.reload();
            this.btnExcuteTask(row);
          })
          .catch((response) => {
            this.reload();
          });
      },
      btnUnclaim (row) {
        putAction('/flowable/task/unclaim', { taskId: row.id }).then(
          ({ data }) => {
            Message.success(data.message);
            this.reload();
          }
        );
      },
      btnExcuteTask (row) {
        this.executeTaskId = row.id;
        this.dialogExcuteTaskVisible = true;
      },
      btnView (processInstanceId) {
        this.processInstanceId = processInstanceId;
        this.dialogViewVisible = true;
      }
    }
  };
</script>
