var vm = new Vue({
  el: "#app",
  data: {
    menuCss: false,
    menuActive: 0,
  },
  mounted() {
    if (screen.availWidth !== 1280 && window.devicePixelRatio !== 1.5) {
      AOS.init({
        disable: "mobile",
        duration: 600,
        delay: 50,
        easing: 'ease-in-out'
      })
    } else {
      AOS.init({
        disable: true,
        duration: 600,
        delay: 50,
        easing: 'ease-in-out'
      })
    }
    window.addEventListener('scroll', this.onScroll, false);
    window.addEventListener("scroll", this.menuFixed);
  },
  mixins: [mixins],
  methods: {
    menuFixed() {
      if (
        !!document.documentElement.scrollTop &&
        document.documentElement.scrollTop > 500 || document.body.scrollTop > 500
      ) {
        this.menuCss = true;
      } else {
        this.menuCss = false;
      }
    },
    onScroll() {
      // 获取所有锚点元素
      const navContents = document.querySelectorAll('main .call-menu')
      // 所有锚点元素的 offsetTop
      const offsetTopArr = []
      navContents.forEach(item => {
        offsetTopArr.push(item.offsetTop)
      })
      // 获取当前文档流的 scrollTop
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 定义当前点亮的导航下标
      let navIndex = 0
      for (let n = 0; n < offsetTopArr.length; n++) {
        // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
        // 那么此时导航索引就应该是n了
        if (scrollTop >= offsetTopArr[n] - 100) {
          navIndex = n
        }
      }
      this.menuActive = navIndex
    },
    // 跳转到指定索引的元素
    scrollTo(index) {
      var targetOffsetTop = document.getElementsByClassName("call-menu")[index].offsetTop;
      var offsetTop = targetOffsetTop - 50;
      if (screen.availWidth === 1280 && window.devicePixelRatio === 1.5) {
        offsetTop = targetOffsetTop / 1.2 - 50
      }
      scrollTo(0, offsetTop);
    }
  }
});