<template>
  <div>
    <BasicModal
      :title="getTitle"
      :maskClosable="false"
      v-bind="$attrs"
      width="45rem"
      @register="register"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <AddParamForm ref="AddParamFormRef" />
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import AddParamForm from './AddParamForm.vue';

  const emits = defineEmits(['register', 'data']);
  const setEditData: any = reactive({
    getEditData: {},
  });
  const AddParamFormRef = ref<InstanceType<typeof AddParamForm>>();
  const isUpdate = ref(false);
  const isFlag = ref('');
  const getTitle = computed(() => (!isUpdate.value ? '编辑参数' : '新增参数'));

  const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
    setModalProps({ loading: true });
    handleCancel(false);
    isUpdate.value = data.isUpdate;
    isFlag.value = data.flag;
    AddParamFormRef.value?.setFormData(data.record);
    setEditData.getEditData = data.record;
    setModalProps({ loading: false });
  });

  const handleCancel = (flag) => {
    AddParamFormRef.value?.resetFormData();
    if (flag) {
      closeModal();
    }
  };
  const handleSubmit = async () => {
    const value = await AddParamFormRef.value?.getFormData();
    if (!value) return;
    emits(
      'data',
      {
        ...value,
        ...{ id: !isUpdate.value ? setEditData.getEditData.id : null },
        ...{ index: !isUpdate.value ? setEditData.getEditData.index : null },
      },
      isFlag.value
    );
    handleCancel(true);
  };
  defineExpose({});
</script>

<style lang="less" scope></style>