<template>
  <div class="x-page-container">
    <template v-if="showOption.showFirst">
      <slot name="first-screen" />
      <!--      首屏分割线-->
      <div ref="first-line" />
    </template>
    <template v-if="showOption.showTwo">
      <slot name="two-screen" />
    </template>
    <template v-if="showOption.other">
      <slot name="other-screen" />
    </template>
  </div>
</template>

<script>
/**
 * 1. showFirst 首屏渲染开关
 * 2. showTwo other 非首屏渲染开关
 *思路:
 *    通过定时器轮训首屏分割线距离顶部的距离，距离不发生变化或者超过首屏高度后,骨架屏消失
 *    调整刷新频率为30ms 最大重试次数为15次
 */
export default {
  data() {
    return {
      showOption: {
        showFirst: true,
        showTwo: false,
        other: false
      }
    };
  },
  mounted() {
    const windowHeight = window.screen.height;
    let equalCount = 0; // 距离顶部距离相同计数器
    let showOther = false; // 展示非首屏逻辑
    let lineTop = -1; // 首屏分割线距离顶部的距离
    let count = 0; // 重试计时器 超过10次之后，设置为true
    const timer = setInterval(
      () => {
        const data = this.$refs['first-line']?.getBoundingClientRect();
        count++;
        if (!data?.top) return;
        if (showOther) {
          return;
        }
        if (data?.top) {
          if (lineTop !== data?.top) {
            lineTop = data?.top;
          } else {
            equalCount++;
            // 超过首屏高度,给展示
            if (data?.top > windowHeight) {
              showOther = true;
            }
            // 高度连续2次不变化，设置为true
            if (equalCount > 2) {
              showOther = true;
            }
          }
        }
        if (count > 15) {
          showOther = true;
        }
        if (showOther) {
          Object.assign(this.showOption, {
            showTwo: true,
            other: true
          });
          console.log('移除遮罩');
          this.$emit('loadFirstScreen');
          clearInterval(timer);
        }
        // 这个
      },
      30,
      true
    );
  }
};
</script>

<style lang="less" scoped>
#first-line {
  height: 1px;
  //background: red; // 这里是测试
  background: transparent;
}
</style>
