<template>
  <div class="category-box">
    <scroll-view
      ref="scrollView"
      :to-top="scrollTop"
      :before-bottom-height="100"
      @toBottom="loadData"
      @scroll="onScroll"
    >
      <div class="category-box-wrapper">
        <div v-for="(category, m) in categoryList" :key="m" class="category-box--card">
          <!-- 频道页金刚区 -->
          <div v-if="+category.elementType === 4" class="category-box--vajra">
            <div v-for="(item, i) in category.items" :key="i" class="vajra--item">
              <div
                class="vajra--item--imgwrapper"
                @click="handleToDetailsTrack(item, 'CategoryKingKongClick', i)"
              >
                <cr-image :src="item.img | Img2Thumb" class="vajra--item--img" fit="fill" />
              </div>
              <span class="vajra--item--txt">{{ item.name }}</span>
            </div>
          </div>
          <!-- 频道页活动区 -->
          <!-- <div class="category-box--activity">
            <div v-for="(item, i) in activitys" :key="i" class="category-box--activity--item">
              <img :src="item.url" />
            </div>
          </div> -->
          <!-- 频道页品牌区 -->
          <div v-else-if="+category.elementType === 113" class="category-box--brands">
            <div class="category-box--brands--title">
              <img
                v-if="category.topPicture"
                :src="category.topPicture | Img2Thumb"
                class="category-box--brands--title__img"
                alt=""
              />
            </div>
            <div class="category-box--brands--body">
              <div
                v-for="(item, i) in category.brands"
                :key="i"
                class="category-box--brands--item"
                @click="handleToDetailsTrack(item, 'CategoryBrandClick', i)"
              >
                <cr-image
                  :src="item.img | imogr({ w: 48, h: 48 })"
                  fit="contain"
                  class="category-box--brands--item__img"
                />
                <div class="category-box--brands--item--name">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
        <goods-card
          ref="goodsCard"
          class="goods-card"
          event-click-name="H5_SelectionPageCommodityCardClick"
          event-exposure-name="H5_SelectionPageCommodityCardExposure"
          :exposure-params="{
            navigation_name: tabName
          }"
          :top="scrollTop"
          :goods-list.sync="goodsList"
          :show-header="false"
          no-share
        />
      </div>
      <load-more :status="loadingType" />
    </scroll-view>
  </div>
</template>
<script>
import goodsCard from '@/components/goodsCard';
import scrollView from '@/components/scrollView';
import loadMore from '@/components/loadMore';
import { apiCategoryInfo, apiCategoryGoodsList } from '@/api/home.api.js';
import localStorage from '@/service/localStorage.service';
import { Img2Thumb, imageMogr4Operation } from '@/filters/img2Thumb.filter';
import mxBll from '../mixin/mxBll';
import { TRACK_EVENT_MAP, TRACK_EXPOSURE_MAP } from '../model';
export default {
  components: {
    scrollView,
    goodsCard,
    loadMore
  },
  filters: {
    Img2Thumb,
    imageMogr4Operation
  },
  mixins: [mxBll],
  props: {
    id: {
      type: Number,
      default: 0
    },
    tabName: {
      type: String,
      default: ''
    },
    index: {
      type: Number,
      default: 0
    },
    rearCategoryIds: {
      type: String,
      default: ''
    },
    labelIds: {
      type: String,
      default: ''
    },
    active: {
      type: Number,
      default: 0
    },
    beforeActive: {
      type: Number,
      default: 0
    },
    top: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      vajraList: [],
      // activitys: [],
      brandHead: '',
      brands: [],
      categoryList: [],
      goodsList: [],
      loadingType: 'loading',
      scrollTop: 0,
      pageForm: {
        pageNo: 0,
        pageSize: 10
      },
      timer: null
    };
  },
  watch: {
    beforeActive(v) {
      if (v === this.index) {
        if (this.vajraList.length < 1) {
          this.getCategory();
        }
        if (this.goodsList.length < 1) {
          this.loading = true;
          this.loadData();
        }
      }
    },
    top(v) {
      if (this.active === this.index) {
        this.scrollTop = 0;
        this.$nextTick(() => {
          this.scrollTop = v;
        });
      }
    }
  },
  methods: {
    async getCategory() {
      const [res] = await apiCategoryInfo(this.id);
      if (res && res.length) {
        this.categoryList = res;
        res.forEach(item => {
          //exposureArea
          const eventName = TRACK_EXPOSURE_MAP[item.elementType];
          if (eventName) {
            this.exposureArea({
              eventName,
              id: item.elementType,
              name: item.componentName
            });
          }
        });
      }
    },
    // 点击事件埋点且跳转
    handleToDetailsTrack(item, area, index) {
      if (item.needLogin && !localStorage.get('vccToken')) {
        this.$config.signOutFn();
        return;
      }
      const trackInfo = TRACK_EVENT_MAP[area];
      if (trackInfo) {
        this.$track.registeredEvents(
          trackInfo.name,
          {
            navigation_name: this.tabName,
            position_number: index,
            [trackInfo.trackKey]: item[trackInfo.itemKey]
          },
          () => {
            this.mxHandleToDetails({ item, area, index });
          }
        );
      } else {
        this.mxHandleToDetails({ item, area, index });
      }
    },
    async loadData() {
      if (this.loading) {
        this.loading = false;
        if (this.loadingType === 'noMore') return;
        this.loadingType = 'loading';
        this.pageForm.pageNo++;
        const obj = {
          searchContent: [
            {
              text: this.rearCategoryIds,
              tagType: 2
            }
          ]
        };
        if (this.rearCategoryIds) {
          obj.searchContent[0].text = this.rearCategoryIds;
        } else if (this.labelIds) {
          obj.labelIds = this.labelIds;
        }
        const params = Object.assign(obj, this.pageForm);
        const [goodsData] = await apiCategoryGoodsList(params);
        this.loading = true;
        if (!goodsData || !goodsData.hasNext || !goodsData.goodsList) {
          this.loadingType = 'noMore';
        }
        if (goodsData && goodsData.goodsList) {
          this.goodsList = this.goodsList.concat(goodsData.goodsList || []);
        }
      }
    },
    // 曝光模块埋点
    exposureArea({ eventName, id, name }) {
      const params = {
        navigation_name: this.tabName,
        assembly_id: id,
        assembly_name: name
      };
      this.$track.registeredEvents(eventName, params);
    },
    onScroll(top) {
      this.scrollTop = top;
      this.$emit('changeTop', top);
    }
  }
};
</script>
<style lang="less" scoped src="../style/category.less"></style>
