<template>
  <view :style="{ display: display ? 'block' : 'none', zIndex: zIndex }" @touchmove.stop.prevent="" class="z-popup">
    <view
      @tap.stop="maskTap"
      :style="{ zIndex: zIndex }"
      @touchmove.stop=""
      :class="[animation ? 'fade-out' : 'fade-in']"
      class="mask"
    ></view>
    <view v-if="center" :style="{ zIndex: zIndex }" class="z-container">
      <slot></slot>
    </view>
    <view v-else :style="{ zIndex: zIndex }" style="position: relative">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    zIndex: {
      type: String | Number,
      default: 10000
    },
    canTapMask: {
      type: Boolean,
      default: true
    },
    center: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      animation: false,
      display: false
    }
  },
  watch: {
    value(val, old) {
      if (val == old) {
        return
      }
      val ? this.enter() : this.hide()
    }
  },
  mounted() {
    this.display = this.value
  },
  methods: {
    enter() {
      if (this.display) return
      this.display = true
      setTimeout(() => {
        this.animation = false
      }, 250)
    },
    maskTap() {
      if (this.canTapMask) {
        this.$emit('input', false)
      }
    },
    hide() {
      if (!this.display) return
      new Promise(reslove => {
        this.animation = true
        setTimeout(() => {
          this.animation = false
          this.display = false
          reslove()
        }, 250)
      }).then(() => {
        this.$emit('input', false)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.z-popup {
  position: fixed;

  .mask {
    @include flex_abc;
    height: 100vh;
    width: 100%;
  }

  .z-container {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    position: fixed;
    max-height: 80vh;
    // overflow-y: auto;
    // margin-top: -30rpx;
  }
}
</style>
