<template>
  <!-- 业务办理模态框组件 -->
  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" :okText="'提交'" width="60%">
    <!-- 保存按钮（仅在可保存状态显示） -->
    <template #insertFooter v-if="canSave">
      <a-button type="primary" @click="register">保存</a-button>
    </template>

    <!-- 首次填报编辑状态：仅显示表单 -->
    <a-row>
      <a-col :span="24" v-if="canSave">
        <BasicForm @register="registerForm" />
      </a-col>
    </a-row>

    <!-- 回退时待办编辑状态：显示表单和处理历史 -->
    <a-row v-if="!canSave">
      <a-col :span="15">
        <BasicForm @register="registerForm" />
      </a-col>
      <a-col :span="8" class="model-right" :offset="1">
        <!-- 处理历史时间线 -->
        <a-timeline>
          <a-timeline-item v-for="item in workitems" :key="item.workitemId" :color="getColor(item.status)">
            <p>处理部门：<a-tag color="blue">{{ item.orgName }}</a-tag></p>
            <p>处 理 人：{{ item.handlerName }}</p>
            <p v-if="item.auditResult">处理结果：{{ item.auditResult == 'Pass' ? '通过' : '退回' }}</p>
            <p>处理备注：{{ item.comment }}</p>
            <p>处理时间：{{ item.handleTime }}</p>
          </a-timeline-item>
        </a-timeline>
      </a-col>
    </a-row>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, computed, unref, createVNode } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicForm, useForm } from '@/components/Form';
  import { formSchema } from '../data';
  import { saveDraft, initiateFlow, detail } from '@/api/demo/handlingmanagement';
  import { useMessage } from '@/hooks/web/useMessage';
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

// 消息提示
const { createMessage } = useMessage();

// 组件名称定义
defineOptions({ name: 'DeptModal' });

// 定义事件
const emit = defineEmits(['success', 'register']);

// 状态管理
const isUpdate = ref(true); // 是否为更新模式
const canSave = ref(true); // 是否可以保存
const workitems = ref([]); // 工作项列表（用于显示处理历史）

/**
 * 根据状态获取时间线颜色
 * @param status 状态值
 * @returns 对应颜色
 */
const getColor = (status: string) => {
  switch (status) {
    case 'Rejected':
      return 'red'; // 拒绝状态为红色
    case 'ToDo':
      return 'blue'; // 待办状态为蓝色
    default:
      return 'green'; // 其他状态为绿色
  }
};

// 表单注册
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
  labelWidth: 100,
  baseColProps: { span: 24 },
  schemas: formSchema,
  showActionButtonGroup: false,
});

// 模态框注册
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  // 重置加载状态
  setModalProps({ confirmLoading: false });

  // 设置是否为更新模式
  isUpdate.value = !!data?.isUpdate;

  // 如果是更新模式，加载详情数据
  if (unref(isUpdate)) {
    detail({ businessNo: data.record.businessNo }).then((detailData) => {
      // 保存工作项列表
      workitems.value = detailData.workitems;

      // 构建表单数据
      const formData = {
        businessNo: detailData.businessNumber,
        title: detailData.title,
        type: detailData.type,
        attachments: detailData.attachments,
      };

      // 设置表单值
      setFieldsValue({ ...formData });
    });
  } else {
    // 新建模式，设置默认值
    setFieldsValue({
      type: 1,
      attachments: '',
      businessNo: '',
      title: null,
    });
  }

  // 检查是否为拒绝状态，设置是否可保存
  if (data.record && data.record.status === "Rejected") {
    canSave.value = false;
  } else {
    canSave.value = true;
  }
});

// 动态计算模态框标题
const getTitle = computed(() => (!unref(isUpdate) ? '创建业务' : '办理业务'));

/**
 * 提交表单
 * 用于提交业务办理申请
 */
async function handleSubmit() {
  Modal.confirm({
      title: '是否确认提交',
      icon: createVNode(ExclamationCircleOutlined),
      okText: '确认',
      cancelText: '取消',
      onCancel() {
          
      },
      async onOk() {
        try {
          // 验证表单
          const values = await validate();
          let submitData = { ...values };

          // 处理附件数据
          if (submitData.attachments) {
            submitData.attachments = submitData.attachments.split(',');
          }
          console.log(submitData);
          // 调用提交接口
          const data = await initiateFlow(submitData);

          if (data) {
            // 设置加载状态
            setModalProps({ confirmLoading: true });

            // 关闭模态框并触发成功事件
            closeModal();
            emit('success');
            resetFields()
            // 显示成功消息
            return createMessage.success('操作成功');
          } else {
            // 显示失败消息
            return createMessage.error('操作失败');
          }
        } finally {
          // 重置加载状态
          setModalProps({ confirmLoading: false });
        }
      },
    });
  
}

/**
 * 保存草稿
 * 用于保存业务办理草稿
 */
async function register() {
  try {
    // 验证表单
    const values = await validate();
    let submitData = { ...values };

    // 处理附件数据
    if (submitData.attachments) {
      submitData.attachments = submitData.attachments.split(',');
    }

    // 调用保存草稿接口
    const data = await saveDraft(submitData);

    if (data) {
      // 设置加载状态
      setModalProps({ confirmLoading: true });

      // 关闭模态框并触发成功事件
      closeModal();
      resetFields()
      emit('success');

      // 显示成功消息
      return createMessage.success('新增成功');
    } else {
      // 显示失败消息
      return createMessage.error('新增失败');
    }
  } finally {
    // 重置加载状态
    setModalProps({ confirmLoading: false });
  }
}
</script>

<style scoped>
/* 右侧时间线样式 */
.model-right {
  overflow-y: scroll;
  height: 50vh;
  padding: 10px;
}
</style>