<template>
  <el-dialog
    :model-value="visible"
    :title="title"
    :width="width"
    align-center
    :destroy-on-close="destroyOnClose"
    :fullscreen="fullscreen"
    @close="handleClose"
    v-bind="$attrs"
  >
    <!-- 对话框内容插槽 -->
    <slot />

    <!-- 底部按钮插槽 -->
    <template #footer v-if="showFooter">
      <slot name="footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="handleConfirm">确定</el-button>
      </slot>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
interface Props {
  visible: boolean
  title: string
  width?: string | number
  destroyOnClose?: boolean
  type?: string
  showFooter?: boolean
  fullscreen?: boolean
  buttonLoading?: boolean
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'confirm'): void
  (e: 'cancel'): void
  (e: 'close'): void
}

const props = withDefaults(defineProps<Props>(), {
  width: '750px',
  destroyOnClose: true,
  showFooter: true,
  fullscreen: false,
  buttonLoading: false,
})

const emit = defineEmits<Emits>()

const handleConfirm = () => {
  emit('confirm')
}

const handleCancel = () => {
  emit('update:visible', false)
  emit('cancel')
}

const handleClose = () => {
  emit('close')
}
</script>

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