<template>
    <LayoutApp :show-back="true" :hideHeader="hideHeader">
        <div class="root-content">
            <div class="left-content">
                <Scroll>
                    <div class="category-left-item-root"
                      v-for="(item, index) in categoryParent"
                      :key="index"
                      :class="{'category-left-item-select-flag' : item.isSelect }"
                      :data-id="item.id"
                      @click="onClick(item, index)">
                      <p
                        class="category-left-item-title"
                        :class="{'category-left-item-select' : item.isSelect }">
                        {{item.name}}
                      </p>
                    </div>
                </Scroll>
            </div>
            <div class="right-content">
                <layoutScroll ref="subScroll"
                    @scroll-end="onScrollEndHandler"
                    >
                    <div v-for="(itemSub, index) in categorySubList" :key="index">
                      <CategoryTitle>{{itemSub.name}}</CategoryTitle>
                        <div class="category-sub-root" :class="'sub-type-' + itemSub.type">
                            <div class="item-div"
                                 v-for="(item, index) in itemSub.sub"
                                 :key="index"
                                 :data-id="item.id"
                                 ref="index">
                              <LayoutLink :href="item.url" >
                                  <div class="item-imge-div" @click="goProductList(item,index, itemSub)">
                                      <ImgSize
                                        class="item-imge"
                                        :src="item.image"
                                        :width="144"
                                        :height="144"
                                      />
                                  </div>
                                  <p class="item-title">{{item.name}}</p>
                                </LayoutLink>
                            </div>
                        </div>
                    </div>
                </layoutScroll>
            </div>

        </div>
    </LayoutApp>
</template>
<script>
import { Scroll } from 'cube-ui';
import { createNamespacedHelpers } from 'vuex';
import Vue from 'vue';

import CategoryTitle from './components/category-title';
import ImgSize from '../../components/img-size';

const { mapState, mapActions } = createNamespacedHelpers('category');
export default {
  name: 'category',
  props: ['hideHeader'],
  components: {
    Scroll,
    ImgSize,
    CategoryTitle
  },
  data() {
    return {
      scrollEvents: ['scroll-end'],
      sortItem:{
        id:'-1',
        name:'品牌',
        index: 0
      }
    };
  },
  mounted() {
    this.fetchCategoryParentList();
    this.fetchBrandList({});
  },
  activated(){
    this.reportYas(0);
  },
  methods: {
    ...mapActions(['fetchCategoryParentList', 'selectCategoryParent', 'fetchBrandList', 'fetchCategorySubList']),
    onScrollEndHandler({y}) {
      let scrollHeight = Math.abs(y)
      this.reportYas(scrollHeight);
    },
    reportYas(scrollY) {
      let scrollHeight = this.$refs.subScroll.$el.offsetHeight; // 滚动区高度
      let reportParams = [];
      this.categorySubList.forEach((item) => {
        let subItemList = item.sub;
        subItemList.forEach((val, index) => {
          let eleTop = this.$refs.index[index].offsetTop;
          let eleHeight = this.$refs.index[index].offsetHeight;
          // console.log(eleHeight+'item'+scrollY)
          let firstHeight = 0;
          if(scrollY > eleHeight){
            firstHeight = scrollY - eleHeight;
          }
          let lastViewHeight = scrollHeight + scrollY;
          // console.log("firstHeight:"+firstHeight+'==scrollHeight='+scrollHeight+"==eleTop=="+eleTop+"==lastViewHeight="+lastViewHeight);
          if(firstHeight < eleTop && scrollHeight + scrollY > eleTop){
            let reportItem = {
              P_NAME: 'XY_UFOCategory',
              CATE_ID: this.sortItem.id,
              CATE_NM: this.sortItem.name,
              CATE_INDEX: this.sortItem.index + 1,
              F_ID: item.id,
              F_NAME: item.name,
              F_INDEX: item.index + 1,
              I_INDEX: index + 1,
              TO_TYPE: val.linkType,
              TO_ID: val.link,
            };
            // console.log(reportItem)
            reportParams.push(reportItem)
          }
        });
      });

      this.$store.dispatch('reportYas', {
          params: {
            appop: 'XY_UFO_SHOW_EVENT',
            param: reportParams
          }
        });

    },
    async onClick(item,index) {
      if (!item.isSelect) {
        this.sortItem = item;
        let id = item.id;
        let name = item.name;
        let subList ;
        if (id === '-1') {
          subList = await this.fetchBrandList({ id });
        } else {
          subList = await this.fetchCategorySubList({ id, name });
        }

        this.$store.dispatch('reportYas', {
          params: {
            appop: 'XY_UFO_CATEGORY_TAB_LIST',
            param: {
              CATE_ID: id,
              CATE_NM: item.name,
              CATE_INDEX: index + 1
            }
          }
        });
        this.reportYas(0);
      }
    },
    goProductList(item, index, itemSub) {
      this.$store.dispatch('reportYas', {
        params: {
          appop: 'XY_UFO_SORT_FLR_C',
          param: {
            CATE_ID: this.sortItem.id,
            CATE_NM: this.sortItem.name,
            CATE_INDEX: this.sortItem.index + 1,
            F_ID: itemSub.id,
            F_NAME: itemSub.name,
            F_INDEX: itemSub.index + 1,
            I_INDEX: index + 1,
            TO_TYPE: item.linkType,
            TO_ID: item.link,
          }
        }
      });
    },
  },
  computed: {
    ...mapState(['categoryParent', 'categorySubList']),
  },
};
</script>

<style scoped>
    .root-content {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: row;
      background-color: #FFFFFF;
    }

    .left-content {
      width: 28%;
      height: 100%;
      border-right: 1px solid #EEEEEE;
      flex-shrink: 0;
    }

    .right-content {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      height: 100%;
      margin: 0 20px;
    }

    .category-left-item-root {
      display: flex;
      flex-direction: row;
      width: 100%;
      align-items: center;
      height: 104px;
      line-height: 104px;
      position: relative;
    }

    .category-left-item-title {
      color: #999999;
      font-size: 30px;
      width: 100%;
      text-align: center;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .category-left-item-select {
      font-size: 44px;
      color: #000000;
      font-weight: bold;
    }

    .category-left-item-select-flag:before {
      content: "";
      width: 4px;
      height: 48px;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -24px;
      background-color: #000000;
    }

    .category-sub-root {
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
      padding-bottom: 20px;
    }

    .sub-title {
      font-size: 24px;
      color: #000;
      text-align: center;
    }

    .item-div {
      position: relative;
      flex: 0 0 33%;
      padding: 20px 0;
    }

    .item-imge-div {
      width: 100%;
      height: 130px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .sub-type-brand {
      padding-top: 40px;

      .item-div {
        padding: 15px;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
        box-sizing: border-box;
      }

      .item-div:nth-child(3n) {
        border-right: 0;
      }

      .item-imge-div {
        height: 110px;
        overflow: hidden;
      }

      .item-title {
        display: none;
        font-family: SFProText-Regular;
      }

      &:after {
        content: "";
        width: 100%;
        height: 2PX;
        background-color: #fff;
        position: relative;
        top: -1PX;
      }

    }

    .item-imge {
      object-fit: contain;
      max-width: 100%;
      max-height: 100%;
    }

    .item-title {
      font-family: 'SFProText-Regular';
      font-size: 22px;
      color: #000000;
      text-align: center;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .item-a-div {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 99;
    }
</style>