<template>
    <el-dialog
        :visible.sync="dialogShow"
        :title="title"
        append-to-body
        :width="width"
        :show-close="showCloseButton"
        :before-close="handleClose"
        :class="type == 'center' ?'center' : 'normal'"
    >
        <!-- 自定义内容 -->
        <slot></slot>
        <!-- 底部按钮 -->
        <span slot="footer" :class="[type == 'center' ? 'dialog-footer-center' : 'dialog-footer-normal', 'flex']" style="justify-content: space-between;">
            <GuipButton v-if="showCancelButton" @click="handleCancel" type="ignore" >{{ cancelText }}</GuipButton>
            <GuipButton type="primary" @click="handleConfirm">{{ confirmText }}</GuipButton>
        </span>
    </el-dialog>
  </template>
  
  <script>
  import GuipButton from '@/components/GuipButton.vue';

  export default {
    name: 'CustomDialog',
    props: {
      type:{
        type:String,
        default:'normal'
      },
      // 控制弹框显示
      dialogVisible: {
        type: Boolean,
        default: false,
      },
      // 弹框标题
      title: {
        type: String,
        default: '提示',
      },
      // 弹框宽度
      width: {
        type: String,
        default: '599px',
      },
        // 是否显示右上角关闭按钮
        showCloseButton: {
        type: Boolean,
        default: true,
        },
      // 是否显示取消按钮
      showCancelButton: {
        type: Boolean,
        default: true,
      },
      // 取消按钮文本
      cancelText: {
        type: String,
        default: '取消',
      },
      // 确认按钮文本
      confirmText: {
        type: String,
        default: '确定',
      },
    },
    components:{
        GuipButton
    },
    computed: {
        dialogShow: {
            get() {
                return this.dialogVisible;
            },
            set(newVal) {
                this.$emit('dialogVisibleChange', newVal);
            }
        }
    },
    data() {
        return {
            // 内部维护一个 visible 状态
            internalVisible: this.visible,
            // dialogVisible:false,
        };
    },
    watch: {
        // // 监听 prop 的变化，同步到 internalVisible
        // visible(newVal) {
        //     this.internalVisible = newVal;
        // },
        // // 监听 internalVisible 的变化，通知父组件
        // internalVisible(newVal) {
        //     this.$emit('update:visible', newVal);
        // },
  },
    methods: {
     // 关闭弹框
        handleClose(done) {
            this.$emit('close');
            this.internalVisible = false; // 关闭弹框
            if(done){
                done();
            }
        },
        // 点击取消按钮
        handleCancel() {
            this.$emit('cancel');
            this.internalVisible = false; // 关闭弹框
        },
        // 点击确认按钮
        handleConfirm() {
            this.$emit('confirm');
            this.internalVisible = false; // 关闭弹框
        },
    },
  };
  </script>
  
  <style scoped lang="scss"> 
  .el-dialog{
    /* width: 599px; */
    // min-height: 344px;
    // .el-dialog__header{
    //     padding: 32px 32px 12px;
    // }
    // .el-dialog__body{
    //     padding: 0 32px 32px;
    // }
  }
  </style>