<template>
  <LayoutApp class="yohoufo-channel-page" :show-back="true" :hide-header="hideHeader" :title="title" :no-safe-area="true">
      <div class="fixed-nav scroll-nav-wrap" :class="{'hidden': !isShow}" v-if="navList.length">
        <ScrollNav :list="navList" :current="active" @transfer="getIndex"></ScrollNav>
      </div>
      <LayoutScroll
        ref="scroll"
        class="channel-scroll"
        @scroll="scrollHandler"
        @scroll-end="scrollEndHandler"
        @pulling-up="onPullingUp" >
        <div class="channel-body" ref="body">
          <div ref="topSource" class="channel-html">
            <div class="search-header middle" @click="goSearch">
              <div class="search-img"></div>
              <input class="search-input" type="search" disabled="true" placeholder="搜索商品名称或货号"/>
            </div>
            <template v-for="(item, index) in channelList.list">
              <Swiper :list="item.data" :ref="index" :PAGE_URL="PAGE_URL" :key="index" v-if="item.template_name == 'threePicture'"/>
              <Hot :list="item.data" :ref="index" :PAGE_URL="PAGE_URL" :key="index" v-if="item.template_name == 'image_list'"/>
              <Banner :list="item.data" :ref="index" :PAGE_URL="PAGE_URL" :key="index" v-if="item.template_name == 'single_image'"/>
              <TwoBanner :list="item.data" :ref="index" :PAGE_URL="PAGE_URL" :key="index" v-if="item.template_name == 'twoPicture'"/>
            </template>
          </div>
          <!-- <div ref="scrollNav" :class="['scroll-nav-wrap',isShow?'fixed':'']" v-if="navList.length"> -->
            <div ref="scrollNav" class="scroll-nav-wrap" v-if="navList.length">
            <ScrollNav :list="navList" :current="active" @transfer="getIndex"></ScrollNav>
          </div>
          <div class="list-wrap" :style="listStyle">
            <ProductList ref="product" :list="productList.list" yasEventName="XY_UFO_MAIN_EVENT" :yasParams="listYasParams" v-if="productList.list.length > 0"></ProductList>
            <UfoNoItem class="channel-no-item" :style="'height:' +total+'px'" :tip="`暂无数据`" v-else></UfoNoItem>
          </div>
        </div>
      </LayoutScroll>
  </LayoutApp>
</template>

<script>
import { get, find, findIndex } from 'lodash';
import { Style, Scroll, Sticky } from 'cube-ui';
import { createNamespacedHelpers } from 'vuex';
import queryString from 'querystring';
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 {
      PAGE_URL: '',
      listYasParams: {},
      homeYasParams: [],
      guessLikeId: 0,
      listScrollY: 0,
      options: {
        pullUpLoad: true,
      },
      scrollEvents: ['scroll', 'scroll-end'],
      title: '闲鱼潮',
      scrollY: 0,
      navTop: 0,
      navHeight: 0,
      isShow: false,
      total: 0,
      active: 0,
      yasHeight: 0,
      listBaseParams: {
        isHome: true,
      },
      productList: {
        showErrorPage: false,
        isFetching: false,
        error: null,
        page: 0, // 当前页
        page_size: 20, // 每页数量
        page_total: 0, // 总共多少页
        total: 0, // 总共多少条
        endReached: false, // 到达底部
        list: [], // 商品列表
        isEmpty: false,
      },
      searchParams: {
        type: 0, // type：0，推荐；1，热销；2，即将发售; 3，品类； 4，品牌；5，系列；6，搜索 7, 收藏
        order: '', // 指定排序
        productPool: null, // 商品池idfetchList
        sort: null, // 品类id
        brand: null, // 品牌id
        series: null, // 系列id
        gender: null, // 性别
        size: null, // 尺码id
        isSoonSale: null, // 是否是即将售卖
        query: null, // 搜索词
        limit: null, // 每页记录数
        page: null, // 当前页号
        coupon_token: null, // 优惠券token
      },
      selectedCategory: {},
      height: 0,
      isA: false,
      isHidden: true,
      reported: false,
    };
  },
  computed: {
    ...mapState(['channelList', 'contentCode']),
    navList() {
      return get(find(this.channelList.list, ['template_name', 'guessLike']), 'data') || [];
    },
    navInfo() {
      let index = findIndex(this.channelList.list, ['template_name', 'guessLike']);
      let id = get(find(this.channelList.list, ['template_name', 'guessLike']), 'template_id');

      return {
        F_ID: id,
        F_NAME: 'guessLike',
        F_INDEX: index + 1
      };
    },
    listStyle() {
      return {
        minHeight: this.total + 'px',
        // marginTop: this.isShow? this.navHeight +'px' : 0
      };
    }
  },
  watch: {
    'channelList.list': function() {
      this.init();
    },
    navList() {
      this.$nextTick(() => {
        this.refreshProductList(this.active);
      });
    }
  },
  activated() {
    this.$refs.scroll && this.scrollY && this.$refs.scroll.scrollTo(this.scrollY);

    if (!this.channelList.list || !this.channelList.list.length) {
      this.fetchChannelList();
    }
    this.init();
    // this.getAllInboxCatInfo();

    this.PAGE_URL = window.location.href;

    if (!this.reported) {
      // 首页进入上报
      this.$store.dispatch('reportYas', {
        params: {
          param: { },
          appop: 'XY_UFO_MAIN_START'
        }
      });
    }
  },
  async serverPrefetch() {
    return this.fetchChannelList();
  },
  mounted() {
    // 初始化 选中类目
    const [firstNav] = this.navList;

    if(firstNav) {
      const {url = ''} = firstNav;

      this.selectedCategory = queryString.parse(url);
    }

    this.refreshProductList(this.active);

    // 首页进入上报
    this.$store.dispatch('reportYas', {
      params: {
        param: { },
        appop: 'XY_UFO_MAIN_START'
      }
    });

    this.reported = true;
  },
  methods: {
    ...mapActions(['fetchChannelList', 'getAllInboxCatInfo']),
    ...mapActionsList(['fetchProductList']),
    init() {
      this.$nextTick(() => {
        this.navTop = this.$refs.topSource.offsetHeight;
        this.navHeight = get(this.$refs, 'scrollNav.offsetHeight') || 0;
        this.total = this.$refs.scroll.$el.offsetHeight - this.navHeight;
        this.reportYas();
      });
    },

    // 曝光上报
    getReportEle(scrollY) {
      this.homeYasParams = [];
      this.channelList.list.map((item, index) => {
        let scrollHeight = this.$refs.scroll.$el.offsetHeight; // 滚动区高度
        let eleHeight = 0;
        let eleTop = 0;
        let reportParams = {};

        if (item.template_name !== 'guessLike') {
          eleHeight = this.$refs[index][0].$el.offsetHeight;
          eleTop = this.$refs[index][0].$el.offsetTop;
        } else {
          eleHeight = this.navHeight;
          eleTop = this.navTop;
        }
        if (scrollY) { // 滚动时
          if (scrollHeight + scrollY > eleTop && item.template_name === 'guessLike') {
            // console.log('guessLike report')
            item.data.forEach((val, i) => {
              reportParams = {...val.reportParams, PAGE_URL: this.PAGE_URL};
              this.homeYasParams.push(reportParams);
            });

          }
          if (scrollY < (eleTop + eleHeight) && item.template_name !== 'guessLike') {
            // console.log(item.template_name)
            let reportMoreParams = {};

            item.data.forEach((val, i) => {
              reportParams = {...val.reportParams, PAGE_URL: this.PAGE_URL};

              this.homeYasParams.push(reportParams);
              if (item.template_name === 'image_list') {
                reportMoreParams = Object.assign({}, reportParams, {I_INDEX: 0});
              }
            });
            Object.keys(reportMoreParams).length && this.homeYasParams.push(reportMoreParams);
          }
        } else { // 默认进入时
          if (eleTop < scrollHeight) { //  获取每个元素距顶部高度 小于可视区高度即曝光
            // console.log(item.template_name)
            let reportMoreParams = {};

            item.data.forEach((val, i) => {
              reportParams = {...val.reportParams, PAGE_URL: this.PAGE_URL};
              this.homeYasParams.push(reportParams);
              if (item.template_name === 'image_list') {
                reportMoreParams = Object.assign({}, reportParams, {I_INDEX: 0});
              }
            });
            Object.keys(reportMoreParams).length && this.homeYasParams.push(reportMoreParams);
          }
        }
      });
    },
    reportYas(scrollY) {
      this.getReportEle(scrollY);

      //  console.log(this.homeYasParams)
      this.$store.dispatch('reportYas', {
        params: {
          param: {DATA:this.homeYasParams},
          appop: 'XY_UFO_SHOW_EVENT'
        }
      });
    },
    reportTabYas() {
      let guessLikeTabParams = this.listYasParams;
      delete guessLikeTabParams.I_INDEX;
      // 防止重复上报
      if(this.guessLikeId !== guessLikeTabParams.TAB_ID) {
        this.guessLikeId = guessLikeTabParams.TAB_ID
        console.log('guesslisttab',guessLikeTabParams)
        this.$store.dispatch('reportYas', {
        params: {
          param: guessLikeTabParams,
          appop: 'XY_UFO_MAIN_EVENT'
        }
      });
      }
    },
    async guessLikeListParams(params) {
      if (params && typeof params === 'object' && Object.keys(params).length) {
        this.listYasParams = Object.assign({}, {
          P_NAME: 'XY_UFOHome',
          P_PARAM: this.contentCode,
          PAGE_URL: this.PAGE_URL,
          ...this.navInfo,
          I_INDEX: Number(params.index) + 1,
          TAB_ID: Number(params.index) + 1,
          TAB_NAME: params.title});
      }
    },
    async getIndex({index, params}) {
      this.selectedCategory = params;
      this.active = Number(index);
      this.isShow && this.$refs.scroll.scrollTo(this.navTop);
      await this.guessLikeListParams({index, ...params});
      // tab点击
      this.reportTabYas()
      // 商品列表曝光
      this.productList.list.length > 0 && this.listScrollY > 0 && this.$refs.product && this.$refs.product.yasShowEvent(this.yasHeight);
    },
    scrollEndHandler({y}) {
      let scrollHeight = Math.abs(y);
      let viewHeight = this.$refs.scroll.$el.offsetHeight;
      let productListTop = this.$refs.product && this.$refs.product.$el.offsetTop || this.navTop + this.navHeight;
      let listScrollY = scrollHeight + viewHeight - productListTop;

      this.listScrollY = listScrollY;
      this.yasHeight = scrollHeight - this.navTop;

      // 商品列表曝光
      listScrollY > 0 && this.$refs.product && this.$refs.product.yasShowEvent(this.yasHeight);
      if (scrollHeight >= this.navTop) {
        return;
      }
      this.reportYas(scrollHeight);
    },
    scrollHandler({ y }) {
      this.scrollY = -y;

      if (this.navTop) {
        this.isShow = (this.scrollY >= this.$refs.topSource.offsetHeight);
      }
    },
    async refreshProductList(index) {
      let str = get(get(this.navList, `[${index}].url`, '').split('?'), '[1]', '');

      this.searchParams = Object.assign({}, queryString.parse(str), this.listBaseParams);
      await this.fetchList(this.searchParams);

      // 列表上报数据
      this.guessLikeListParams({index: 0, ...this.searchParams});
    },

    async onPullingUp() {
      // if (this.productList.endReached) {
      //   this.$refs.scroll.forceUpdate();
      //   return;
      // }

      await this.fetchList(this.selectedCategory);
      this.$refs.scroll.forceUpdate();
    },

    // 查询商品列表
    fetchList: async function(params) {
      let searchParams = this.searchParams;
      let list = this.productList;
      let pageSize = list.page_size;
      let isReset = false;

      if (params && params.isReset) {
        isReset = true;
        delete params.isReset;
      }

      if (!isReset && (list.endReached || (!list.endReached && list.page_total === 1))) {
        return;
      }
      if (typeof params === 'object' && Object.keys(params)) {
        searchParams = {...params};
        this.searchParams = searchParams;
      }

      let page = isReset ? 1 : (list.page + 1);

      for (let key in searchParams) {
        if (!searchParams[key]) {
          delete searchParams[key];
        }
      }
      try {
        let result = await this.fetchProductList({
          ...searchParams,
          page,
          pageSize
        });

        let {data} = result;

        if (result.code === 200) {

          data.endReached = (data.page === data.page_total) && (data.page_size !== 1) || !data.page_total;

        }

        if (typeof data === 'object' && Object.keys(data).length) {
          for (let key in data) {
            if (key === 'product_list') {
              list.list = data.page > 1 ? list.list.concat(data.product_list) : data.product_list;
            } else {
              list[key] = data[key];
            }
            if (!data.product_list) {
              this.productList.list = [];
            }
          }
          this.productList = list;

        }
      } catch (e) {
        // console.log(e);
        if (this.productList.page <= 1) {
          this.productList.list = [];
        }
      }
    },

    goSearch() {
      this.$store.dispatch('reportYas', {
        params: {
          param: {SEARCH_POS: 1},
          appop: 'XY_UFO_SEARCH_CLICK'
        }
      });
      this.$router.push({
        name: 'Search',
      });
    },
  },
  components: {
    Swiper,
    Banner,
    TwoBanner,
    Hot,
    ScrollNav,
    Style,
    Scroll,
    Sticky,
    cubeSticky: Sticky,
    cubeStickyEle: Sticky.Ele,
    ProductList,
    UfoNoItem
  }
};
</script>

<style lang="scss" scoped>
.yohoufo-channel-page {
  background-color: #fefefe;
}

.fixed {
  width: 100%;
  position: fixed!important;
  top: 90px;
  z-index: 10;
  background-color: #fefefe;
  overflow: hidden;
  &:after {
    display: none;
  }
}
.scroll-nav-wrap {
  position: relative;
  background-color: #fefefe;

  &.fixed-nav {
    width: 100%;
    position: absolute;
    z-index: 10;
    overflow: hidden;
  }
}

.channel-scroll {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.channel-body {
  background-image: url("//img11.static.yhbimg.com/yhb-img01/2019/10/30/18/0178208a1e983631c677399822cd56abae.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.channel-html {
  padding: 20px 24px 0;

  &:before {
    content: "";
    width: 520px;
    height: 28px;
    background-image: url("~statics/image/channel/server.png");
    background-size: 100% 100%;
    margin: 10px auto 20px;
    display: block;
  }

  &:after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
  }

  > * {
    margin-top: 20px;
  }
}

.list-wrap {
  background: #f2f2f2;
  /deep/ .item {
    position: relative;
    z-index: 1;
  }

  .channel-no-item {
    margin: 0 auto;
  }
}
.yohoufo-channel-page {
  /deep/ .cube-pullup-wrapper {
    background: #f2f2f2;
  }
}
/deep/ .cube-scroll-nav-bar-item_active {
  &:after {
    width: 16px;
    // left: 50%;
    transform: translateX(-10px)
  }
}
.search-header {
  height: 64px;
  background: #f5f5f5;
  flex-direction: row;
  display: flex;
  font-size: 17px;
  color: #8e8e93;
  line-height: 44px;
  align-items: center;
  border-radius: 64px;
}

.search-input {
  background: #f5f5f5;
  height: 64px;
  font-size: 28px;
  color: #999;
  flex: 1;
  border-radius: 64px;
  padding: 14px 14px 14px 10px;
}

input::-webkit-input-placeholder {
    color: #000;
}

.middle {
  margin: 0 10px;
}
.search-img {
  width: 28px;
  height: 28px;
  margin-left: 20px;
  background: url(~statics/image/list/searchPage_icon@3x.png) no-repeat;
  background-size: cover;
}
.class-a {
  padding-top: 104px;
}
.hidden {
  visibility: hidden;
  opacity: 0;
}
</style>