<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { BpmTaskApi } from '#/api/bpm/task';

import { nextTick, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';

import FormCreate from '@form-create/element-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getTaskListByProcessInstanceId } from '#/api/bpm/task';
import { setConfAndFields2 } from '#/components/form-create';

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

const props = defineProps<{
  id: string;
  loading: boolean;
}>();

/** 表单类型定义 */
interface TaskForm {
  rule: any[];
  option: Record<string, any>;
  value: Record<string, any>;
}

/** 获取表格列配置 */
function useGridColumns(): VxeTableGridOptions['columns'] {
  return [
    {
      field: 'name',
      title: '审批节点',
      minWidth: 150,
    },
    {
      field: 'approver',
      title: '审批人',
      slots: {
        default: ({ row }: { row: BpmTaskApi.TaskManager }) => {
          return row.assigneeUser?.nickname || row.ownerUser?.nickname;
        },
      },
      minWidth: 180,
    },
    {
      field: 'createTime',
      title: '开始时间',
      formatter: 'formatDateTime',
      minWidth: 180,
    },
    {
      field: 'endTime',
      title: '结束时间',
      formatter: 'formatDateTime',
      minWidth: 180,
    },
    {
      field: 'status',
      title: '审批状态',
      minWidth: 150,
      cellRender: {
        name: 'CellDict',
        props: { type: DICT_TYPE.BPM_TASK_STATUS },
      },
    },
    {
      field: 'reason',
      title: '审批建议',
      slots: {
        default: 'slot-reason',
      },
      minWidth: 200,
    },
    {
      field: 'durationInMillis',
      title: '耗时',
      minWidth: 180,
      formatter: 'formatPast2',
    },
  ];
}

const formRef = ref();
const taskForm = ref<TaskForm>({
  rule: [],
  option: {},
  value: {},
});

const [Modal, modalApi] = useVbenModal({
  title: '查看表单',
  footer: false,
});

/** 刷新表格 */
function handleRefresh() {
  gridApi.query();
}

/** 显示表单详情 */
async function handleShowFormDetail(row: BpmTaskApi.TaskManager) {
  // 设置表单配置和表单字段
  taskForm.value = {
    rule: [],
    option: {},
    value: row,
  };
  setConfAndFields2(
    taskForm,
    row.formConf,
    row.formFields || [],
    row.formVariables || {},
  );

  // 打开弹窗
  modalApi.open();
  // 等待表单渲染
  await nextTick();
  // 获取表单 API 实例
  const formApi = formRef.value?.fapi;
  if (!formApi) {
    return;
  }
  // 设置表单不可编辑
  formApi.btn.show(false);
  formApi.resetBtn.show(false);
  formApi.disabled(true);
}

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions: {
    columns: useGridColumns(),
    keepSource: true,
    showFooter: true,
    border: true,
    proxyConfig: {
      ajax: {
        query: async () => {
          return await getTaskListByProcessInstanceId(props.id);
        },
      },
    },
    rowConfig: {
      keyField: 'id',
      isHover: true,
    },
    pagerConfig: {
      enabled: false,
    },
    toolbarConfig: {
      enabled: false,
    },
  } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
});

defineExpose({
  refresh: handleRefresh,
});
</script>

<template>
  <div class="h-full">
    <Grid>
      <template #slot-reason="{ row }">
        <div class="flex flex-wrap items-center justify-center">
          <span v-if="row.reason">{{ row.reason }}</span>
          <span v-else>-</span>
          <ElButton
            v-if="row.formId > 0"
            type="primary"
            size="small"
            plain
            class="ml-1"
            @click="handleShowFormDetail(row)"
          >
            <IconifyIcon icon="lucide:file-text" />
            <span class="!ml-0.5 text-xs">查看表单</span>
          </ElButton>
        </div>
      </template>
    </Grid>
  </div>
  <Modal class="w-[800px]">
    <FormCreate
      ref="formRef"
      v-model="taskForm.value"
      :option="taskForm.option"
      :rule="taskForm.rule"
    />
  </Modal>
</template>
