<script setup lang="tsx">
import type { ProColumns } from '@pubinfo/pro-components';
import { ProTable } from '@pubinfo/pro-components';
import { useRouter } from 'vue-router';
import { postBpmProcessInstanceCopyPage } from '@/api/modules/bpmTask/bpMliuchengshilichaosongbiaokongzhiqi';
import { ACTION } from '../enum';

defineOptions({
  name: 'CopyList',
});

async function request(params: any) {
  const { current, pageSize, ...rest } = params;
  const body = {
    currentPage: current,
    pageSize,
    doSearchTotal: true,
    ...rest,
  };
  const res = await postBpmProcessInstanceCopyPage(body);
  return {
    success: res.success,
    data: res.data?.records ?? [],
    total: res.data?.total ?? 0,
  };
}

const columns: ProColumns<API.BpmProcessInstanceCopyRespVO> = [
  {
    valueType: 'a-input',
    bind: 'value',
    title: '流程名称',
    dataIndex: 'processInstanceName',
    fieldProps: {
      placeholder: '请输入流程名称',
      allowClear: true,
    },
  },
  {
    hideInSearch: true,
    title: '摘要',
    dataIndex: 'summary',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '流程发起人',
    dataIndex: 'startUser',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '流程发起时间',
    dataIndex: 'processInstanceStartTime',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '抄送节点',
    dataIndex: 'activityName',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '抄送人',
    dataIndex: 'createUser',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '抄送意见',
    dataIndex: 'reason',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '抄送时间',
    dataIndex: 'createTime',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    width: 80,
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
  },
];

const router = useRouter();

function onAction(action: ACTION, record: API.BpmTaskRespVO) {
  switch (action) {
    case ACTION.DETAIL:
      router.push({ name: 'copyProcessDetail', params: { processInstanceId: record.processInstanceId }, query: { taskId: record.id } });
      break;
    default:
      break;
  }
}
</script>

<template>
  <div
    py-10px
    px-10px
    w-full
    h-full
  >
    <ProTable
      row-key="id"
      :request="request"
      :columns="columns"
      auto-height
      :scroll="{ x: 1200 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'summary'">
          <div
            v-if="record.processInstance?.summary && record.processInstance.summary?.length > 0"
            class="flex flex-col"
          >
            <div v-for="(item, index) in record.processInstance?.summary" :key="index">
              {{ item.key }} : {{ item.value }}
            </div>
          </div>
        </template>
        <template v-if="column.dataIndex === 'startUser'">
          {{ record.startUser?.nickname || '-' }}
        </template>
        <template v-if="column.dataIndex === 'processInstanceStartTime'">
          {{ record.processInstanceStartTime || '-' }}
        </template>
        <template v-if="column.dataIndex === 'createUser'">
          {{ record.createUser?.nickname || '-' }}
        </template>
        <template v-if="column.dataIndex === 'reason'">
          {{ record.reason || '-' }}
        </template>
        <template v-if="column.dataIndex === 'createTime'">
          {{ record.createTime || '-' }}
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a @click.prevent="onAction(ACTION.DETAIL, record)">{{ ACTION.DETAIL }}</a>
        </template>
      </template>
    </ProTable>
  </div>
</template>

<style scoped>
:deep(.ant-tabs-content) {
  height: 100%;
}
</style>
