<template>
  <transition name="bounce">
    <div class="popManager" v-if="popManagerShow" :style="popUpStyle">
      <component
        v-for="item in popList"
        :key="item.id"
        :ref="'component_' + item.id"
        :param="item.param"
        :is="item.component"
      />
    </div>
  </transition>
</template>

<script>
import guid from "../../public_js/guid";
export default {
  name: "TslPopUp",
  data() {
    return {
      popManagerShow: false,
      popList: [],
      popUpStyle: {
        width: 0,
        height: 0,
      },
    };
  },
  props: {
    param: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  created() {
    window.pop = this;
  },
  mounted() {
    this.reseizeScreen();
    window.addEventListener("resize", this.reseizeScreen);
  },
  methods: {
    reseizeScreen() {
      let wh = document.documentElement.clientHeight;
      let ww = document.documentElement.clientWidth;
      ww = ww || this.$parent.$parent.$el.clientWidth;
      wh = wh || this.$parent.$parent.$el.clientHeight;
      this.popUpStyle.width = ww + "px";
      this.popUpStyle.height = wh + "px";
    },
    show(args) {
      if (args.component !== undefined) {
        let id = guid();
        this.popList.push({
          id: id,
          component: args.component,
          param: { ...args.param, id: id },
        });
        this.popManagerShow = true;
      } else {
        this.popManagerShow = false;
      }
    },
    close(id) {
      if (id) {
        let index = 0;
        this.popList.filter((item, num) => {
          if (item.id == id) {
            index = num;
          }
          return item.id === id;
        });
        this.popList.splice(index, 1);
      } else {
        this.popList = [];
        this.popManagerShow = false;
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.reseizeScreen);
  },
};
</script>

<style scoped>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}

.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.popManager {
  background: rgba(0, 0, 0, 0.89);
  position: fixed;
  left: 0px;
  top: 0px;
}
</style>
