<template>
  <q-page>
    <el-scrollbar ref="scrollRef"
    @scroll="onChange" name="scrollRef" style="width: 100%;height: 100%;overflow: hidden;">
      <div>
        <template v-for="(item, index) in HomeData">
          <indexNav :key="index" v-if="item.Id == 'index_nav'" class="homeRefs"
          :plugData="item.plugData" :windowWidth="windowWidth"></indexNav>
          <indexSlider :key="index" v-if="item.Id == 'index_slider1'" class="homeRefs"
          :plugData="item.plugData" :windowWidth="windowWidth"></indexSlider>
          <indexRoll1 :key="index" v-if="item.Id == 'index_roll1'" class="homeRefs"
          :plugData="item.plugData" :windowWidth="windowWidth"></indexRoll1>
          <indexRoll2 :key="index" v-if="item.Id == 'index_roll2'" class="homeRefs"
          :plugData="item.plugData" :windowWidth="windowWidth"></indexRoll2>
        </template>
      </div>
    </el-scrollbar>
  </q-page>
</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,
    }
  },
  watch: {
    days: {
      handler: function (val, oldval) {}
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
  },
  created() {
    window.addEventListener('resize', this.handleResize);
  },
  mounted() {
    this.init()
    this.timer = setInterval(() => {
      this.init()
    }, 100)
  },
  methods: {
    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) {
              this.HomeData = res.data.data;
              var jsonData = JSON.stringify(res.data.data);
              window.localStorage.setItem("HomeData", jsonData);
              setTimeout(()=>{
                this.$q.loading.hide()
              },500)
            }
          }
          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>
