<template>
  <layout-app title="商品列表" class="brand-product-list">
    <LayoutScroll
      class="scroll-view"
      ref="pageScroll"
      @scroll-end="scrollEndHandler">
      <div class="list-wrapper" v-if="brandProductList != null">
        <product-list :list="brandProductList" priceKey="price" :yas-params="recommendYasParams"/>
      </div>
    </LayoutScroll>
  </layout-app>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
import ScrollView from 'components/layout/scroll-view';
import ProductList from '../list/components/productList';

const STORE_PATH = 'product';
const { mapState } = createNamespacedHelpers(STORE_PATH);
import trackingMixins from './tracking-mixins';

export default {
  name: 'BrandProductList',
  props: ['productId'],
  mixins: [trackingMixins],
  components: {
    ProductList,
    ScrollView,
  },
  data() {
    return {
      inLoading: false,
      scrollOption: {
        pullDownRefresh: {
          threshold: 70,
          stop: 90,
          txt: '更新成功'
        },
        observeDOM: false,
        pullUpLoad: false,
      },

      /**
       * 商品详情页-推荐商品曝光时
       * XY_UFO_SHOW_EVENT
       * 1.P_NAME：页面名称，UFOProductDetail_LIST；
       * 2.P_PARAM：页面参数；
       * 3.I_INDEX：曝光顺序；
       * 4.PRD_ID：商品id；
       * 5.POS_ID: 1：相关商品，2： 推荐推荐，3： 相关商品列表页面
       */
      recommendYasParams: {
        P_NAME: 'XY_UFOProductDetail',
        P_PARAM: this.$route.params.productId,
        POS_ID: 3,
      },
    };
  },
  computed: {
    ...mapState(['topLists']),
    brandProductList() {
      return this.topLists[this.$route.params.productId];
    },
  },
  watch: {
    brandProductList(list) {
      if (list && list.length > 0) {
        this.listDataDirty = true;
        this.scrollEndHandler();
      }
    }
  },
  asyncData({store, router}) {
    return store.dispatch(`${STORE_PATH}/fetchBrandTop`, {productId: router.params.productId});
  },
  activated() {
    this.scrollEndHandler();
  },
  methods: {
    collectTrackingInfo(viewInfo, force = false) {
      if (!this.yasTargets) {
        this.yasTargets = {};
      }

      if (this.brandProductList && this.brandProductList.length > 0 && (!this.yasTargets.productItem0  || force)) {
        let productElList = document.querySelectorAll('.product-list-item');

        if (productElList && productElList.length > 0) {
          this.brandProductList.forEach((item, idx) => {
            if (productElList[idx] && item) {
              const id = `productItem${idx}`;

              /**
               * 1.P_NAME：页面名称，XY_UFOProductDetail；
               * 2.P_PARAM：页面参数；
               * 3.I_INDEX：曝光顺序；
               * 4.PRD_ID：商品id
               * 5.POS_ID: 1：相关商品，2： 推荐推荐，3： 相关商品列表页面
               */
              this.yasTargets[id] = {
                el: {
                  offsetTop: productElList[idx].offsetTop,
                  offsetHeight: productElList[idx].offsetHeight,
                },
                yasParams: {...this.recommendYasParams, I_INDEX: idx + 1, PRD_ID: item.id},
              };
            }
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
  .brand-product-list .scroll-view {
    background: #f5f5f5;
    height: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>