<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="审批实例节点"
    width="960px"
    :showOkBtn="false"
    cancelText="关闭"
    destroyOnClose
  >
    <a-spin :spinning="loading">
      <a-descriptions v-if="forecastInfo.processInstanceId" :column="2" size="small" bordered class="ding-forecast-head">
        <a-descriptions-item label="MES审批流">{{ forecastInfo.mesFlowName || '-' }}</a-descriptions-item>
        <a-descriptions-item label="节点来源">{{ forecastInfo.nodeSource || '-' }}</a-descriptions-item>
        <a-descriptions-item label="钉钉模板" :span="2">{{ forecastInfo.templateName || '-' }}</a-descriptions-item>
        <a-descriptions-item label="processCode" :span="2">{{ forecastInfo.processCode }}</a-descriptions-item>
        <a-descriptions-item label="审批实例ID" :span="2">{{ forecastInfo.processInstanceId || '-' }}</a-descriptions-item>
      </a-descriptions>

      <a-table
        :columns="columns"
        :data-source="nodes"
        :pagination="false"
        size="small"
        bordered
        row-key="stepNo"
        :locale="{ emptyText: '暂无审批节点' }"
      />
    </a-spin>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getDingProcessForecast } from '../MesXslApprovalTrace.api';

  defineOptions({ name: 'DingApprovalForecastModal' });

  const { createMessage } = useMessage();

  const loading = ref(false);
  const forecastInfo = ref<Recordable>({});
  const nodes = ref<Recordable[]>([]);

  const columns = [
    { title: '序号', dataIndex: 'stepNo', width: 70, align: 'center' },
    { title: 'activityId', dataIndex: 'activityId', width: 120, ellipsis: true },
    { title: 'MES节点', dataIndex: 'mesNodeName', width: 120, ellipsis: true },
    { title: '钉钉节点', dataIndex: 'activityName', width: 120, ellipsis: true },
    { title: '节点状态', dataIndex: 'nodeStatusText', width: 90, align: 'center' },
    { title: '审批方式', dataIndex: 'approvalMethodText', width: 100, align: 'center' },
    {
      title: '审批人',
      dataIndex: 'actionerNames',
      customRender: ({ record }) => formatActioners(record),
    },
  ];

  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    forecastInfo.value = {};
    nodes.value = [];
    const record = data?.record || {};
    const bizTable = record.bizTable || data?.bizTable;
    const bizDataId = record.bizDataId;
    const processInstanceId = record.externalInstanceId;
    if (!processInstanceId && (!bizTable || !bizDataId)) {
      createMessage.warning('缺少单据ID或钉钉审批流ID，无法获取审批节点');
      return;
    }
    try {
      loading.value = true;
      setModalProps({ confirmLoading: false });
      const res = await getDingProcessForecast({ bizTable, bizDataId, processInstanceId });
      forecastInfo.value = res || {};
      nodes.value = res?.nodes || [];
    } catch (e: any) {
      createMessage.error(e?.message || '获取审批节点失败');
    } finally {
      loading.value = false;
    }
  });

  function formatActioners(record: Recordable) {
    const names = record?.actionerNames;
    if (Array.isArray(names) && names.length) {
      return names.join('、');
    }
    const ids = record?.actionerUserIds;
    if (Array.isArray(ids) && ids.length) {
      return ids.join('、');
    }
    return '-';
  }
</script>

<style lang="less" scoped>
  .ding-forecast-head {
    margin-bottom: 12px;
  }
</style>
