<template>
  <div class="home-list">
    <div class="home-list-container">
      <div v-for="(item, index) in goodsList" :key="item.goodsId" class="Hl-container-item">
        <cr-image
          class="Hlc-item-img"
          :src="item.goods.goodsImage | Img2Thumb"
          lazy-load
          @click="goDetail(item.goods, index)"
        />
        <div class="Hlc-item-info">
          <div class="Hlc-item-info-title" @click="goDetail(item.goods, index)">
            <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-info">
              <div class="Hlc-item-info-count-left">
                <div class="Hlc-item-info-count-left-price">
                  <span>¥{{ item.goods.goodsSalePrice }}</span>
                  <span v-if="item.goods.goodsPrice">¥{{ item.goods.goodsPrice }}</span>
                </div>
                <div v-if="item.goods.discountShow" class="Hlc-item-info-count-left-activity">
                  <span
                    :style="{
                      color: colorJudgment(item.goods.discountShow)
                    }"
                    >¥{{ item.goods.discountShow.discountPrice }}</span
                  >
                  <img :src="item.goods.discountShow.icon" />
                </div>
              </div>

              <div class="Hlc-item-info-count-right">
                <span>已售{{ item.goods.saleCount }}件</span>
              </div>
            </div>
            <div class="Hlc-item-info-count-icon">
              <span class="iconfont icon-cart" @click="addProduct(item)" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { goodAdd } from '@/api/shopCart.api';
import { colorJudgment } from '@/constants/max';
export default {
  name: 'FullMinusoodsList',
  props: {
    goodsList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      colorJudgment
    };
  },
  methods: {
    goDetail(goods) {
      const query = {
        skuNo: goods.goodsId
      };
      this.$router.push({ name: 'goodDetail', query });
    },

    async addProduct(good) {
      const shopCartBaseList = [
        {
          skuId: good.goods.goodsId,
          skuNum: 1,
          skuSource: good.goods.goodsType,
          type: 1
        }
      ];
      await goodAdd({ shopCartBaseList, selected: true });
      this.$emit('addProduct', good.goods.goodsSalePrice);
      this.$toast(`购物车添加成功`);
    }
  }
};
</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 {
          display: flex;
          justify-content: space-between;
          &-left {
            color: @red-light;
            margin: 1px;
            font-size: 0;
            display: flex;
            align-items: center;
            &-price {
              margin-right: 2px;
              span {
                &:nth-child(1) {
                  .text-size(10);
                  color: @red-light;
                  font-weight: bold;
                }
                &:nth-child(2) {
                  margin-right: @padding-unit / 2;
                  .text-size(14);
                  line-height: 16px;
                  color: @red-light;
                  font-weight: bold;
                }
                &:nth-child(3) {
                  .text-size(10);
                  color: @gray-4;
                  text-align: right;
                }
              }
            }
            &-activity {
              display: flex;
              align-items: flex-end;
              margin-top: 3px;
              span {
                font-size: 12px;
                color: #ed7d08;
              }
              img {
                width: auto;
                height: 12px;
              }
            }
          }
          &-right {
            .text-size(11);
            line-height: 12px;
            color: @gray-4;
          }
        }
      }
    }
  }
}
</style>
