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

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

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

const columns: ProColumns<API.BpmTaskRespVO> = [
  {
    hideInSearch: true,
    title: '流程名',
    dataIndex: 'processName',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '摘要',
    dataIndex: 'summary',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '发起人',
    dataIndex: 'startUser',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '发起时间',
    dataIndex: 'processCreateTime',
    ellipsis: true,
  },
  {
    valueType: 'a-input',
    bind: 'value',
    title: '当前任务',
    dataIndex: 'name',
    ellipsis: true,
    fieldProps: {
      placeholder: '请输入任务名称',
      allowClear: true,
    },
  },
  {
    hideInSearch: true,
    title: '任务时间',
    dataIndex: 'createTime',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '流程编号',
    dataIndex: 'processInstanceId',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '任务编号',
    dataIndex: 'id',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    width: 60,
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
  },
];

const router = useRouter();

function onAction(action: ACTION, record: API.BpmTaskRespVO) {
  switch (action) {
    case ACTION.HANDLE:
      router.push({ name: 'todoDetail', 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 === 'processName'">
          {{ record.processInstance?.name || '-' }}
        </template>
        <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">
              <span>
                {{ item.key }} : {{ item.value }}
              </span>
            </div>
          </div>
        </template>
        <template v-if="column.dataIndex === 'startUser'">
          {{ record.processInstance?.startUser?.nickname || '-' }}
        </template>
        <template v-if="column.dataIndex === 'processCreateTime'">
          {{ record.processInstance?.createTime || '-' }}
        </template>
        <template v-if="column.dataIndex === 'name'">
          {{ record.name || '-' }}
        </template>
        <template v-if="column.dataIndex === 'createTime'">
          {{ record.createTime || '-' }}
        </template>
        <template v-if="column.dataIndex === 'processInstanceId'">
          {{ record.processInstanceId || '-' }}
        </template>
        <template v-if="column.dataIndex === 'id'">
          {{ record.id || '-' }}
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a @click.prevent="onAction(ACTION.HANDLE, record)">办理</a>
        </template>
      </template>
    </ProTable>
  </div>
</template>
