<!--
文件: drawerExpression.vue
功能: 流程表达式编辑抽屉（用于新增/编辑表达式）
主要逻辑:
- 暴露 `open` 方法供父组件调用，接受操作类型 (`ACTION.ADD` 或 `ACTION.EDIT`) 以及可选的记录数据。
- 使用 `a-form` 管理表单，包含字段 `name`、`status`、`expression`，并通过 `rules` 做前端校验。
- 新增时初始化默认值（status=0）；编辑时将传入记录填充到表单。
- 提交时根据当前 `state.type` 选择 `postBpmProcessExpressionCreate` 或 `postBpmProcessExpressionUpdate` 接口，成功后提示、关闭抽屉并通过 `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 { postBpmProcessExpressionCreate, postBpmProcessExpressionUpdate } from '@/api/modules/bpmDefinition/bpMliuchengbiaodashibiaokongzhiqi';
import { ACTION } from '../enum';

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

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

const form = ref<API.BpmProcessExpressionSaveReqVO | any>();
// 校验
const rules: Record<string, Rule[]> = {
  name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
  expression: [{ 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.BpmProcessExpressionRespVO) {
  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 ? postBpmProcessExpressionCreate : postBpmProcessExpressionUpdate;
    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="status">
        <a-radio-group v-model:value="form.status">
          <a-radio :value="0">
            开启
          </a-radio>
          <a-radio :value="1">
            关闭
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="表达式" name="expression">
        <a-textarea v-model:value="form.expression" placeholder="请输入表达式" allow-clear />
      </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>
