<!--
 * @Author: your name
 * @Date: 2021-10-19 14:56:17
 * @LastEditTime: 2021-12-08 18:01:53
 * @LastEditors: Please set LastEditors
 * @Description: 弹出框
 * @FilePath: \Foshan4A\src\layout\components\Dialog\index.vue
-->
<template>
  <div class="dialog">
    <el-dialog :visible.sync="flag" ref="dialogTk" :top="top" :custom-class="customClass" :lock-scroll="false" :modal="modal" :show-close="false" :before-close="close" :width="width">
      <div :style="{ height: child ? (this.$store.state.settings.dialogHeight - 96) +'px': '' }" class="dialog-content">
        <slot />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    // 弹框开关
    flag: {
      type: Boolean,
      default: false
    },
    // 弹框宽度
    width: {
      type: String,
      default: '600px'
    },
    // 弹框高度
    top: {
      type: String,
      default: '0vh'
    },
    // 弹框类名
    customClass: {
      type: String,
      default: ''
    },
    // 弹框遮罩层
    modal: {
      type: Boolean,
      default: true
    },
    // 二级弹框标记
    child: {
      type: Boolean,
      default: false
    }
  },
  // 监听弹框开关
  watch: {
    flag: {
      handler (val) {
        if (val) {
          this.$nextTick(() => {
            // 获取弹框高度
            const height = this.$refs['dialogTk'].$refs.dialog.clientHeight
            if (height) {
              // 当前弹框无二级弹框时 存入高度
              if (!this.child) {
                this.$store.state.settings.dialogHeight = height
              }
            }
          })
        }
      },
      deep: true
    }
  },
  methods: {
    // 弹框关闭
    close () {
      this.$emit('closeDialog', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog {
  ::v-deep .el-dialog {
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      min-height: 240px;
      padding: 41px 48px;
      .title {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #303133;
        margin-bottom: 48px;
      }
      .el-form-item__label {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #303133;
      }
    }
    .el-button + .el-button {
      margin-left: 0px;
    }
  }
}
</style>
