<template>
  <BasicTable @register="registerTable" @selection-change="selectionChange">
    <template #toolbar>
      <BatchApprovalProcess
        v-if="showBatchApproval"
        @close="BatchClearHandler"
        :selectedRows="data.selectedRows"
      >
        <a-button type="primary" v-auth="'processtasks:batchApproval'">
          {{ t('批量审批') }}
        </a-button>
      </BatchApprovalProcess>

      <a-button type="primary" v-auth="'processtasks:approve'" v-else @click="handleApproval">{{
        t('审批')
      }}</a-button>
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            auth: 'processtasks:view',
            label: '查看',
            onClick: handleView.bind(null, record),
          },
        ]"
      />
    </template>
    <template #currentProgress="{ record }">
      <a-progress
        v-if="typeof record.currentProgress === 'number' && isFinite(record.currentProgress)"
        :percent="record.currentProgress"
        size="small"
      />
    </template>
  </BasicTable>
  <InfoModal @register="registerModal" @success="reload" />
  <LookProcess
    v-if="visibleLookProcess"
    :visible="visibleLookProcess"
    :taskId="taskIdProcess"
    :processId="processIdProcess"
    @close="handleLookClose"
  />
  <ApprovalProcess
    :taskId="taskId"
    :processId="processId"
    :schemaId="schemaId"
    @close="clearHandler"
    v-if="visibleApprovalProcess"
    :visible="visibleApprovalProcess"
  />
</template>

<script setup lang="ts">
  import userTaskTable from './../../hooks/userTaskTable';
  import { useModal } from '/@/components/Modal';
  import LookProcess from './../LookProcess.vue';
  import ApprovalProcess from './../ApprovalProcess.vue';
  import BatchApprovalProcess from './../BatchApprovalProcess.vue';
  import InfoModal from '../BatchApprovalInfo.vue';
  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
  import { getSchemaTask } from '/@/api/workflow/process';
  import { TaskTypeUrl } from '/@/enums/workflowEnum';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { unref, watch, h, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { Tag } from 'ant-design-vue';

  const { t } = useI18n();
  const configColumns: BasicColumn[] = [
    {
      title: t('流水号'),
      dataIndex: 'serialNumber',
      width: 70,
      resizable: true,
    },
    {
      title: t('流程名称'),
      dataIndex: 'processName',
      width: 200,
      resizable: true,
    },
    {
      title: t('任务名称'),
      dataIndex: 'taskName',
      resizable: true,
    },
    {
      title: t('当前任务耗时'),
      dataIndex: 'consumingTime',
      width: 150,
      resizable: true,
    },
    {
      title: t('流程状态'),
      dataIndex: 'status',
      resizable: true,
      customRender: ({ record }) => {
        const color = record.status === '审批结束' ? 'green' : 'blue';
        return h(Tag, { color: color }, record.status);
      },
      width: 160,
    },
    {
      title: t('当前进度'),
      dataIndex: 'currentProgress',
      resizable: true,
      slots: { customRender: 'currentProgress' },
    },
    {
      title: t('摘要信息'),
      resizable: true,
      dataIndex: 'summaryInfo',
      width: 200,
    },
  ];

  const visibleLookProcess = ref(false);
  const visibleApprovalProcess = ref(false);
  const taskIdProcess = ref('');
  const processIdProcess = ref('');

  const [registerModal, { openModal }] = useModal();
  const { formConfig, data, processId, taskId, schemaId, selectionChange, showBatchApproval } =
    userTaskTable();
  function BatchClearHandler(v) {
    if (v) {
      openModal(true, v);
    }
    clearSelectedRowKeys();
  }
  const clearHandler = () => {
    visibleApprovalProcess.value = false;
    clearSelectedRowKeys();
    reload();
  };
  const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
    title: t('待办任务列表'),
    api: getSchemaTask,
    rowKey: 'id',
    columns: configColumns,
    formConfig: formConfig('ToDoTasks'),
    beforeFetch: (params) => {
      return { data: params, taskUrl: TaskTypeUrl.PENDING_TASKS };
    },
    rowSelection: {
      type: 'checkbox',
    },
    useSearchForm: true,
    showTableSetting: true,
    striped: false,
    pagination: {
      pageSize: 18,
    },
    showIndexColumn: false,
    tableSetting: {
      size: false,
      setting: false,
    },
    actionColumn: {
      width: 60,
      title: t('操作'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  });
  const { currentRoute } = useRouter();
  watch(
    () => unref(currentRoute),
    (val) => {
      if (val.name == 'ProcessTasks') reload();
    },
    { deep: true },
  );

  const handleView = (record) => {
    visibleLookProcess.value = true;
    taskIdProcess.value = record.taskId;
    processIdProcess.value = record.processId;
  };
  function handleApproval() {
    visibleApprovalProcess.value = true;
  }
  const handleLookClose = () => {
    visibleLookProcess.value = false;
  };
</script>

<style scoped></style>
