<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :append-to-body="appendToBody"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :destroy-on-close="true"
  >
    <slot></slot>
    <div
      slot="footer"
      v-if="isShowFooter"
    >
      <el-button @click="handleClose">{{cancel_name}}</el-button>
      <el-button
        type="primary"
        @click="confirmBtn"
      >{{confirm_name}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'PsDialog',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    width: {
      type: String,
      default: ''
    },
    appendToBody: {
      // 是否将自身插入至 body 元素，有嵌套的弹窗时一定要设置
      type: Boolean,
      default: false
    },
    isShow: {
      type: Boolean,
      default: false
    },
    isShowFooter: {
      //是否自定底部
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      confirm_name: '确定',
      cancel_name: '取消'
    }
  },

  computed: {
    visible: {
      get() {
        return this.isShow
      },
      set() {
        this.$emit('update:isShow', false)
      }
    }
  },

  methods: {
    confirmBtn() {
      // 触发保存
      this.$emit('handleConfirm')
    },
    handleClose() {
      this.$emit('handleClose')
    }
  }
}
</script>
