<!--
 * @Description: 
 * @Autor: renchao
 * @LastEditTime: 2023-08-04 13:07:38
-->
<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 }">
      <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
      },
      height: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        key: 0,
        dialogVisible: false,
        fullscreen: false,
        scrollerHeight: ''
      }
    },
    watch: {
      value (val) {
        this.$nextTick(() => {
          this.dialogVisible = val
        })
        this.height && (this.scrollerHeight = this.height + 'px')
      }
    },
    methods: {
      /**
       * @description: handleFullscreen
       * @author: renchao
       */
      handleFullscreen () {
        this.fullscreen = !this.fullscreen
        if (!this.fullscreen) {
          this.scrollerHeight = ''
        } else {
          this.scrollerHeight = (window.innerHeight - 120) + 'px'
        }
      },
      /**
       * @description: submitForm
       * @author: renchao
       */
      submitForm () {
        if (this.isButton) {
          this.$emit('submitForm');
        }
      },
      /**
       * @description: closeDialog
       * @author: renchao
       */
      closeDialog () {
        this.key++
        this.$emit('closeDialog')
        this.$emit('input', false)
      }
    },
  }
</script>
<style rel="stylesheet/scss" lang="scss" >
  @import "~@/styles/mixin.scss";
  @import "~@/styles/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>