<template>
  <el-dialog
    :visible.sync="visible"
    :title="jsxTitle ? '' : title"
    :width="width"
    :fullscreen="fullscreen"
    :top="top"
    :modal="modal"
    :modal-append-to-body="modalAppendToBody"
    :append-to-body="appendToBody"
    :lock-scroll="lockScroll"
    :custom-class="customClass"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    :before-close="handleBeforeClose"
    :center="center"
    :destroy-on-close="destroyOnClose"
    @open="handleOpen"
    @opened="handleOpened"
    @close="handleClose"
    @closed="handleClosed"
  >
    <!-- 标题插槽 -->
    <template
      v-if="jsxTitle"
      slot="title"
    >
      <div :is="jsxTitle"></div>
    </template>

    <!-- 内容插槽 -->
    <div
      v-if="content && !jsxContent"
      v-html="content"
    ></div>
    <div
      :is="jsxContent"
      v-else-if="jsxContent"
    ></div>
    <slot v-else></slot>

    <!-- 底部按钮插槽 -->
    <span
      v-if="showFooter"
      slot="footer"
      class="dialog-footer"
    >
      <slot name="footer">
        <div
          :is="jsxFooter"
          v-if="jsxFooter"
        ></div>
        <template v-else>
          <el-button
            v-if="showCancel"
            @click="handleCancel"
          >{{ cancelText }}</el-button>
          <el-button
            v-if="showConfirm"
            type="primary"
            :loading="confirmLoading"
            @click="handleConfirm"
          >
            {{ confirmText }}
          </el-button>
        </template>
      </slot>
    </span>
  </el-dialog>
</template>

<script>
import { Dialog } from 'bi-eleme'
export default {
  name: 'BiDialog',
  components: {
    'el-dialog': Dialog
  },
  props: {
    // el-dialog 原有属性
    title: {
      type: String,
      default: '提示'
    },
    width: {
      type: String,
      default: '50%'
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    top: {
      type: String,
      default: '15vh'
    },
    modal: {
      type: Boolean,
      default: true
    },
    modalAppendToBody: {
      type: Boolean,
      default: false
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    lockScroll: {
      type: Boolean,
      default: true
    },
    customClass: {
      type: String,
      default: ''
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    },
    center: {
      type: Boolean,
      default: false
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },

    // 自定义属性
    content: {
      type: String,
      default: ''
    },
    jsxContent: {
      type: [Object, Function],
      default: null
    },
    jsxTitle: {
      type: [Object, Function],
      default: null
    },
    jsxFooter: {
      type: [Object, Function],
      default: null
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    showConfirm: {
      type: Boolean,
      default: true
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    confirmLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    // 打开对话框
    open() {
      this.visible = true
    },

    // 关闭对话框
    close() {
      this.visible = false
    },

    // 确认按钮点击
    handleConfirm() {
      this.$emit('confirm', this)
    },

    // 取消按钮点击
    handleCancel() {
      this.$emit('cancel', this)
      this.close()
    },

    // el-dialog 事件处理
    handleBeforeClose(done) {
      this.$emit('before-close', done, this)
    },

    handleOpen() {
      this.$emit('open', this)
    },

    handleOpened() {
      this.$emit('opened', this)
    },

    handleClose() {
      this.$emit('close', this)
    },

    handleClosed() {
      this.$emit('closed', this)
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}

.dialog-footer .el-button + .el-button {
  margin-left: 10px;
}
</style>