<template>
  <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" :width="width" :fullscreen="fullscreen" top="0"
    :append-to-body="appendToBody" :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key"
    :custom-class="isMain ? 'mainCenter dialogBox' : 'contentCenter dialogBox'" :destroy-on-close="true" ref="dialogBox"
    id="dialogBox">
    <div slot="title">
      <div class="dialog_title">
        <b>{{ title }}</b>
        <div v-if="isFullscreen" class="dialog_full">
          <i class="el-icon-rank" v-if="fullscreen" @click="handleFullscreen"></i>
          <i class="el-icon-full-screen" v-else @click="handleFullscreen" />
        </div>
      </div>
    </div>
    <div class="dialogBox-content" :style="{ height: scrollerHeight ? scrollerHeight : 'auto' }">
      <slot></slot>
    </div>
    <div slot="footer" class="dialog_footer" v-if="isButton">
      <el-button @click="closeDialog" v-if="isReset">取消</el-button>
      <el-button type="primary" plain @click="submitForm" v-if="isSave" :disabled="btnDisabled" :loading="saveloding">
        {{ saveButton }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    value: { type: Boolean, default: false },
    isMain: {
      type: Boolean,
      default: false
    },
    appendToBody: {
      type: Boolean,
      default: true
    },
    isButton: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default: '70%',
    },
    title: {
      type: String,
      default: '',
    },
    isFullscreen: {
      type: Boolean,
      default: true,
    },
    isSave: {
      type: Boolean,
      default: true,
    },
    saveButton: {
      type: String,
      default: '提交',
    },
    isReset: {
      type: Boolean,
      default: true,
    },
    saveloding: {
      type: Boolean,
      default: false,
    },
    btnDisabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      key: 0,
      dialogVisible: false,
      fullscreen: false,
      scrollerHeight: false,
    }
  },
  watch: {
    value (val) {
      this.dialogVisible = val
    }
  },
  methods: {
    handleFullscreen (val) {
      this.fullscreen = !this.fullscreen
      let height = document.getElementById('dialogBox').clientHeight
      if (!this.fullscreen) {
        this.scrollerHeight = false
      } else {
        this.scrollerHeight = (window.innerHeight - 180) + 'px'
      }
    },
    submitForm () {
      if (this.isButton) {
        this.$emit('submitForm');
      }
    },
    closeDialog () {
      this.key++
      this.$emit('input', false)
      this.$emit('closeDialog')
    }
  },
}
</script>
<style rel="stylesheet/scss" lang="scss" >
@import "~@/styles/mixin.scss";
@import "./dialogBox.scss";
</style>
<style rel="stylesheet/scss" scoped lang="scss" >
/deep/.is-fullscreen {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
</style>