<!--
  新增审批模板：创建本地草稿并可选打开表单设计器，在设计器中推送到钉钉
  @author GHT
  @date 2026-06-04 for：【MESToDing审批配置】新增审批模板入口
-->
<template>
  <a-modal
    v-model:open="visible"
    title="新增审批模板"
    width="520px"
    :confirmLoading="loading"
    okText="创建并设计表单"
    cancelText="取消"
    destroy-on-close
    @ok="handleSubmit"
    @cancel="visible = false"
  >
    <a-alert
      type="info"
      show-icon
      style="margin-bottom: 16px"
      message="将先在 MES 创建模板配置，随后在表单设计器中添加字段并点击「创建钉钉模板」推送到钉钉（processCode 由钉钉返回）。"
    />
    <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
      <a-form-item label="模板名称" name="tplName">
        <a-input v-model:value="formState.tplName" placeholder="如：密炼PS编制审批" allow-clear />
      </a-form-item>
      <a-form-item label="业务类型标识" name="bizType">
        <a-input v-model:value="formState.bizType" placeholder="供审批流关联，如 mixer_ps" allow-clear />
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-textarea v-model:value="formState.remark" :rows="2" placeholder="可选" />
      </a-form-item>
      <a-form-item name="openDesigner">
        <a-checkbox v-model:checked="formState.openDesigner">创建成功后打开表单设计器</a-checkbox>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import type { FormInstance } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { addNewTemplate } from '../MesXslDingProcessTpl.api';

  const emit = defineEmits<{
    (e: 'success', payload: { record: Recordable; openDesigner: boolean }): void;
  }>();

  const { createMessage } = useMessage();
  const visible = ref(false);
  const loading = ref(false);
  const formRef = ref<FormInstance>();

  const formState = reactive({
    tplName: '',
    bizType: '',
    remark: '',
    openDesigner: true,
  });

  const rules = {
    tplName: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
  };

  function resetForm() {
    formState.tplName = '';
    formState.bizType = '';
    formState.remark = '';
    formState.openDesigner = true;
    formRef.value?.clearValidate();
  }

  function open() {
    resetForm();
    visible.value = true;
  }

  async function handleSubmit() {
    try {
      await formRef.value?.validate();
    } catch {
      return;
    }
    loading.value = true;
    try {
      const record: any = await addNewTemplate({
        tplName: formState.tplName.trim(),
        bizType: formState.bizType?.trim() || undefined,
        remark: formState.remark?.trim() || undefined,
        status: '1',
        sortNo: 0,
      });
      if (!record?.id) {
        createMessage.error('创建失败：未返回模板 ID');
        return;
      }
      createMessage.success('审批模板已创建');
      visible.value = false;
      emit('success', { record, openDesigner: formState.openDesigner });
    } catch (e: any) {
      createMessage.error(e?.message || '创建失败');
    } finally {
      loading.value = false;
    }
  }

  defineExpose({ open });
</script>
