<template>
  <!--dialog对话框组件-->
  <div class="def-dialog">
    <!--对话框打开路径-->
    <slot>
      <el-button type="primary" @click="open">打开对话框表单（默认插槽）</el-button>
    </slot>
    <!--对话框区域-->
    <el-dialog v-model="dialogVisible" v-bind="props" :before-close="handleClose">
      <!--顶部标题-->
      <template #title v-if="slots.header">
        <slot name="header"></slot>
      </template>
      <!--内容-->
      <el-scrollbar height="800px">
        <slot name="content">内容区域</slot>
      </el-scrollbar>
      <!--底部操作-->
      <template #footer v-if="slots.footer">
        <slot name="footer">
          <span class="dialog-footer">
            <el-button type="primary" @click="confirm">确定</el-button>
            <el-button @click="close">取消</el-button>
          </span>
        </slot>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, withDefaults, useSlots } from 'vue'
import { ElMessageBox } from 'element-plus'

/* 类型声明 */
export interface IElDialogProps {
  // hiddenHeader?: boolean // 隐藏header
  // hiddenFooter?: boolean // 隐藏footer
  // dialog组件属性
  title?: string // Dialog 对话框 Dialog 的标题， 也可通过具名 slot name=header传入
  width?: string | number // Dialog 的宽度
  fullscreen?: boolean // 是否为全屏 Dialog
  top?: string // Dialog CSS 中的 margin-top 值
  modal?: boolean // 是否需要遮罩层
  appendToBody?: boolean // Dialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true
  lockScroll?: boolean // 是否在 Dialog 出现时将 body 滚动锁定
  closeOnClickModal?: boolean // 是否可以通过点击 modal 关闭 Dialog
  closeOnPressEscape?: boolean // 是否可以通过按下 ESC 关闭 Dialog
  showClose?: boolean // 是否显示关闭按钮
  draggable?: boolean // 为 Dialog 启用可拖拽功能
  center?: boolean // 是否让 Dialog 的 header 和 footer 部分居中排列
  destroyOnClose?: boolean // 当关闭 Dialog 时，销毁其中的元素
}

/* 参数相关 */
const props = withDefaults(defineProps<IElDialogProps>(), {
  hiddenHeader: false,
  hiddenFooter: false,
  // dialog 默认属性
  title: '对话框标题',
  width: '50%',
  top: '15vh',
  modal: true,
  lockScroll: true,
  closeOnClickModal: true,
  closeOnPressEscape: true,
  showClose: true
})
const emits = defineEmits(['confirm'])
const slots = useSlots()
// const hiddenH = ref<boolean>(props.hiddenHeader)
// const hiddenF = ref<boolean>(props.hiddenFooter)

/* dialog对话框操作 */
const dialogVisible = ref<boolean>(false)
// 打开对话框
const open = () => {
  dialogVisible.value = true
}
// 取消按钮 - 关闭对话框
const close = () => {
  dialogVisible.value = false
}
// 确定按钮
const confirm = async () => {
  await emits('confirm')
  close()
}
// 关闭提示
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('你确定关闭该对话框吗?')
    .then(() => {
      close()
      done()
    })
    .catch(() => {
      // catch error
    })
}

// 分发组件事件（可以从父组件ref中调用此分发的方法）
defineExpose({
  open,
  close
})
</script>

<style scoped lang="scss">
.def-dialog {
  :deep(.el-button) {
    // 解决按钮点击后移开鼠标颜色仍然聚焦的解决方法
    &:focus {
      color: var(--el-button-text-color);
      background-color: var(--el-button-bg-color);
      border: var(--el-border);
      border-color: var(--el-button-border-color);
    }
    &:hover {
      color: var(--el-button-hover-text-color);
      background-color: var(--el-button-hover-bg-color);
      border-color: var(--el-button-hover-border-color);
      outline: 0;
    }
  }
}
</style>
