<template>
  <!-- 弹出层 -->
  <div
    class="ext-el-mask"
    style="z-index: 1"
    :style="{ visibility: visibility, zIndex: zIndex }"
    :class="cls"
  ></div>
</template>

<script>
export default {
  props:['defaultZIndex','maskIsShow','maskShowOrHidden'],
  data() {
    return {
      visibility: "hidden",
      cls: "",
      zIndex: 0,
    };
  },
  mounted() {
    this.$bus.on("openMask", this.openMask);
    this.$bus.on("closeMask", this.closeMask);
    this.zIndex = this.defaultZIndex + 10
  },
  methods: {
    // 打开弹出层
    openMask(cls) {
      this.visibility = "visible";
      if (cls) {
        this.cls = cls;
      } else {
        this.cls = "";
      }
      this.zIndex = this.defaultZIndex + 10
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      // this.maskShowOrHidden(true)
      this.$bus.emit('maskShowOrHidden',true)
    },
    // 关闭弹出层
    closeMask() {
      this.visibility = "hidden";
      this.zIndex = this.defaultZIndex - 10
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
      // this.maskShowOrHidden(false)
      this.$bus.emit('maskShowOrHidden',false)
    },
  },
  components: {},
  name: "Mask",
};
</script>