<template>
  <LayoutApp :show-back="true" :hide-header="hideHeader">
      <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" :current="active"></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" 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" :current="active" @transfer="getIndex"></ScrollNav>
                  </div>
                </template>
              </div>
            </div>
            <div :style="{minHeight: total + 'px'}" :class="{marginTop: isShow}">
              <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 queryString from 'query-string';
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 {
  props: ['hideHeader'],
  data() {
    return {
      options: {
        bounce: {
          top: false
        },
        pullUpLoad: true
      },
      scrollEvents: ['scroll'],
      scrollY: 0,
      navTop: 0,
      navHeight: 0,
      isShow: false,
      total: 0,
      marginTop: 0,
      active: 0,
      params: {
        isHome: true,
      }
    };
  },
  computed: {
    ...mapState(['channelList']),
    ...mapStateList(['productList']),
  },
  mounted() {
    this.fetchChannelList().then((res) => {
      console.log(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;
      res.forEach((item) => {
        if (item.template_name == "guessLike") {
          let url = item.data[0].url.split("?");
          this.params = queryString.parse(url[1]);
        }
      })
      this.fetchProductList(this.params);
    });
    
     
  },
  created() {

  },
  methods: {
    getIndex(index) {
      this.active = Number(index);
    },
    scrollHandler({ y }) {
      let scrollY = Math.abs(parseInt(y));
      if (scrollY >= this.navTop) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    ...mapActions(['fetchChannelList']),
    ...mapActionsList(['fetchProductList']),
    async onPullingUp() {
      this.params.isReset = false
      await this.fetchProductList(this.params);
    }
  },
  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;
}
.marginTop {
  // margin-top: 64px;
}
</style>