<template>
  <div>
    <el-dialog
      :title="title"
      :width="width"
      :visible.sync="showDialog"
      :show-close="showClose"
      :before-close="beforClose">
      <slot name="content"></slot>
      <span slot="footer" class="dialog-footer" v-if="showFooter">
        <el-button  @click="handleCancelClick" v-if="showCancelBtn">{{ cancelText }}</el-button>
        <el-button type="primary" @click="handleConfirmClick" v-if="showConfirmBtn">{{ confirmText }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: 'VDialog',
    props: {
        title: {
            type: String,
            default: '标题'
        },

        width: {
            type: String,
            default: '600px'
        },

        showClose: {
            type: Boolean,
            default: true
        },

        showDialog: {
            type: Boolean,
            default: false
        },

        showFooter: {
            type: Boolean,
            default: true
        },

        showCancelBtn: {
            type: Boolean,
            default: true
        },

        showConfirmBtn: {
            type: Boolean,
            default: true
        },

        cancelText: {
            type: String,
            default: '取 消'
        },

        confirmText: {
            type: String,
            default: '确 定'
        }
    },
    data () {
        return {
        }
    },
    watch: {
    },
    methods: {
        beforClose () {
            this.$emit('close')
        },
        handleConfirmClick () {
            this.$emit('confirm')
        },
        handleCancelClick () {
            this.$emit('cancel')
        }
    }
}
</script>

<style lang="less" scoped>
  /deep/.el-dialog__header {
    border-bottom: 1px solid #E4E7ED;
  }
</style>
