<!--
流程任务，展示系统中所有的任务，一般用于管理员查询。
文件: task/index.vue
功能: 流程任务管理页面（管理员视角），展示系统中的任务列表并支持查询与查看详情。
主要逻辑:
- 使用 `ProTable` 渲染任务列表，`request` 方法调用 `postBpmTaskManagerPage` 获取分页数据，并返回 { success, data, total } 给表格组件。
- 在 `columns` 中定义展示与搜索字段（包含流程名称、发起人、发起时间、当前任务、任务时间区间、审批人、审批状态、审批建议、耗时、流程编号、任务编号、操作等）。
- 针对某些字段做自定义渲染：
  - `processInstance` 与 `startUser` 使用嵌套属性展示对应名称/发起人信息；
  - `status` 使用 `a-badge` 显示不同状态；
  - `durationInMillis` 使用 `millisecondsToDayHourMinuteSecond` 格式化耗时；
  - `action` 提供跳转到详情页面的操作，`onAction` 处理路由跳转。
- 页面只负责展示与交互逻辑，数据接口位于 `@/api/modules/...`，工具函数在 `@/utils/fun`。
-->

<script lang="ts" setup>
import type { ProColumns } from '@pubinfo/pro-components';
import { ProTable } from '@pubinfo/pro-components';
import { postBpmTaskManagerPage } from '@/api/modules/bpmTask/guanlihoutailiuchengrenwushili';
import { millisecondsToDayHourMinuteSecond } from '@/utils/fun';
import { ACTION } from '../enum';

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

async function request(params: any) {
  const { current, pageSize, ...rest } = params;
  const res = await postBpmTaskManagerPage({
    doSearchTotal: true,
    currentPage: current,
    pageSize,
    ...rest,
  });
  return {
    success: res.success,
    data: res.data?.records ?? [],
    total: res.data?.total ?? 0,
  };
}
const columns = computed<ProColumns<API.BpmCategoryRespVO>>(() => [
  {
    hideInSearch: true,
    title: '流程名称',
    dataIndex: 'processInstance',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '发起人',
    dataIndex: 'startUser',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '发起时间',
    dataIndex: 'createTime',
    ellipsis: true,
  },
  {
    valueType: 'a-input',
    bind: 'value',
    title: '当前任务',
    dataIndex: 'name',
    ellipsis: true,
  },
  {

    valueType: 'a-range-picker',
    bind: 'value',
    title: '任务开始时间',
    dataIndex: 'createTime',
    ellipsis: true,
    fieldProps: {
      allowClear: true,
      style: { width: '100%' },
    },
    formItemProps: {
      labelCol: { style: { width: '100px' } },
    },
  },
  {
    hideInSearch: true,
    title: '任务结束时间',
    dataIndex: 'endTime',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '审批人',
    dataIndex: 'assigneeUser',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '审批状态',
    dataIndex: 'status',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '审批建议',
    dataIndex: 'reason',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '耗时',
    dataIndex: 'durationInMillis',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '流程编号',
    dataIndex: 'processInstanceId',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '任务编号',
    dataIndex: 'id',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    width: 80,
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
  },
]);

const router = useRouter();
function onAction(key: ACTION, record?: any) {
  switch (key) {
    case ACTION.DETAIL:
      router.push({
        name: 'taskDetail',
        params: {
          processInstanceId: record.processInstanceId,
        },
        query: {
          type: 'view',
          taskId: record.id,
        },
      });
      break;
  }
}
</script>

<template>
  <div
    py-10px
    px-10px
    w-full
    h-full
  >
    <ProTable
      row-key="id"
      :request="request"
      :columns="columns"
      auto-height
      :scroll="{ x: 1100 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'processInstance'">
          <span>{{ record.processInstance?.name }}</span>
        </template>
        <template v-if="column.dataIndex === 'startUser'">
          <span>{{ record.processInstance?.startUser?.nickname ?? '' }}</span>
        </template>

        <template v-if="column.dataIndex === 'assigneeUser'">
          <span>{{ record.assigneeUser?.nickname ?? '' }}</span>
        </template>
        <template v-if="column.dataIndex === 'status'">
          <a-badge v-if="record.status === 1" status="processing" text="审批中" />
          <a-badge v-if="record.status === 2" status="success" text="审批通过" />
          <a-badge v-if="record.status === 3" status="error" text="审批不通过" />
          <a-badge v-if="record.status === 4" status="default" text="已取消" />
        </template>
        <template v-if="column.dataIndex === 'durationInMillis'">
          <span v-if="record.durationInMillis">{{ millisecondsToDayHourMinuteSecond(record.durationInMillis) }}</span>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a-space>
            <a class="flex items-center" @click="onAction(ACTION.DETAIL, record)">
              <span class="ml-4px">{{ ACTION.DETAIL }}</span>
            </a>
          </a-space>
        </template>
      </template>
    </ProTable>
  </div>
</template>
