<template>
  <!--dialog-form对话框表单组件-->
  <div class="def-dialog-form">
    <def-dialog ref="dialogRef" :hiddenFooter="true" v-bind="dialog">
      <template #default>
        <slot>
          <el-button type="success" @click="open"
            >这里是打开对话框操作</el-button
          >
        </slot>
      </template>
      <template #content>
        <div class="content" style="padding: 0 30px">
          <def-form
            v-bind="form"
            :list="list"
            :data="data"
            @submit="submit"
            @clear="close"
          />
        </div>
      </template>
    </def-dialog>
  </div>
</template>

<script lang="ts" setup>
import { PropType, ref } from 'vue'
import { IElDialogProps } from '@/base-ui/dialog/index.vue'
import { IElForm, IElFormItem } from '@/base-ui/form/types'

defineProps({
  data: {
    // 表单回显数据
    type: Object,
    default: () => null
  },
  dialog: {
    // dialog对话框配置
    type: Object as PropType<IElDialogProps>,
    default: () => ({})
  },
  form: {
    // form表单配置
    type: Object as PropType<IElForm>,
    default: () => ({})
  },
  list: {
    // formItem表单项配置
    type: Array as PropType<IElFormItem[]>,
    required: true
  }
})
const emits = defineEmits(['submit'])

/* 逻辑处理 */
const dialogRef = ref()
const submit = (model: any) => {
  emits('submit', model)
  // dialogRef.value?.close()
}
const close = () => {
  dialogRef.value?.close()
}
const open = () => {
  dialogRef.value?.open()
}
defineExpose({
  open,
  close
})
</script>

<style scoped lang="scss">
.def-dialog-form {
}
</style>
