<template>
  <div class="horizontal-slide" @scroll="onScroll" ref="itemsContainer">
    <ul class="list-warp">
      <li
        :class="items.length === 1 ? 'list-item one-item' : 'list-item'"
        v-for="(item, index) in items"
        :key="index"
        @click="goToDetail(item, index)">
        <div class="image-container">
          <ImageFormat
            class="image"
            :src="item.productImage" alt="加载失败"
            :width="136" :height="180"
            @error="imageformatError"/>
        </div>  
        <div class="info">
          <p class="title">{{item.productName}}</p>
          <div class="bottom">
            <span class='icon-ufo'></span>
            <span class="price">¥{{item.salesPrice}}</span>
            <span class="icon-goumai"></span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'horizontalSlide',
  props: {
    items: {
      type: Array,
      default() {
        return [];
      }
    },
    articleId: {
      type: Number,
      default: ''
    }
  },
  data() {
    return {
      reportItemSkn: null,
      timeoutId: null
    };
  },
  activated() {
    if (this._itemsWatcher) {
      this._itemsWatcher();
    }

    if (this.items.length > 0) {
      const {productSkn} = this.items[0];

      this.yasItemAvailable({productSkn});
    } else {
      this._itemsWatcher = this.$watch('$props.items', (newItems) => {
        if (newItems.length > 0) {
          const {productSkn} = newItems[0];

          this.yasItemAvailable({productSkn});
        }
      });
    }
  },
  deactivated() {
    if (this._itemsWatcher) {
      this._itemsWatcher();
    }
  },
  methods: {
    imageformatError() {
      console.log(6666);
    },
    goToDetail(item, index) {
      this.$store.dispatch('reportYas', {
        params: {
          appop: 'XY_STROLL_ARC_RLT_PRD_C',
          param: {
            P_NAME: 'XY_UFOArticleDetail',
            P_PARAM: this.articleId,
            I_INDEX: index + 1,
            PRD_ID: item.productSkn
          },
        },
      });

      this.$router.push({
        name: 'ProductDetail',
        params: {
          productId: item.productSkn,
          yasParams: {
            FP_NAME: 'XY_UFOArticleDetail',
            P_PARAM: this.articleId
          }
        }
      });
    },
    yasItemAvailable({productSkn, index = 0} = {}) {
      if (this.reportItemSkn === productSkn) {
        return;
      }
      this.reportItemSkn = productSkn;
      this.$store.dispatch('reportYas', {
        params: {
          appop: 'XY_SHOW_EVENT',
          param: {
            P_NAME: 'XY_UFOArticleDetail',
            P_PARAM: this.articleId,
            I_INDEX: index + 1,
            PRD_ID: productSkn
          },
        }
      });
    },
    onScroll({dirty = false} = {}) {
      if (this.timeoutId) {
        clearTimeout(this.timeoutId);
        this.timeoutId = null;
      }
      if (dirty) {
        this.reportItemSkn = null;
      }
      this.$refs.itemsContainer.querySelectorAll('.list-item').forEach(($el, index) => {
        const bounding = $el.getBoundingClientRect();

        if (bounding.left > -10 && bounding.left < 180) {
          const visibleItem = this.items[index];

          if (visibleItem) {
            const {productSkn} = visibleItem;

            this.timeoutId = setTimeout(()=> {
              this.yasItemAvailable({productSkn, index});
            }, 500);

          }
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.horizontal-slide {
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}

.horizontal-slide::-webkit-scrollbar {
  display: none;
  width: 0 !important;
}

.list-warp {
  overflow-x: scroll;
  width: max-content;
  font-size: 0;
  padding-left: 24px;
}

.list-item {
  display: inline-flex;
  width: 600px;
  height: 180px;
  margin-right: 24px;
  border-radius: 8px;
  border: 1px solid #F0F0F0;
  padding-left: 20px;

  .image-container {
    width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .image {
      width: 100%;
      border-radius: 8px 0 0 8px;
    }
  }

  .title {
    font-size: 24px;
    color: #999;
    line-height: 34px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0 8px 8px 0;
    width: 90%;
  }

  .price {
    margin-left: 16px;
    font-size: 28px;
    vertical-align: middle;
    flex: 1 1 auto;

    @include num;
  }

  .icon-goumai {
    float: right;
  }
}

.one-item {
  width: 700px;
}
</style>