<template>
  <div class="home-list">
    <div class="home-list-container">
      <div
        v-for="(item, index) in goodsList"
        :key="index"
        class="Hl-container-item"
        @click="goDetail(item.goods, index)"
      >
        <cr-image class="Hlc-item-img" :src="item.goods.goodsImage | Img2Thumb" lazy-load />
        <div class="Hlc-item-info">
          <div class="Hlc-item-info-title">
            <span class="Hlc-item-info-title-name">{{ item.goods.goodsName }}</span>
            <div
              v-if="item.goods.tagList && item.goods.tagList.length"
              class="Hlc-item-info-title-active"
            >
              <div v-for="(itm, idx) in item.goods.tagList" :key="idx">
                <span>{{ itm.name }}</span>
              </div>
            </div>
          </div>
          <div class="Hlc-item-info-count">
            <div class="Hlc-item-info-count-left">
              <span>¥{{ item.goods.goodsSalePrice }}</span>
              <!-- <span v-if="item.goods.goodsPrice">¥{{ item.goods.goodsPrice }}</span> -->
            </div>
            <div class="Hlc-item-info-count-right">
              <span>已售{{ item.goods.saleCount }}件</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Img2Thumb } from '@/filters/img2Thumb.filter';
export default {
  name: 'GoodsCard',
  filters: {
    Img2Thumb
  },
  props: {
    goodsList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  methods: {
    goDetail(item, index) {
      console.log(item);
      this.$track.registeredEvents(
        'H5_2B_CommodityListPageCommodityClick',
        {
          commodity_id: item.goodsId,
          position_number: index
        },
        () => {
          setTimeout(() => {
            const params = {
              count: 1,
              goodsName: item.goodsName,
              goodsimg: item.goodsImage
            };
            const query = {
              skuNo: item.goodsId
            };
            this.$router.push({ name: 'goodDetail', params, query });
          }, 300);
        }
      );
    }
  }
};
</script>
<style lang="less" scoped>
.home-list {
  background: @white;
  padding: 0 @padding-md - 2;
  // background: @gray-6;
  &-container {
    .Hl-container-item {
      display: flex;
      margin: @padding-lg 0;
      &:last-child {
        margin-bottom: 0;
      }
      .Hlc-item-img {
        width: 135px !important;
        height: 135px !important;
        border-radius: @border-radius-sm;
      }
      .Hlc-item-info {
        width: 225px;
        height: 130px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: @padding-sd;
        &-title {
          &-name {
            .text-size(13);
            line-height: 18px;
            color: @black;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          &-active {
            font-size: 0;
            padding-top: @padding-unit;
            overflow: hidden;
            height: 43px;
            div {
              display: inline-block;
              span {
                display: inline-block;
                border: 1px solid @border-red;
                font-size: 10px;
                color: @red;
                border-radius: 5px;
                padding: 2px 5px;
                margin: 2px 2px 2px 0;
              }
            }
          }
        }
        &-count {
          &-left {
            color: @red-light;
            margin: 1px;
            font-size: 0;
            span {
              &:nth-child(1) {
                margin-right: 5px;
                .text-size(16);
                line-height: 17px;
                .text-size(16);
                color: @red-light;
                font-weight: @font-weight-bold;
              }
              &:nth-child(2) {
                .text-size(11);
                line-height: 12px;
                color: @gray-4;
                text-align: right;
                text-decoration: line-through;
              }
            }
          }
          &-right {
            .text-size(11);
            line-height: 12px;
            color: @gray-4;
          }
        }
      }
    }
  }
}
</style>
