<!--
 * 文件: definition.vue
 * 功能: 流程定义列表，展示指定 flowKey 下的流程定义记录，并提供恢复操作（恢复到模型编辑以重新发布）。
 * 主要逻辑:
 * - 在组件加载前从路由参数中读取 `flowKey`，作为查询条件请求流程定义分页数据。
 * - 使用 `ProTable` 渲染数据表格，`request` 方法负责向后端接口 `postBpmProcessDefinitionPage` 请求数据并映射为表格需要的格式。
 * - 表格列定义在 `columns` 中，其中通过 `bodyCell` 插槽对部分列（可见范围、流程类型、版本、操作）做自定义渲染：
 *   - 可见范围：根据 `startUsers` / `startDepts` 的存在情况展示不同的文本或 Tooltip 列表预览。
 *   - 流程类型：根据 `modelType` 值显示不同标签（BPMN / SIMPLE）。
 *   - 版本：以 `v{version}` 格式显示。
 *   - 操作：当前支持恢复（跳转到流程模型更新页，携带 type=recovery 与对应 id）。
 * - `onAction` 处理表格操作事件，根据动作枚举 `ACTION` 执行对应逻辑（例如跳转路由）。
 * 注意事项:
 * - 分页参数由 `ProTable` 传入，后端请求使用 `currentPage` 与 `pageSize` 字段。
 * - 若需增加操作按钮或更多列渲染，优先在 `columns` 中添加或在 `bodyCell` 插槽中扩展渲染逻辑。
-->

<script lang="ts" setup>
import type { ProColumns } from '@pubinfo/pro-components';
import { ProTable } from '@pubinfo/pro-components';
import { postBpmProcessDefinitionPage } from '@/api/modules/bpmDefinition/bpMliuchengdingyidexinxibiaokongzhiqi';
import { ACTION } from '../enum';

defineOptions({
  name: 'FlowDefinition',
});
const router = useRouter();
const route = useRoute();
const flowKey = ref<string>('');
onBeforeMount(() => {
  flowKey.value = route.params.flowKey as string;
});

const tableRef = ref<typeof ProTable>();

async function request(params: any) {
  const { current, pageSize, ...rest } = params;
  const res = await postBpmProcessDefinitionPage({
    doSearchTotal: true,
    currentPage: current,
    pageSize,
    key: flowKey.value,
    ...rest,
  });
  return {
    success: res.success,
    data: res.data?.records ?? [],
    total: res.data?.total ?? 0,
  };
}
const columns = computed<ProColumns<API.BpmProcessDefinitionRespVO>>(() => [
  {
    hideInSearch: true,
    title: '定义编号',
    dataIndex: 'id',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '流程名称',
    dataIndex: 'name',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '可见范围',
    dataIndex: 'visibleRange',
    key: 'visibleRange',
  },
  {
    hideInSearch: true,
    title: '流程类型',
    dataIndex: 'flowType',
    key: 'flowType',
  },
  {
    hideInSearch: true,
    title: '表单信息',
    dataIndex: 'formName',
    key: 'formName',
  },
  {
    hideInSearch: true,
    title: '流程版本',
    dataIndex: 'version',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    title: '部署时间',
    dataIndex: 'deploymentTime',
    ellipsis: true,
  },
  {
    hideInSearch: true,
    width: 100,
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
  },
]);

function onAction(key: ACTION, record?: any) {
  switch (key) {
    // 恢复：点击后，跳转到流程模型更新页面可以重新发布
    case ACTION.RECOVERY:
      router.push({ name: 'flowmodelUpdate', params: { type: 'recovery', id: record.id } });
      break;
  }
}
</script>

<template>
  <div
    py-10px
    px-10px
    w-full
    h-full
  >
    <ProTable
      ref="tableRef"
      row-key="id"
      :search="false"
      :request="request"
      :columns="columns"
      auto-height
      :scroll="{ x: 1100 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'visibleRange'">
          <span v-if="!record.startUsers?.length && !record.startDepts?.length"> 全部可见 </span>
          <span v-else-if="record.startUsers.length === 1">
            {{ record.startUsers[0].nickname }}
          </span>
          <span v-else-if="record.startDepts?.length === 1">
            {{ record.startDepts[0].name }}
          </span>
          <span v-else-if="record.startDepts?.length > 1">
            <a-tooltip>
              <template #title>{{ `${record.startDepts.map((dept: any) => dept.name).join('、')}` }}</template>
              {{ record.startDepts[0].name }}等 {{ record.startDepts.length }} 个部门可见
            </a-tooltip>
          </span>
          <span v-else>
            <a-tooltip>
              <template #title>{{ `${record.startUsers.map((user: any) => user.nickname).join('、')}` }}</template>
              {{ record.startUsers[0].nickname }}等 {{ record.startUsers.length }} 人可见
            </a-tooltip>
          </span>
        </template>
        <template v-if="column.dataIndex === 'flowType'">
          <span v-if="record.modelType === 10" class="blue">
            BPMN 设计器
          </span>
          <span v-if="record.modelType === 20" class="green">
            SIMPLE 设计器
          </span>
        </template>
        <template v-if="column.dataIndex === 'version' ">
          <span>{{ `v${record.version}` }}</span>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a-space>
            <a class="flex items-center" @click="onAction(ACTION.RECOVERY, record)">
              <span class="ml-4px">{{ ACTION.RECOVERY }}</span>
            </a>
          </a-space>
        </template>
      </template>
    </ProTable>
  </div>
</template>
