<!--
文件: drawerFlowType.vue
功能: 流程类型编辑抽屉（用于新增/编辑流程类型）
主要逻辑:
- 暴露 `open` 方法给父组件调用，接收操作类型 (`ACTION.ADD` 或 `ACTION.EDIT`) 与可选记录数据。
- 使用 `a-form` 管理字段 `name`、`code`、`description`、`status`、`sort` 并通过 `rules` 做校验。
- 新增时初始化默认值（如 status=0）；编辑时将传入记录填充到表单。
- 提交时根据当前 `state.type` 选择 `postBpmCategoryCreate` 或 `postBpmCategoryUpdate` 接口，成功后提示、关闭抽屉并通过 `submit` 事件通知父组件刷新列表。
- 使用 `useToggle` 管理抽屉与 loading 状态，使用 `formRef` 驱动表单校验与提交。
-->

<script setup lang="ts">
import type { Rule } from 'ant-design-vue/es/form';
import type { FormExpose } from 'ant-design-vue/es/form/Form';
import { useToggle } from '@vueuse/core';
import { message } from 'ant-design-vue';
import { postBpmCategoryCreate, postBpmCategoryUpdate } from '@/api/modules/bpmDefinition/bpMliuchengfenleikongzhiqi';
import { ACTION } from '../enum';

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

const emit = defineEmits(['submit']);

const form = ref<API.BpmCategorySaveReqVO | any>();

const rules: Record<string, Rule[]> = {
  name: [{ required: true, message: '请输入分类名字', trigger: 'blur' }],
  code: [{ required: true, message: '请输入分类标志', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
  sort: [{ required: true, message: '请输入分类排序', trigger: 'blur' }],
};

const [open, setOpen] = useToggle(false);
const formRef = ref<FormExpose>();

const state = reactive({
  type: '',
});
async function onOpen(key: ACTION, record?: API.BpmCategoryRespVO) {
  state.type = key;
  setOpen(true);
  if (key === ACTION.ADD) {
    form.value = { status: 0 };
  }
  else if (key === ACTION.EDIT && record) {
    form.value = { ...record };
  }
}

const [loading, setLoading] = useToggle(false);

function onSubmit() {
  formRef.value?.validate().then(() => {
    setLoading(true);
    const params: any = { ...form.value };
    const request = state.type === ACTION.ADD ? postBpmCategoryCreate : postBpmCategoryUpdate;
    request(params).then((res: API.ResponseDataString) => {
      if (res.success) {
        message.success('操作成功！');
        setOpen(false);
        emit('submit');
      }
    }).finally(() => {
      setLoading(false);
    });
  });
}

function close() {
  setOpen(false);
}

defineExpose({
  open: onOpen,
});
</script>

<template>
  <a-drawer
    v-model:open="open"
    title="流程分类"
    placement="right"
    :width="520"
    destroy-on-close
    :footer-style="{ textAlign: 'right' }"
    @close="close"
  >
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      :label-col="{ span: 5 }"
    >
      <a-form-item label="分类名称" name="name">
        <a-input v-model:value="form.name" :maxlength="30" placeholder="请输入分类名称" />
      </a-form-item>
      <a-form-item label="分类标志" name="code">
        <a-input v-model:value="form.code" :maxlength="30" placeholder="请输入分类标志" />
      </a-form-item>
      <a-form-item label="分类描述" name="description">
        <a-textarea v-model:value="form.description" placeholder="请输入分类描述" allow-clear />
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-radio-group v-model:value="form.status">
          <a-radio :value="1">
            开启
          </a-radio>
          <a-radio :value="0">
            关闭
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="分类排序" name="sort">
        <a-input-number v-model:value="form.sort" :min="1" :max="100" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-space>
        <a-button @click="close">
          取消
        </a-button>
        <a-button type="primary" :loading="loading" @click="onSubmit">
          提交
        </a-button>
      </a-space>
    </template>
  </a-drawer>
</template>
