<template>
  <!-- 可用于切换布局方式 1行1  1行2 -->
  <div
    class="multi-layout-list"
    :class="{
      'multi-list': layoutType == 2
    }"
  >
    <div
      v-for="(item, index) in goodsList"
      :key="index"
      class="goods-item"
      :class="{
        multi: layoutType == 2
      }"
      @click="goDetail(item.goods, index)"
    >
      <cr-image class="goods-item-img" :src="item.goods.goodsImage | Img2Thumb" lazy-load />
      <div class="goods-item-info">
        <div class="goods-item-info-title">
          <span
            class="goods-item-info-title-name"
            :class="{
              'double-line': !item.goods.sellPoint || layoutType == 2,
              normal: item.goods.sellPoint && layoutType == 1
            }"
            >{{ item.goods.goodsName }}</span
          >
          <div v-if="item.goods && item.goods.sellPoint" class="sellpoint">
            {{ item.goods.sellPoint }}
          </div>
          <div
            v-if="item.goods.tagList && item.goods.tagList.length"
            class="goods-item-info-title-active"
          >
            <div v-for="(itm, idx) in item.goods.tagList" :key="idx">
              <span>{{ itm.name }}</span>
            </div>
          </div>
        </div>
        <!-- discountType  8-新人专享、9-max会员价、10-抢购活动  -->
        <div class="goods-item-info-count">
          <div class="goods-item-info-count-left">
            <div class="goods-item-info-count-left-top">
              <span class="goods-item-info-count-left-top-sale"
                >¥<a>{{ item.goods.goodsSalePrice }}</a></span
              >
              <div v-if="item.goods.discountShow" class="goods-item-info-count-left-top-activity">
                <span
                  :style="{
                    color: colorJudgment(item.goods.discountShow)
                  }"
                  >¥{{ item.goods.discountShow.discountPrice }}</span
                >
                <img :src="item.goods.discountShow.icon" />
              </div>
              <!-- <span v-if="item.goods.goodsPrice">¥{{ item.goods.goodsPrice }}</span> -->
            </div>
            <div class="goods-item-info-count-left-bottom">
              <span>已售{{ item.goods.saleCount }}件</span>
            </div>
          </div>
          <div v-if="item.goods" class="goods-item-info-count-right">
            <cr-image
              v-show="item.goods.shopcartIconType == 1"
              src="https://img.lkbang.net/shopcart.ec1a992c.png"
              width="24px"
              height="24px"
              @click.stop="addSkuToCart(item.goods)"
            />
            <cr-image
              v-show="item.goods.shopcartIconType == 2"
              src="https://img.lkbang.net/multi-sec.ec1a992c.png"
              width="24px"
              height="24px"
              @click.stop="showMultiSecPreview(item.goods.sameSpu)"
            />
          </div>
        </div>
      </div>
    </div>
    <cr-popup v-model="showMultiSec" class="secPopup" @close="closeMultiModal">
      <secSwiper v-if="showMultiSec" :sec-arr="secArr" />
      <cr-icon type="close" size="34px" color="#FFF" @click="closeMultiModal" />
    </cr-popup>
  </div>
</template>
<script>
import { Img2Thumb } from '@/filters/img2Thumb.filter';
import secSwiper from '@/components/secSwiper.vue';
import { colorJudgment } from '../constants/max';
export default {
  name: 'GoodsCard',
  components: {
    secSwiper
  },
  filters: {
    Img2Thumb
  },
  props: {
    goodsList: {
      type: Array,
      default: () => []
    },
    layoutType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      showMultiSec: false,
      secArr: [],
      colorJudgment
    };
  },
  methods: {
    closeMultiModal() {
      this.showMultiSec = false;
      this.secArr = [];
    },
    showMultiSecPreview(sameSpu) {
      console.log(sameSpu);
      this.secArr = sameSpu;
      this.showMultiSec = true;
    },
    goDetail(item, index) {
      console.log(item);
      this.$track.registeredEvents(
        'H5_2B_CommodityListPageCommodityClick',
        {
          commodity_id: item.goodsId,
          position_number: index
        },
        () => {
          setTimeout(() => {
            const query = {
              skuNo: item.goodsId
            };
            this.$router.push({ name: 'goodDetail', query });
          }, 300);
        }
      );
    },
    async addSkuToCart(goods) {
      const { goodsId: skuId, goodsType: skuSource, goodsName } = goods;
      this.$track.registeredEvents(
        'H5_SearchingSecPageAddShoppingCartBtnClick',
        {
          commodity_id: skuId,
          commodity_name: goodsName
        },
        async () => {
          const [res, error] = await this.$store.dispatch('shopCart/good_add', {
            type: 'ADD_CART',
            goodInfo: { selected: true, skuId, skuSource, skuNum: 1 }
          });
          if (!error) {
            this.$emit('addProduct', goods.goodsSalePrice);
            this.$toast('购物车添加成功');
            this.$store.dispatch('shopCart/saveCartCount', res?.count);
          }
        }
      );
    }
  }
};
</script>
<style lang="less" scoped>
.multi-layout-list {
  background: @white;
  padding: 6px @padding-sm;
  box-sizing: border-box;
  &.multi-list {
    background: #f7f8fa;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
  .goods-item {
    background: @white;
    min-height: 116px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    &.multi {
      width: 172px;
      height: auto;
      flex-shrink: 0;
      flex-direction: column;
      border-radius: @padding-x;
      .goods-item-img {
        flex-shrink: 0;
        width: 172px !important;
        height: 172px !important;
        margin-bottom: @padding-unit;
        margin-right: 0;
        text-align: center;
        border-radius: @padding-x;
        overflow: hidden;
        /deep/ img {
          margin: 0 auto;
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
        }
      }
      .goods-item-info {
        width: 100%;
        &-count {
          margin-top: @padding-sm;
        }
      }
    }
    &-img {
      flex-shrink: 0;
      width: 116px !important;
      height: 100% !important;
      // margin-right: @padding-x;
      border-radius: 7px;
      overflow: hidden;
      /deep/ img {
        margin: 0 auto;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
      }
    }
    &-info {
      height: 100%;
      padding: 0 5px 5px;
      box-sizing: border-box;
      width: calc(100% - 110px);
      flex: 1;
      .text-size(13);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      &-title {
        width: 100%;
        &-name {
          display: block;
          color: @black;
          font-size: 13px;
          word-break: break-all;
          &.double-line {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            word-break: break-all;
          }
          &.normal {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        &-active {
          font-size: 0;
          padding-top: @padding-unit;
          overflow: hidden;
          div {
            display: inline-block;
            span {
              height: 12px;
              display: flex;
              align-items: center;
              border: 1px solid @border-red;
              font-size: 8px;
              color: @red;
              border-radius: 3px;
              padding: 1px 3px;
              margin: 0 3px 0 0;
            }
          }
        }
        .sellpoint {
          color: #999;
          font-size: 12px;
        }
      }
      &-count {
        display: flex;
        align-items: center;
        &-left {
          flex: 1;
          &-top {
            display: flex;
            align-items: flex-end;
            &-sale {
              font-weight: bold;
              color: @red;
              font-size: 12px;
              a {
                color: @red;
                font-size: 18px;
              }
            }
            &-activity {
              padding-left: 3px;
              span {
                font-size: 14px;
                padding-right: 3px;
              }
              img {
                width: auto;
                height: 10px;
              }
            }
          }
          &-bottom {
            color: @gray-4;
            .text-size(12);
          }
        }
        &-right {
          width: 24px;
          flex-shrink: 0;
          margin-right: @padding-unit;
        }
      }
    }
  }
}
.secPopup {
  width: 100%;
  background: transparent;
  overflow: hidden;
}
.cr-icon {
  display: block;
  margin: 20px auto 0;
}
</style>
