<template>
  <el-dialog
    v-loading="loading"
    v-drag-dialog="!isDisabledDrag"
    :title="title"
    :width="width"
    :visible.sync="visible"
    class="th-dialog"
    v-bind="dialogProps"
    :fullscreen="fullscreen"
    v-on="$listeners"
  >
    <div slot="title" class="el-dialog__title" @dblclick.stop="dblclick">{{ title }}</div>
    <el-scrollbar :style="{height: getHeight}" class="th-dialog--scrollbar">
      <slot></slot>
    </el-scrollbar>
    <div v-if="buttons.length || showCancelButton" slot="footer">
      <slot name="footer">
        <el-button
          v-for="(item, index) in buttons"
          :key="index"
          type="primary"
          :disabled="item.disabled"
          v-bind="item.props"
          @click="handleConfirm(item)">
          {{ item.label }}
        </el-button>
        <el-button
          v-if="showCancelButton"
          class="th-btn-close"
          type="info"
          @click="handleCancel"
        >{{ cancelButtonText }}</el-button>
      </slot>
    </div>
  </el-dialog>
</template>
<script>
import dragDialog from '../../../src/directive/dragDialog.js'

export default {
  name: 'ThDialog',
  directives: {
    dragDialog
  },
  props: {
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      type: String,
      default: '标题'
    },
    // 宽度
    width: {
      type: [String, Number],
      default: '50%'
    },
    // 高度
    height: {
      type: [String, Number],
      default: 'auto'
    },
    // 弹框属性
    props: {
      type: Object,
      default: () => ({})
    },
    // 底部按钮组
    buttons: {
      type: Array,
      default: () => [
        {
          label: '确定',
          key: 'Submit'
        }
      ]
    },
    // 关闭事件
    handleClose: {
      type: Function,
      default: (done) => {
        done()
      }
    },
    // 是否显示取消按钮
    showCancelButton: {
      type: Boolean,
      default: true
    },
    // 取消按钮文本
    cancelButtonText: {
      type: String,
      default: '关闭'
    },
    // 是否禁止全屏
    isDisabledFullScreen: {
      type: Boolean,
      default: false
    },
    // 是否禁止拖动
    isDisabledDrag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      fullscreen: this.props.fullscreen || false
    }
  },
  computed: {
    getHeight() {
      return this.fullscreen ? '100%' : this.height
    },
    dialogProps() {
      return {
        appendToBody: true,
        closeOnClickModal: false,
        destroyOnClose: true,
        validateOnRuleChange: false,
        ...this.props
      }
    }
  },
  methods: {
    // 显示弹框
    showDialog() {
      this.visible = true
      this.fullscreen = this.props.fullscreen || false
    },
    // 取消按钮
    handleCancel() {
      const that = this
      const done = function() {
        that.visible = false
      }
      this.handleClose(done)
    },
    // 确定按钮
    handleConfirm(btn) {
      if (this.loading) return
      this.$emit('handleConfirm', btn)
    },
    // 双击标题区
    dblclick(e) {
      if (!this.isDisabledFullScreen) {
        const dragDom = this.$el.querySelector('.el-dialog')
        dragDom.style.cssText += ';left:0;top:0;'
        this.fullscreen = !this.fullscreen
        this.$emit('dblclick', this.fullscreen)
      }
    }
  }
}
</script>
