<template>
  <!-- 专题 -->
  <!-- 商品专题（横板） -->
  <div class="special-row">
    <div class="special-wrapper">
      <img
        :src="sourceData.commodityTopics.bakImgUrl"
        alt=""
        @click="
          () => {
            handleToDetailsTrack(sourceData.commodityTopics, 'HomePagePorcelainAreaClick', 0, {
              assembly_id: sourceData.componentId,
              assembly_name: sourceData.componentName
            });
          }
        "
      />
      <div class="special-row-con">
        <div class="content">
          <div
            :ref="`specialRow${index}`"
            class="content-wrapper"
            @scroll="scrollEvent(index)"
            @touchstart="onTouch"
            @touchmove="onTouch"
            @touchend="onTouch"
          >
            <div
              v-for="(itm, idx) in sourceData.commodityTopics.skuInfoList"
              :key="idx"
              class="content-item"
              @click="
                handleToDetailsTrack(itm, 'NewUserPageCommoditySpecialClick', idx, {
                  assembly_id: itm.id,
                  assembly_name: itm.componentName,
                  commodity_id: itm.skuNo
                })
              "
            >
              <img class="special-row-img" :src="itm.imageUrl" alt="" />
              <div class="special-row-money">
                <span>￥</span>
                <span> {{ itm.skuPrice }}</span>
              </div>
              <div class="special-row-icon">
                <img :src="itm.tagImgUrl" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div v-if="sourceData.commodityTopics.skuInfoList.length > 4" class="progress">
          <cr-progress
            :percentage="calcWidth"
            :show-pivot="false"
            color="linear-gradient(to right, rgba(255, 75, 0, 1), rgba(255, 119, 5, 1))"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mxBll from '../../home/mixin/mxBll';
import { TRACK_EVENT_MAP } from '../model';
import localStorage from '@/service/localStorage.service';

export default {
  mixins: [mxBll],
  props: {
    sourceData: {
      type: Object,
      default: () => {}
    }
  },

  data() {
    return {
      index: 0,
      calcWidth: 0,
      scrollIndex: 0
    };
  },
  mounted() {
    this.$refs[`specialRow${this.index}`].addEventListener('scroll', (e, index) => {
      this.handleScroll(e, index);
    });
    this.initCalcWidth();
    this.$track.registeredEvents(TRACK_EVENT_MAP.NewUserPageCommoditySpecial, {
      assembly_id: this.sourceData && this.sourceData.componentId,
      assembly_name: this.sourceData && this.sourceData.componentName
    });
  },
  methods: {
    handleToDetailsTrack(item, area, index, buriedPoint = {}) {
      if (item.needLogin && !localStorage.get('vccToken')) {
        this.$config.signOutFn();
        return;
      }
      const trackInfo = TRACK_EVENT_MAP[area];
      if (trackInfo) {
        this.$track.registeredEvents(
          trackInfo.name,
          {
            position_number: index,
            ...buriedPoint,
            [trackInfo.trackKey]: item[trackInfo.itemKey]
          },
          () => {
            this.mxHandleToDetails({ item, area, index });
          }
        );
      } else {
        this.mxHandleToDetails({ item, area, index });
      }
    },
    initCalcWidth() {
      let scrollWidth = this.$refs[`specialRow${this.index}`].scrollWidth;
      let offsetWidth = this.$refs[`specialRow${this.index}`].offsetWidth;
      this.calcWidth = (offsetWidth / scrollWidth) * 100;
    },
    scrollEvent(index) {
      this.scrollIndex = index;
    },
    // 阻止滚动触发滑动到频道页
    onTouch(e) {
      e.stopPropagation();
    },
    // 专题横线平移滑动
    handleScroll() {
      let index = this.scrollIndex;
      let scrollLeft = this.$refs[`specialRow${index}`].scrollLeft;
      let scrollWidth = this.$refs[`specialRow${index}`].scrollWidth;
      let offsetWidth = this.$refs[`specialRow${index}`].offsetWidth;
      let calcWidth = ((scrollLeft + offsetWidth) / scrollWidth) * 100;
      if (calcWidth >= 100) {
        calcWidth = 100;
      }
      if (calcWidth <= 0) {
        calcWidth = 0;
      }
      this.calcWidth = calcWidth;
      return;
    }
  }
};
</script>

<style lang="less" scoped>
.special-row {
  display: flex;
  flex-direction: column;
  margin: @padding-sm;
  img {
    width: 100%;
    display: block;
  }
  &-con {
    background: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
    padding: 0 @padding-sm;
    padding-top: 8px;
    .content {
      max-height: 110px;
      &-wrapper {
        overflow-x: scroll;
        overflow-y: hidden;
        display: flex;
        flex-flow: row nowrap;
        // height: 110px;
        &::-webkit-scrollbar {
          width: 0 !important;
          display: none;
        }
      }
      &-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 25%;
        flex-shrink: 0;
        .special-row-img {
          width: 76px;
          height: 76px;
          border-radius: 8px;
        }
        .special-row-money {
          margin: 5px auto 0 auto;
          display: flex;
          align-items: flex-start;

          span {
            &:nth-child(1) {
              .text-size(10);
              color: @red-light;
              font-weight: bold;
            }
            &:nth-child(2) {
              .text-size(14);
              line-height: 16px;
              color: @red-light;
              font-weight: bold;
              margin-right: 6px;
            }
          }
        }
        .special-row-icon {
          width: 48px;
          height: 15px;
          max-height: 15px;
          margin-top: 2px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .progress {
      margin: 0 auto;
      width: 36px;
      padding: 10px 0;
    }
  }
}
</style>
