<template>
  <div class="horizontal-slide">
    <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)">
        <ImageFormat
          class="image"
          :src="item.productImage" alt="加载失败"
          :width="136" :height="180"
          @error="imageformatError"/>
        <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 [];
      }
    }
  },
  methods: {
    imageformatError() {
      console.log(6666);
    },
    goToDetail(item) {
      this.$router.push({
        name: 'ProductDetail',
        params: {
          productId: item.productSkn,
        }
      });
    }
  },
  mounted() {
  }
};
</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;
}

.list-item {
  display: inline-flex;
  width: 600px;
  height: 180px;
  margin-right: 24px;
  border-radius: 8px;

  .image {
    min-width: 136px;
    min-height: 180px;
    max-width: 136px;
    max-height: 180px;
    border-radius: 8px 0 0 8px;
    filter: contrast(0.9);
  }

  .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: 1px solid #F0F0F0;
    border-radius: 0 8px 8px 0;
    width: 100%;
  }

  .price {
    margin-left: 16px;
    font-size: 28px;
    font-family: 'BrownStd-Regular';
    vertical-align: middle;
    flex: 1 1 auto;
  }

  .icon-goumai {
    float: right;
  }
}

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