<template>
  <el-dialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :title="parameter.title"
    :destroy-on-close="true"
    :width="parameter.width"
    :top="parameter.top"
    draggable
  >
    <slot name="default" :parameter="parameter"></slot>
    <template #footer>
      <span class="dialog-footer">
        <slot name="footer" :parameter="parameter"></slot>
        <!-- <el-button type="primary" v-if="parameter.isEdit" :loading="butLoading" @click="handleSubmit">确认</el-button>
        <el-button @click="handleCancel">取消</el-button> -->
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="FormDialog">
import { ref } from 'vue'

export interface FormParameterProps {
  title: string // 标题
  width?: number // 弹框宽度
  isEdit?: boolean // 是否编辑
  top?: string // 离顶部距离
  model: Record<string, any>
  api?: (params: any) => Promise<any> // 提交api
}
// dialog状态
const dialogVisible = ref(false)
const butLoading = ref(false)
// 父组件传过来的参数
const parameter = ref<FormParameterProps>({
  title: '',
  width: 1250,
  top: '8vh',
  isEdit: true,
  model: {},
  api: undefined
})
// 提交
// const handleSubmit = () => {
//   butLoading.value = true
//   parameter.value.api!(parameter.value.model).then(res => {
//     if (res.code == 200) {
//       ElMessage.success('操作成功')
//       dialogVisible.value = false
//     } else {
//       console.log('message', res.message)
//     }
//   })
//   butLoading.value = false
// }

// 取消按钮，重置表单，关闭弹框
const handleCancel = () => {
  butLoading.value = false
  dialogVisible.value = false
}

// 接收父组件参数
const openDialog = (params: FormParameterProps) => {
  parameter.value = { ...parameter.value, ...params }
  butLoading.value = false
  dialogVisible.value = true
}

defineExpose({
  openDialog,
  handleCancel
})
</script>
