<template>
  <div style="width: 100%;overflow: hidden;" @wheel="handleScroll">
    <!-- <el-scrollbar ref="scrollRef"
    @scroll="onChange" name="scrollRef">
      <div></div>
    </el-scrollbar> -->
        <template v-for="(item, index) in HomeData">
          <indexNav :key="index" v-if="item.Id == 'index_nav'" :id="`homeRefs_${index}`"
          :plugData="item.plugData" :windowWidth="windowWidth" :top="item.top" :currentHeight="currentHeight"></indexNav>
          <indexSlider :key="index" v-if="item.Id == 'index_slider1'" :id="`homeRefs_${index}`"
          :plugData="item.plugData" :windowWidth="windowWidth" :top="item.top" :currentHeight="currentHeight"></indexSlider>
          <indexRoll1 :key="index" v-if="item.Id == 'index_roll1'" :id="`homeRefs_${index}`"
          :plugData="item.plugData" :windowWidth="windowWidth" :top="item.top" :currentHeight="currentHeight"></indexRoll1>
          <indexRoll2 :key="index" v-if="item.Id == 'index_roll2'" :id="`homeRefs_${index}`"
          :plugData="item.plugData" :windowWidth="windowWidth" :top="item.top" :currentHeight="currentHeight"></indexRoll2>
        </template>

  </div>
</template>
<script>
import indexNav from "../../components/home/indexNav";
import indexSlider from "../../components/home/indexSlider";
import indexRoll1 from "../../components/home/indexRoll1";
import indexRoll2 from "../../components/home/indexRoll2";
export default {
  name: "PageIndex",
  components:{
    indexNav,
    indexSlider,
    indexRoll1,
    indexRoll2
  },
  data() {
    return {
      RB_Group_Id: 0,
      HomeData: {},
      carHeight:0,
      isPic:false,
      windowWidth: window.innerWidth,
      scrollArea:{
        pagesTopN: 0,
        pagesTopO: 0,
        isDictionDown: ''
      },
      lastScrollTop: 0,
      isScrolling: false,
      top: 0,
      activeMenu: 0,
      currentHeight: 0,
    }
  },
  watch: {
    days: {
      handler: function (val, oldval) {}
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
  },
  created() {
    window.addEventListener('resize', this.handleResize);
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    this.init()
    this.timer = setInterval(() => {
      this.init()
    }, 100)
  },
  methods: {
    handleScroll(e) {
      let temp = this.getScroll();
      this.currentHeight = temp.top
      let isScroll = this.$route.path!='/index'&&this.$route.path!='/'
      if (isScroll) {
        window.removeEventListener("scroll", this.handleScroll);
      }
    },
    getScroll() {
      return {
        left:
          window.pageXOffset ||
          document.documentElement.scrollLeft ||
          document.body.scrollLeft ||
          0,
        top:
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop ||
          0,
      };
    },
    onChange(e){
      // console.log(e.scrollTop,'----')
      const isDictionDown = e.scrollTop-this.lastScrollTop>0
      this.scrollArea.isDictionDown = isDictionDown
      this.scrollArea.pagesTopO = e.scrollTop
      this.lastScrollTop = e.scrollTop
      if(this.isScrolling) return
      const nodes = document.querySelectorAll(".homeRefs")
      if(isDictionDown){
        this.isScrolling=true

        if(nodes && nodes.length>0){
          for (let i = 0; i < nodes.length; i++) {
            const x = nodes[i]
            if(x.offsetTop>e.scrollTop){
              top= x.offsetTop
              if(i<5){
                this.$ref.scrollRef.setScrollTop(top)
              }
              else this.isScrolling=false
              break;
            }
          }
        }
        setTimeout(()=>{
          this.isScrolling=false
        },300)
      }else{
        this. top = e.scrollTop
        if(nodes && nodes.length>0){
          for (let i = 0; i < nodes.length; i++) {
            const x = nodes[i]
            const y = nodes[i-1]
            if(x.offsetTop>e.scrollTop&&y.offsetTop<e.scrollTop){
              this.activeMenu = i
            }
          }
        }
      }
    },
    handleResize() {
      this.windowWidth = window.innerWidth;
    },
    init() {
      this.$q.loading.show();
      var jObj = JSON.parse(localStorage.getItem("groupinfo"));
      if(jObj) {
        this.RB_Group_Id = jObj.GroupId;
        this.getHomeData();
        if(this.timer) {
          clearInterval(this.timer)
        }
      }
    },
    getHomeData() {
      let locationName = this.GetDomain();
      var msg = {
        RB_Group_Id: this.RB_Group_Id,
        B2BDomain: locationName,
      };
      this.apipost(
        "ws_get_GetHomePage",
        msg,
        (res) => {
          if (res.data.resultCode == 1) {
            if (res.data.data) {
              let arrList = function(list){
                list.forEach(x => {
                  x.top = 0
                });
              }
              arrList(res.data.data)
              this.HomeData = res.data.data;

              var jsonData = JSON.stringify(res.data.data);
              window.localStorage.setItem("HomeData", jsonData);

              setTimeout(()=>{
                this.$q.loading.hide()
              },500)
              setTimeout(()=>{
                this.HomeData.forEach((x,index)=>{
                  var object = document.getElementById(`homeRefs_${index}`);
                  x.top = object.getBoundingClientRect().top
                  // console.log(object,'---top')
                // x.top = this.$refs[`homeRefs_${index}`].getBoundingClientRect().top
              })
                // console.log(this.$refs.scrollRef,'=========')
              },1000)
            }
          }
          this.$nextTick(()=>{
            this.isPic = document.URL.indexOf("localhost")!=-1||document.URL.indexOf("www.oytour.com")!=-1
          });
        },
        (err) => {}
      );
    },

  }
}
</script>
<style scoped>
  @import url("../../assets/css/home.css");
  @import url("../../assets/css/app.css");

</style>
