<template>
    <el-dialog
      class="base-dialog"
      :title="title"
      width="60%"
      v-model="visible"
      :before-close="handleClose"
      v-bind="$attrs"
      @open="handleOpen"
    >
      <div
        class="body-wrapper"
        :class="autoHeight ? 'autoHeight' : 'fixedHeight'"
      >
        <slot></slot>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button v-if="showCancelButton" @click="handleClose">取消</el-button>
          <el-button
            v-if="showConfirmButton"
            type="primary"
            @click="handleConfirm"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </template>
   
  <script setup>
  import { computed } from 'vue'
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '提示',
    },
    autoHeight: {
      type: Boolean,
      default: true,
    },
    showCancelButton: {
      type: Boolean,
      default: true,
    },
    showConfirmButton: {
      type: Boolean,
      default: true,
    },
  })
  const emit = defineEmits([
    'update:modelValue',
    'closeDialog',
    'handleConfirm',
    'close',
    'confirm',
    'open',
  ])
  // 打开
  const handleOpen = () => {
    emit('open')
  }
  // 子组件定义自己的visible
  const visible = computed({
    get: () => props.visible,
    set: (value) => {
      // emit('update:modelValue', value)
    },
  })
  // 关闭弹窗
  const handleClose = () => {
    emit('closeDialog')
    emit('close')
    // visible.value = false
  }
   
  // 点击确定
  const handleConfirm = () => {
    emit('handleConfirm')
    emit('confirm')
  }
  </script>
   
  <style lang="scss" scoped>
  .body-wrapper {
    overflow: auto;
  }
  // .autoHeight {
  //   max-height: 56vh;
  // }
  // .fixedHeight {
  //   height: 56vh;
  // }
  </style>
   
  <style lang="scss">
  .base-dialog {
    .el-dialog__body {
      padding: 6px 16px 10px;
    }
  }
  </style>