<template>
  <el-dialog :visible.sync="dialogVisible" v-dialogDrag :width="width" @close="closeDialog('ruleForm', !showEnter)"
    :fullscreen="fullscreen" top="0" :append-to-body="true" :lock-scroll="true" :close-on-click-modal="false"
    custom-class="dialogBox" :destroy-on-close="true" :class="[customClass]" id="dialogBox" ref="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" ref="dialogFooter" v-if="isButton">
      <div class="dialog_button" v-if="normal">
        <el-button @click="closeDialog('ruleForm',)" v-if="isReset && !isSave && showEnter">确定</el-button>
        <el-button @click="closeDialog('ruleForm', showEnter)" v-if="isReset">取消</el-button>
        <el-button type="primary" plain @click="submitForm('ruleForm')" v-if="isSave" :loading="saveloding">
          {{ saveButton }}</el-button>

      </div>
      <div class="dialog_button" v-else>
        <el-button @click="closeDiaActivity(true)">确定</el-button>
        <el-button @click="closeDiaActivity(false)">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    value: { type: Boolean, default: false, },
    activity: {
      type: Boolean,
      default: false,
    },
    normal: {
      type: Boolean,
      default: true,
    },
    showEnter: {
      type: Boolean,
      default: true,
    },
    isButton: {
      type: Boolean,
      default: true,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: '70%',
    },
    title: {
      type: String,
      default: '',
    },
    customClass: {
      type: String,
      default: '',
    },
    topHeight: {
      type: String,
      default: '0',
    },
    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: {
    isShow () {
      this.dialogVisible = true
    },
    isHide () {
      this.dialogVisible = false
      this.key++
    },
    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 (ruleForm) {
      if (!this.multiple) {
        this.$parent.submitForm(ruleForm)
      } else {
        this.$emit('submitForm', ruleForm);
      }
    },
    closeDialog (ruleForm, flag) {
      console.log(456789, this.multiple)
      this.key++
      if (!this.multiple) {
        if (this.$parent.closeDialog) {
          // console.log(1)
          this.$parent.closeDialog(ruleForm)
        } else {
          // console.log(2)
          this.dialogVisible = false;
        }
      } else {
        this.$emit('closeDialog', ruleForm, flag);
      }
    },
    closeDiaActivity (flag) {
      this.$emit('closeDialog', flag);
    }
  },
}
</script>
<style rel="stylesheet/scss" lang="scss" >
@import "./dialogBox.scss";
</style>