<script setup lang="ts">
import { ref, unref } from "vue";
import { BasicForm, FormItem } from "/@/components/BasicForm";
import { modalProps } from "./types";

const props = defineProps(modalProps);
const { title, api, formItems, formGroup } = props;
const emit = defineEmits(["confirmBtnClick"]);

const formData = ref({});

const formRef = ref<InstanceType<typeof BasicForm>>(null);
const dialogVisible = ref(false);
const confirmLoading = ref(false);

function handleConfirmClick() {
  console.log(formData.value);
  formRef.value.validate(async isVaild => {
    //表单校验通过派发事件
    if (isVaild) {
      const { code, data, message } = await api(unref(formData));
      if (code === 0) {
        emit("confirmBtnClick");
      } else {
        console.log("989");
      }
    }
  });
}

defineExpose({
  dialogVisible,
  confirmLoading
});
</script>

<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    center
    destroy-on-close
    width="1040px"
  >
    <!-- 表单 -->
    <BasicForm
      ref="formRef"
      v-bind="modalConfig"
      v-model:form-data="formData"
    />

    <!-- 保存/重置 -->
    <div class="flex justify-end">
      <el-button
        type="primary"
        :loading="confirmLoading"
        @click="handleConfirmClick"
        >保存</el-button
      >
      <el-button @click="dialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>
