<template>
  <view class="home">
    <view class="home-header">
      <image
        v-if="brandInfo.brandImageUrl"
        :src="brandInfo.brandImageUrl | Img2Thumb"
        class="brand-img"
        @click="homePageLogoClick(brandInfo)"
      />
      <view class="home-header-search" @click="handleToSearch">
        <view class="home-header-search-wrapper">
          <i class="iconfont icon-search" />
          <span>搜索商品</span>
        </view>
        <view class="item-center">
          <span class="item-center-btn">搜索</span>
        </view>
      </view>
    </view>
    <view v-if="tabList.length" class="home-tab">
      <cr-tabs v-model="pageTabIndex" :swipe-threshold="3">
        <cr-tab v-for="(tab, i) in tabList" :key="i" :title="tab.name" />
      </cr-tabs>
    </view>
    <cr-swipe
      :show-indicators="false"
      class="home-swipe"
      :initial-swipe="pageTabIndex"
      @change="onPageSwitch"
    >
      <cr-swipe-item>
        <MainInfo
          :active="pageTabIndex"
          :top="activeTop"
          @changeTop="scrollTop = $event"
          @onLoadSkeleton="onLoadSkeleton"
        />
      </cr-swipe-item>
      <cr-swipe-item v-for="(tab, i) in categoryList" :key="tab.id">
        <CategoryInfo
          :id="tab.id"
          :before-active="beforeTabIndex"
          :active="pageTabIndex"
          :tab-name="tab.name"
          :rear-category-ids="tab.rearCategoryIds"
          :label-ids="tab.labelIds"
          :index="i + 1"
          :top="activeTop"
          @changeTop="scrollTop = $event"
        />
      </cr-swipe-item>
    </cr-swipe>
    <LoginPopup />

    <loginGuide v-if="!hasLogin" />
    <transition name="fade">
      <Skeleton v-if="skeletonStatus" />
    </transition>
  </view>
</template>
<script>
import { getTopTab } from '@/api/home.api.js';
import LoginPopup from '@/components/loginPopup.vue';
import MainInfo from './components/Main.vue';
import CategoryInfo from './components/Category.vue';
import loginGuide from '@/components/loginGuide.vue';
import historyRecordMixins from '@/mixins/historyRecord.mixins';
import mxBll from './mixin/mxBll';
import { Img2Thumb } from '@/filters/img2Thumb.filter';
import Skeleton from './components/Skeleton.vue';
import { mapGetters as homeMapGetters } from 'vuex';

export default {
  name: 'Home',
  components: {
    LoginPopup,
    MainInfo,
    CategoryInfo,
    loginGuide,
    Skeleton
  },
  filters: {
    Img2Thumb
  },
  mixins: [historyRecordMixins, mxBll],
  data() {
    return {
      brandInfo: {}, // 品牌形象信息
      pageTabIndex: 0,
      beforeTabIndex: 0,
      tabList: [],
      scrollTop: 0,
      activeTop: 0,
      timer: null,
      skeletonStatus: true
    };
  },
  computed: {
    ...homeMapGetters(['hasLogin']),
    specialCol() {
      return this.$refs.specialCol;
    },
    // 专题纵向宽度固定宽度
    scrollColWidth() {
      return this.specialCol[0].offsetWidth;
    },
    categoryList() {
      return this.tabList.slice(1);
    }
  },
  watch: {
    pageTabIndex() {
      this.tabExposureClick();
      this.onPageSwitch(this.pageTabIndex);
    }
  },
  activated() {
    const currnetScrollTop = this.scrollTop;
    console.log('currnetScrollTop :>> ', currnetScrollTop);
    this.activeTop = 0;
    this.$nextTick(() => {
      this.activeTop = currnetScrollTop;
    });
    const timer = setTimeout(() => {
      clearTimeout(timer);
      this.onLoadSkeleton(false);
    }, 2000);
  },
  mounted() {
    this.getTopTabData();
    this.$track.registeredEvents('H5_2BSelectionPageExposure');
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    onLoadSkeleton(e) {
      this.skeletonStatus = e;
    },
    homePageLogoClick(item) {
      this.$track.registeredEvents('H5_HomePageLogoClick');
      this.mxHandleToDetails({ item, urlKey: 'brandImageActivityUrl' });
    },
    // 获取顶部信息
    async getTopTabData() {
      const [data] = await getTopTab();
      if (data) {
        this.brandInfo = data || {};
        this.tabList = data.topTabList || [];
        this.tabExposureClick();
      }
    },
    handleToSearch() {
      this.$store.commit('DEL_KEEP_ALIVE', 'search');
      this.$track.registeredEvents('H5_UserClickSearchTrigger', { page_name: 'home' });
      setTimeout(() => {
        this.$router.push({ name: 'search' });
      }, 200);
    },
    // 导航点击埋点
    tabExposureClick() {
      const params = {
        navigation_name: this.tabList[this.pageTabIndex]?.name,
        position_number: this.pageTabIndex
      };
      this.$track.registeredEvents('H5_HomePageTopTapClick', params);
    },
    // 页面滑动
    onPageSwitch(index) {
      this.beforeTabIndex = index;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.pageTabIndex = index;
        clearTimeout(this.timer);
      }, 300);
    }
  }
};
</script>
<style lang="less" src="./style/index.less" scoped></style>
