<template>
  <LayoutApp :show-back="true">
        <div class="scroll-list-wrap">
          <template v-if="!isShow">
            <div v-for="(item, index) in channelList.list" v-if="item.template_name == 'guessLike'">
              <ScrollNav :list="item.data.list" :cur="cur"></ScrollNav>
            </div>
          </template>
          <Scroll
            ref="scroll"
            :scroll-events="scrollEvents"
            @scroll="scrollHandler"
            :options="options"
            @pulling-up="onPullingUp"
            :data="productList.list">
            <div class="body" ref="body">
              <div class="channel-top"></div>
              <div class="marginTop">
                <div v-for="(item, index) in channelList.list" :key="index" class="space-between">
                  <Swiper :list="item.data" v-if="item.template_name == 'threePicture'"/>
                  <Hot :list="item.data.list" v-if="item.template_name == 'image_list'" />
                  <Banner :list="item.data" v-if="item.template_name == 'single_image'" />
                  <TwoBanner :list="item.data" v-if="item.template_name == 'twoPicture'" />
                  <template v-if="!isShow">
                    <div ref="sss" v-if="item.template_name == 'guessLike'">
                      <ScrollNav :list="item.data.list" :cur="cur" @transfer="getIndex"></ScrollNav>
                    </div>
                  </template>
                </div>
              </div>
              <div :style="{minHeight: total + 'px'}">
                <ProductList :list="productList.list" v-if="productList.list.length > 0" class="bgColor"></ProductList>
                <UfoNoItem :tip="`暂无数据`" v-else></UfoNoItem>
              </div>
            </div>
          </Scroll>
        </div>
  </LayoutApp>
</template>

<script>
import { Style, Scroll, Sticky } from 'cube-ui'
import { createNamespacedHelpers } from 'vuex';
import Swiper from './components/swiper';
import Banner from './components/banner';
import TwoBanner from './components/twoBanner';
import Hot from './components/hot';
import ScrollNav from './components/scrollNav';
import ProductList from '../../list/components/productList';
import { setTimeout } from 'timers';
import UfoNoItem from '../../../components/ufo-no-item';

const { mapState, mapActions } = createNamespacedHelpers('home/channel');
const { mapState: mapStateList, mapActions: mapActionsList } = createNamespacedHelpers('list');

export default {
  data() {
    return {
      options: {
        bounce: {
          top: false
        },
        pullUpLoad: true
      },
      scrollEvents: ['scroll'],
      scrollY: 0,
      navTop: 0,
      navHeight: 0,
      isShow: false,
      total: 0,
      marginTop: 0,
      cur: 0,
    }
  },
  computed: {
    ...mapState(['channelList']),
    ...mapStateList(['productList']),
  },
  mounted() {
    const params = {
      isPage: true,
      isHome: true,
    } 
    this.fetchChannelList().then((res)=>{
      let windowH = document.documentElement.clientHeight || document.body.clientHeight;
      this.navTop = this.$refs.sss[0].offsetTop;
      this.navHeight = this.$refs.sss[0].offsetHeight;
      this.total = windowH - this.navHeight;
      
    });
    this.fetchProductList(params);
  },
  created() {
    
  },
  methods: {
    getIndex(index) {
      this.cur = index;
      console.log(this.cur);
    },
    scrollHandler({ y }) {
      let scrollY = Math.abs(parseInt(y));
      if(scrollY >= this.navTop) {
        this.isShow = true;
        this.marginTop = 0;
      } else {
        this.isShow = false;
        this.marginTop = '30px';
      }
      // this.scrollY = -y
    },
    ...mapActions(['fetchChannelList']),
    ...mapActionsList(['fetchProductList']),
    async onPullingUp() {
      const params = {
        isReset: false,
        isHome: true,
      } 
      await this.fetchProductList(params);
      this.$refs.scroll.forceUpdate()
    }
  },
  components: {
    Swiper,
    Banner,
    TwoBanner,
    Hot,
    ScrollNav,
    Style,
    Scroll,
    Sticky,
    cubeSticky: Sticky,
    cubeStickyEle: Sticky.Ele,
    ProductList,
    UfoNoItem
  }
};
</script>

<style lang="scss" scoped>
.channel-top {
  width: 100%;
  height: 310px;
  background: #08304B;
}
.marginTop {
  margin-top: -150px;
}
.scroll-app {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  font-size: 0.6rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.scroll-flex {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
    position: relative;
}
.scroll-list-wrap {
  height: 100%;
  width: 100%;
}
.body {
  height: 100%;
  overflow-y: auto;
}
.space-between {
  padding: 0 20px;
}
.bgColor {
  background: #f5f5f5;
}
.navFixed {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
</style>