<template>
  <BasicModal
    width="700px"
    title="新增参数"
    @register="registerModal"
    v-bind="$attrs"
    @ok="handleSubmit"
  >
    <div>
      <h5 class="title"> 基本信息</h5>
      <BasicForm @register="registerInfoForm" />
      <h5 class="title"> 消息设置</h5>
      <BasicForm @register="registerMessageForm" />
      <h5 class="title"> 有效性</h5>
      <BasicForm @register="registerValidForm" />
    </div>
    <!-- <div style="height: 60vh"> <BasicForm @register="registerForm" /></div> -->
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import {
    parameterInfoFormSchema,
    messageSettingFormSchema,
    validFormSchema,
  } from './paramerForm.data';

  const [registerModal, { closeModal }] = useModalInner();
  const [registerInfoForm] = useForm({
    labelWidth: 80,
    schemas: parameterInfoFormSchema,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 18,
    },
  });
  const [registerMessageForm] = useForm({
    labelWidth: 80,
    schemas: messageSettingFormSchema,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 18,
    },
  });
  const [registerValidForm] = useForm({
    labelWidth: 80,
    schemas: validFormSchema,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 18,
    },
  });
  function handleSubmit() {
    closeModal();
  }
</script>
<style lang="less" scoped>
  .title {
    font-size: 14px;
    font-weight: bold;
  }

  .title::before {
    content: '|';
    margin-right: 10px;
    color: rgb(67, 112, 198);
    font-weight: bolder;
  }
</style>
