<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    :width="dialogWidth"
    :before-close="handleClose"
    :close-on-click-modal="false"
    append-to-body
    :show-close="showClose"
  >
    <slot></slot>
    <div slot="footer" class="dialog-footer">
      <el-button type="info" @click="cancel">{{cancelText}}</el-button>
      <el-button type="primary" @click="save">{{confirmText}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    props: {
      dialogTitle: {
        type: String,
        default: '标题'
      },
      visible: {
        type: Boolean,
        default: false
      },
      dialogWidth: {
        type: String,
        default: '550px'
      },
      confirmText: {
        type: String,
        default: '确定'
      },
      cancelText: {
        type: String,
        default: '取消'
      },
      showClose: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      dialogVisible: {
        get () {
          return this.visible;
        },
        set (val) {
        }
      }
    },
    data(){
      return{
      }
    },
    created(){
    },
    methods: {
      cancel () {
        this.$emit('closeDialog');
      },
      save () {
        this.$emit('saveDialog');
      },
      handleClose () {
        this.$emit('closeDialog');
      }
    }
  }
</script>