<template>
  <!-- 开屏 -> 红包 / 开屏 动效 -> 从页面位置移动到sdk位置 -->
  <div
    class="start_page"
    :class="{ start_page_animate: startPageAnimate }"
    ref="startPage"
  >
    <div class="img_box">
      <i class="iconfont icon-baseline-close-px" @click="back"></i>
      <img ref="normalImg" :src="normalImg" alt="" @click="start" />
      <img
        ref="activeImg"
        v-if="activeImg && showActiveImg"
        :src="activeImg"
        alt=""
        class="active_img"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "StartPage",
  components: {},
  data() {
    return {
      startPageAnimate: false, // 是否开始动画
      showActiveImg: false, // 显示动效gif
      animateTime: 3000, // 动效时间 (同时需要修改css)
    };
  },
  props: {
    // 默认展示图片
    normalImg: {
      type: String,
      default: "",
    },
    // 点击开启的动图
    activeImg: {
      type: String,
      default: "",
    },
    // 点击开始延迟关闭时间
    delayTime: {
      type: Number,
      default: 0,
    },
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 关闭
    back() {
      this.$emit("onCloseActive");

      // 1. 获取到sdk-icon的位置
      //   const floatLocation = this.getSdkIconLocation();
      // 2.1. 获取到normalImg的高度(动效终点 startPage居中)
      //   const normalImgHeight = this.$refs.normalImg.clientHeight;
      //   // 2.2 执行动效 -> 移动到sdk位置
      //   this.hbKeyframe(floatLocation, normalImgHeight);

      // 3. 不显示hb  动效时间
      //   setTimeout(() => {
      //     this.$emit("onCloseActive");
      //   }, this.animateTime);
    },

    // 获取sdk-icon的位置
    getSdkIconLocation() {
      const float = document.querySelector(".float");
      const floatTop = float && float.getClientRects()[0].top;
      const floatLeft = float && float.getClientRects()[0].left;
      const floatHeight = float && float.getClientRects()[0].height;
      return { top: floatTop, left: floatLeft, height: floatHeight };
    },

    // keyframe 动效 -> 移动到sdk位置
    hbKeyframe(floatLocation, imgHeight) {
      // 获取本身高度
      const scale = 0.2;

      // 设置keyframes
      const style = document.createElement("style");
      style.setAttribute("type", "text/css");
      document.head.appendChild(style);
      let sheet = style.sheet;
      sheet.insertRule(
        `
         @keyframes moveToIcon {
             100% {
                width: 1%;
                top: ${
                  floatLocation.top +
                  floatLocation.height / 2 -
                  (imgHeight * scale) / 10 / 2
                }px;
                margin-left:0;
                margin-top:0;
                left: ${floatLocation.left}px;
            }
        }
          `
      );
      this.startPageAnimate = true;
    },

    // 点击开启
    start() {
      // 显示active
      this.showActiveImg = true;
      this.$emit("onOpenActivePage");

      //  gif播放完执行动效  动效时间
      //   setTimeout(() => {
      // 展示
      // this.$emit("onOpenActivePage");
      //     // 1. 获取到sdk-icon的位置
      //     const floatLocation = this.getSdkIconLocation();
      //     // 2 获取到normalImg的高度(动效终点 startPage居中)
      //     const normalImgHeight = this.$refs.normalImg.clientHeight;
      //     const activeImgHeight =
      //       this.$refs.activeImg && this.$refs.activeImg.clientHeight;
      //     // 3.1 执行动效 -> 移动到sdk位置 (如果active存在, 取activImg 不存在, 取normalImg)
      //     this.hbKeyframe(floatLocation, activeImgHeight || normalImgHeight);
      //     // 3.2 不显示hb
      //     setTimeout(() => {
      //       this.$emit("onCloseActive");
      //     }, this.animateTime);
      //   }, this.delayTime);
    },
  },
};
</script>

<style lang='less' scoped>
.start_page {
  width: 600 / @rem;
  height: 824 / @rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -412 / @rem;
  margin-left: -300 / @rem;
  transition: all 1s;

  .img_box {
    width: 100%;

    .icon-baseline-close-px {
      margin-right: 10 / @rem;
      position: absolute;
      top: 10 / @rem;
      right: 10 / @rem;
      font-size: 50 / @rem;
      color: #fff;
      cursor: pointer;
      z-index: 3;
    }

    img {
      width: 100%;
      position: absolute;
      left: 0;

      &.active_img {
        // transform: rotateY(180deg);
      }
    }
  }
}

.start_page_animate {
  animation: moveToIcon 3s 1 forwards;

  .img_box {
    .icon-baseline-close-px {
      display: none;
    }
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .start_page {
    width: 250 / @rem;
    height: 350 / @rem;
    margin-top: -175 / @rem;
    margin-left: -125.5 / @rem;

    .img_box {
      .icon-baseline-close-px {
        margin-right: 5 / @rem;
        top: 5 / @rem;
        right: 5 / @rem;
        font-size: 25 / @rem;
      }
    }
  }
}

// ipad 横屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .start_page {
    width: 300 / @rem;
    height: 425 / @rem;
    margin-top: -212.5 / @rem;
    margin-left: -150 / @rem;

    .img_box {
      .icon-baseline-close-px {
        margin-right: 5 / @rem;
        top: 5 / @rem;
        right: 5 / @rem;
        font-size: 18 / @rem;
      }
    }
  }
}
</style>