<template>
    <el-dialog
            class="custom-dialog"
            :title="title"
            :visible.sync="isDialogShow"
            :width="width"
            :close-on-click-modal="doCloseByClickModel"
            :before-close="doBeforeClose">
        <slot></slot>
        <span slot="footer" class="dialog-footer">
            <span :class="{'btn-padding': otherFloat == 'right'}" :style="{float: (otherFloat === 'left' || otherFloat === 'right') ? otherFloat : 'left'}"><slot name="other"></slot></span>
            <el-button  v-if="isCancelShow" @click="doCancel">{{cancelText}}</el-button>
            <el-button  v-if="isConfirmShow" type="primary" @click="doConfirm">{{confirmText}}</el-button>
        </span>
    </el-dialog>
</template>

<script>
  export default {
    name: 'ElCustomDialog',
    props: {
      title: {
        type: String,
        default: '提示'
      }, // 标题
      confirmText: {
        type: String,
        default: '确定'
      }, // 确定按钮文案
      isConfirmShow: {
        type: Boolean,
        default: true
      }, // 确定按钮显示
      cancelText: {
        type: String,
        default: '取消'
      }, // 取消按钮文案
      isCancelShow: {
        type: Boolean,
        default: true
      }, // 取消按钮显示
      isDialogShow: {
        type: Boolean,
        default: false
      }, // 显示模态框
      width: {
        type: String,
        default: ''
      }, // 模态框宽度(只支持百分比)
      doCloseByClickModel: {
        type: Boolean,
        default: false
      }, // 点击周围是否可以关闭弹框
      otherFloat: {
        type: String,
        default: 'left'
      } // 预留按钮的浮动位置
    },
    methods: {
      doBeforeClose: function() {
        this.$emit('before-close');
        // this.isDialogShow = false;
      },
      doCancel: function() {
        this.$emit('cancel');
      },
      doConfirm: function() {
        this.$emit('confirm');
      }
    }
  };
</script>

<style>

</style>