<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';

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

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

const rules: Record<string, Rule[]> = {
  signalName: [{ required: true, message: '请输入信号名称', trigger: 'blur' }],
  signalId: [{ required: true, message: '请输入信号ID', trigger: 'blur' }],
};
const [open, setOpen] = useToggle(false);
const formRef = ref<FormExpose>();
const form = ref<any>({});

async function onOpen() {
  setOpen(true);
  form.value = {};
}
const [loading, setLoading] = useToggle(false);

function onSubmit() {
  formRef.value?.validate().then(() => {
    setLoading(true);
    emit('submit', form.value);
    setOpen(false);
    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: 4 }"
    >
      <a-form-item label="信号ID" name="signalId">
        <a-input v-model:value="form.signalId" :maxlength="100" />
      </a-form-item>
      <a-form-item label="信号名称" name="signalName">
        <a-input v-model:value="form.signalName" :maxlength="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>
