<template>
  <div id="wrap" :style="{ height: screenHeight + 'px' }">
    <div id="main" :style="{ top: nowTop + 'px' }">
      <ul
        id="pageUl"
        type="circle"
        v-for="(item, index) in buttons"
        :key="index"
      >
        <li :id="item" :class="{ item, active: curIndex == index + 1 }">
          &nbsp;
        </li>
      </ul>
      <div id="page1" class="page">
        <!-- <NavBar :class="[curIndex != 1 ? 'navBarFixed' : 'navBar']" /> -->
        <NavBar class='navBar'/>
        <Boutique class="home-item" ref="Boutique" />
      </div>
      <div id="page2" class="page">
        <Virtural class="home-item" ref="Virtural" />
      </div>
      <div id="page3" class="page">
        <CulturalRelic class="home-item" ref="CulturalRelic" />
      </div>
      <div id="page4" class="page">
        <Display class="home-item" ref="Display" />
      </div>
      <div id="page5" class="page">
        <MuseumMap class="home-item" ref="MuseumMap" />
      </div>
      <!-- <div id="page6" class="page">
        <Footer />
      </div> -->
      <div class="down-arrow">
        <img src="@/assets/imgs/home/down.png" alt="" />
      </div>
    </div>
  </div>
</template>
 
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import Boutique from "./components/Boutique.vue";
import MuseumMap from "./components/MuseumMap.vue";
import Virtural from "./components/Virtural.vue";
import Display from "./components/Display.vue";
import CulturalRelic from "./components/CulturalRelic.vue";
export default {
  components: {
    NavBar,
    Footer,
    MuseumMap,
    Boutique,
    Virtural,
    Display,
    CulturalRelic,
  },
  name: "Home",
  data() {
    return {
      screenWeight: 0, // 屏幕宽度
      screenHeight: 0, // 屏幕高度
      index: 1, // 用于判断翻页
      curIndex: 1, // 当前页的index
      startTime: 0, // 翻屏起始时间
      endTime: 0, // 上一次翻屏结束时间
      nowTop: 0, // 翻屏后top的位置
      pageNum: 0, // 一共有多少页
      main: Object,
      obj: Object,
      buttons: [
        "pageUlLi1",
        "pageUlLi2",
        "pageUlLi3",
        "pageUlLi4",
        "pageUlLi5",
      ],
      navBarFixed: false,
    };
  },
  mounted() {
    this.screenWeight = document.documentElement.clientWidth;
    this.screenHeight = document.documentElement.clientHeight;
    this.main = document.getElementById("main");
    this.obj = document.getElementsByTagName("div");
    for (let i = 0; i < this.obj.length; i++) {
      if (this.obj[i].className == "page") {
        this.obj[i].style.height = this.screenHeight + "px";
      }
    }
    this.pageNum = document.querySelectorAll(".page").length;

    // 浏览器兼容
    if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
      document.addEventListener("DOMMouseScroll", this.scrollFun, false);
    } else if (document.addEventListener) {
      document.addEventListener("mousewheel", this.scrollFun, false);
    } else if (document.attachEvent) {
      document.attachEvent("onmousewheel", this.scrollFun);
    } else {
      document.onmousewheel = this.scrollFun;
    }
  },
  methods: {
    scrollFun(event) {
      this.startTime = new Date().getTime();
      // mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
      // DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
      let delta = event.detail || -event.wheelDelta;
      // 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
      if (this.startTime - this.endTime > 1000) {
        if (
          delta > 0 &&
          parseInt(this.main.offsetTop) >=
            -(this.screenHeight * (this.pageNum - 2))
        ) {
          // 向下滚动
          this.index++;
          this.toPage(this.index);
        } else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {
          // 向上滚动
          this.index--;
          this.toPage(this.index);
        }
        // 本次翻页结束，记录结束时间，用于下次判断
        this.endTime = new Date().getTime();
      }
    },
    // 翻页
    toPage(index) {
      if (index != this.curIndex) {
        let delta = index - this.curIndex;
        this.nowTop = this.nowTop - delta * this.screenHeight;
        this.curIndex = index;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
html,
body {
  height: 100%;
}

body,
ul,
li,
a,
p,
div {
  /*慎删*/
  padding: 0px;
  margin: 0px;
}

#wrap {
  overflow: hidden;
  width: 100%;
}

#main {
  position: relative;
  transition: top 1.5s;
}

.page {
  /*谨删*/
  width: 100%;
  margin: 0;
}

#pageUl {
  position: fixed;
  right: 10px;
  bottom: 50%;
}

.active {
  color: red;
}

#page1 {
  position: relative;
  flex-direction: column;
  .navBar {
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.25); // left: 0;
    transition: all 1s ease;
  }
  .navBarFixed {
    position: fixed;
    top: 0;
    z-index: 999;
    background: #2069c4;
    transition: all 1s ease;
  }
}
.home-item {
  height: 100%;
}
.down-arrow {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  animation: arrowBounce 2s infinite;
  z-index: 999;
}

@keyframes arrowBounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
</style>