<template>
  <div
    :class="`pop-wrap pop-center ${isShow ? '' : 'yinc'}`"
    :style="`background-color: rgba(0, 0, 0, ${cover ? cover : '.9'});`"
    v-if="show"
    @click="$emit('onClose')"
  >
    <div
      :class="`slot-st${isWelt ? '-' + mode : ''} ${
        isShow ? 'a-top-in' + mode : 'a-top-out' + mode
      }`"
      @click="(e) => e.stopPropagation()"
    >
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isShow: Boolean,
    isWelt: Boolean, //是否居中
    // popName: "", //弹窗名称
    // mask: Boolean, //遮住是否可点
    cover: [String, Number], //背景透明度
    mode: {
      type: String,
      default: "center",
    }, //mode
  },
  data() {
    return { show: false };
  },
  watch: {
    isShow: {
      handler(val) {
        const node = document.getElementById('peter-home-wrap')
        console.log(val);
        if (val) {
          this.timer_1&&clearTimeout(this.timer_1)
          this.show = val;
          if(node)node.style.overflow = 'hidden'
          
        } else {
          this.timer_1 = setTimeout(() => {
            this.show = false;
          }, 300);
          if(node)node.style.overflow = 'auto'
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  destroyed() {
    console.log("页面卸载了");
  },
  methods: {
    noTouch(e){
      console.log(e);
    }
  },
};
</script>
<style scoped>
/* components/mp-pop/mp-pop.wxss */

.pop-wrap {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;

  transition: all 0.3s ease-in-out;
  overflow: auto;
  z-index: 11;
}

.pop-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.slot-st {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.slot-st-bottom {
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: absolute;
  bottom: 0;
}
.slot-st-top {
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: absolute;
  top: 0;
}
.slot-st-left {
  height: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: absolute;
  left: 0;
}
.slot-st-right {
  height: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: absolute;
  right: 0;
}

@keyframes top-in {
  from {
    transform: translateY(-200vh);
    -webkit-transform: translateY(-200vh);
  }

  to {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}

@-webkit-keyframes top-in {
  from {
    transform: translateY(-200vh);
    -webkit-transform: translateY(-200vh);
  }

  to {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}

@keyframes top-out {
  to {
    transform: translateY(-200vh);
    -webkit-transform: translateY(-200vh);
  }

  from {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}

@-webkit-keyframes top-out {
  to {
    transform: translateY(-200vh);
    -webkit-transform: translateY(-200vh);
  }

  from {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}

.a-top-intop {
  animation: top-in 300ms forwards;
  -webkit-animation: top-in 300ms forwards;
}

.a-top-outtop {
  animation: top-out 300ms forwards;
  -webkit-animation: top-out 300ms forwards;
}

.yinc {
  /* height: 0; */
  opacity: 0;
}

.a-top-incenter {
  animation: top-incenter 300ms forwards;
  -webkit-animation: top-incenter 300ms forwards;
}

.a-top-outcenter {
  animation: top-outcenter 300ms forwards;
  -webkit-animation: top-outcenter 300ms forwards;
}

@keyframes top-incenter {
  from {
    opacity: 0;
    transform: scale(0.6);
    -webkit-transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

@keyframes top-outcenter {
  to {
    opacity: 0;
    transform: scale(0.6);
    -webkit-transform: scale(0.6);
  }

  from {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

.a-top-inbottom {
  animation: top-inbottom 300ms forwards;
  -webkit-animation: top-inbottom 300ms forwards;
}

.a-top-outbottom {
  animation: top-outbottom 300ms forwards;
  -webkit-animation: top-outbottom 300ms forwards;
}

@keyframes top-inbottom {
  from {
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
  }

  to {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}

@keyframes top-outbottom {
  to {
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
  }

  from {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}

.a-top-inleft {
  animation: top-inleft 300ms forwards;
  -webkit-animation: top-inleft 300ms forwards;
}

.a-top-outleft {
  animation: top-outleft 300ms forwards;
  -webkit-animation: top-outleft 300ms forwards;
}

@keyframes top-inleft {
  from {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }

  to {
    transform: translateX(-0);
    -webkit-transform: translateX(-0);
  }
}

@keyframes top-outleft {
  to {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }

  from {
    transform: translateX(-0);
    -webkit-transform: translateX(-0);
  }
}

.a-top-inright {
  animation: top-inright 300ms forwards;
  -webkit-animation: top-inright 300ms forwards;
}

.a-top-outright {
  animation: top-outright 300ms forwards;
  -webkit-animation: top-outright 300ms forwards;
}

@keyframes top-inright {
  from {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }

  to {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
}

@keyframes top-outright {
  to {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }

  from {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
}
</style>