<template>
  <el-dialog
    v-model="dialogVisible"
    :title="config.title"
    :width="600"
    center
    align-center
    :close-on-click-modal="false"
    @closed="closed"
  >
    <ClauseForm ref="formRef" v-if="dialogVisible" v-bind="config.formProps" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" class="ml30" v-throttle="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineExpose, nextTick } from "vue";
import { Clause } from "@/api/interface";
import ClauseForm from "@/components/ClauseForm/index.vue";

type FormData = Partial<Clause.ClauseInfo>;
interface OhterConfig {
  title?: string;
  formProps?: typeof ClauseForm;
}
//* 接收注入
const dialogVisible = ref(false);
const config = ref<OhterConfig>({ title: "编辑" });
//* data
//* ref
const formRef = ref<typeof ClauseForm>();
const openPromise = ref<any>({});

// 弹窗关闭
function closed() {
  formRef.value?.cancel();
}
// 取消
function handleCancel() {
  dialogVisible.value = false;
}
//提交
function handleSubmit() {
  formRef.value?.submit().then(() => {
    dialogVisible.value = false;
    openPromise.value.resolve();
  });
}

function open(params?: FormData, otherConfig?: OhterConfig) {
  dialogVisible.value = true;
  config.value = Object.assign(config.value, otherConfig);
  nextTick(() => {
    formRef.value?.setFormValue(params);
  });
  return new Promise(resolve => {
    openPromise.value.resolve = resolve;
  });
}
defineExpose({
  open
});
</script>

<style lang="scss"></style>
