<!--
 * @Author: your name
 * @Date: 2021-10-19 14:56:17
 * @LastEditTime: 2022-04-28 11:22:47
 * @LastEditors: your name
 * @Description: 弹出框
 * @FilePath: \Foshan4A\src\layout\components\Dialog\index.vue
-->
<template>
  <div class="dialog">
    <el-dialog
      :visible.sync="flag"
      :append-to-body="isBody"
      ref="dialogTk"
      :top="top"
      :custom-class="customClass"
      :lock-scroll="false"
      :modal="modal"
      :before-close="close"
      :width="width"
      :show-close="showFlag"
    >
      <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,
    },
    showFlag: {
      type: Boolean,
      default: false,
    },
    // 弹框宽度
    width: {
      type: String,
      default: "400px",
    },
    // 弹框类名
    customClass: {
      type: String,
      default: "",
    },
    // 弹框高度
    top: {
      type: String,
      default: "0vh",
    },
    // 弹框遮罩层
    modal: {
      type: Boolean,
      default: true,
    },
    // 二级弹框标记
    child: {
      type: Boolean,
      default: false,
    },
    isBody: {
      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>
::v-deep .el-dialog {
  border-radius: 2px;
  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 {
    padding: 0;
    .title {
      padding: 10px 0px 10px 20px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      height: 36px;
      background: #2d67e3;
      color: #ffffff;
      margin-bottom: 24px;
      width: 100%;
    }
    .del-title,
    .Deltitle {
      padding: 10px 0px 10px 20px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      height: 36px;
      background: #eb2f3b;
      color: #ffffff;
      display: flex;
      align-items: center;
      margin-bottom: 36px;
      width: 100%;
    }
    .Delfoot {
      background-color: #fff;
    }
    .DelIcon {
      width: 26px;
      height: 26px;
      background: #eb2f3b;
      border-radius: 50%;
      margin-right: 15px;
      background: url("../../../assets/index/ic_close_hint.png") no-repeat;
      background-size: 100% 100%;
      display: inline-block;
      position: relative;
      top: 6px;
    }
    .DelTxt {
      color: #eb2f3b;
      margin: 0 6px;
    }
    .del-content {
      .error {
        color: #eb2f3b;
      }
    }
    .dialog-content .el-form {
      padding-right: 24px;
    }
    .el-form-item__label {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #303133;
    }
  }
  .el-button + .el-button {
    margin-left: 0px;
  }
}
</style>
