<template>
  <BasicModal
    v-bind="$attrs"
    destroyOnClose
    @register="registerModal"
    title="添加应用"
    @ok="submit"
    @visible-change="getUUID"
  >
    <BasicForm @register="registerForm" :labelWidth="100" :actionColOptions="{ span: 24 }"></BasicForm>
  </BasicModal>
</template>

<script lang="ts" setup>
import {BasicModal, useModalInner} from '/@/components/Modal';
import {BasicForm, FormSchema, useForm} from '/@/components/Form';
import {Apply} from '/@/api/burialPoint/apply/model/applyModel';
import {applyCreate} from '/@/api/burialPoint/apply/apply';
import {ref} from "vue";
import uuid from "uuid";

const [registerModal, {closeModal, changeOkLoading, changeLoading}] = useModalInner();


const schemasApply: FormSchema[] = [
  {
    field: 'uuid',
    component: 'Input',
    label: '应用uuid：',
    colProps: {
      span: 20,
    },
    defaultValue: uuid.v4().replaceAll("-", ''),
    componentProps: {
      placeholder: '请输入',
    },
    // 数据校验
    rules: [
      {
        required: true,
        message: '请输入！',
        trigger: 'blur',
      },
      {
        min: 3,
        max: 50,
        message: '长度在 3 到 50 个字符',
        trigger: 'blur',
      },
    ],
  },
  {
    field: 'applyName',
    component: 'Input',
    label: '应用名称：',
    colProps: {
      span: 20,
    },
    componentProps: {
      placeholder: '请输入',
    },
    // 数据校验
    rules: [
      {
        required: true,
        message: '请输入！',
        trigger: 'blur',
      },
      {
        min: 3,
        max: 10,
        message: '长度在 3 到 5 个字符',
        trigger: 'blur',
      },
    ],
  },
  {
    field: 'applyType',
    component: 'Input',
    label: '应用类别：',
    colProps: {
      span: 20,
    },
    componentProps: {
      placeholder: '请输入',
    },
    // 数据校验
    rules: [
      {
        required: true,
        message: '请输入！',
        trigger: 'blur',
      },
      {
        min: 3,
        max: 10,
        message: '长度在 3 到 5 个字符',
        trigger: 'blur',
      },
    ],
  },

];

const [registerForm, methods] = useForm({
  labelWidth: 120,
  schemas: schemasApply,
  actionColOptions: {
    span: 24,
  },
  showActionButtonGroup: false,
});

/**
 * 生成uuid
 */
const getUUID = () => {
  methods.setFieldsValue({
    uuid: uuid.v4().replaceAll("-", '')
  });
}

const submit = () => {
  changeOkLoading(true);
  changeLoading(true);
  methods
    .validate()
    .then(async () => {
      const data = methods.getFieldsValue();
      const params: Apply = {
        uuid: data?.uuid,
        applyName: data?.applyName,
        applyType: data?.applyType,
      };
      await applyCreate(params).then((res) => {
        changeOkLoading(false);
        changeLoading(false);
      });
      closeModal();
    })
    .catch(() => {
      changeOkLoading(false);
      changeLoading(false);
    });
};
</script>

<style scoped></style>
