<template>
  <el-dialog :visible.sync="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" :append-to-body="true"
    :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog"
    :custom-class="isMain ? 'mainCenter dialogBox' : 'contentCenter dialogBox'" :destroy-on-close="true" ref="dialogBox"
    id="dialogBox">
    <div slot="title" class="dialog_title" ref="dialogTitle">
      <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 class="dialogBox-content" :style="{ height: scrollerHeight ? scrollerHeight : 'auto' }" :key="key">
      <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" :loading="saveloding">
        {{ saveButton }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    value: { type: Boolean, default: false },
    isMain: {
      type: Boolean,
      default: false
    },
    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,
    },
  },
  data () {
    return {
      key: 0,
      dialogVisible: false,
      fullscreen: false,
      scrollerHeight: '',
    }
  },
  watch: {
    value (val) {
      this.dialogVisible = val
    }
  },
  methods: {
    handleFullscreen () {
      this.fullscreen = !this.fullscreen
      let height = document.getElementById('dialogBox').clientHeight
      if (!this.fullscreen) {
        this.scrollerHeight = false
      } else {
        this.scrollerHeight = (window.innerHeight - 180) + 'px'
      }
    },
    submitForm () {
      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>