<template>
  <view class="home-list">
    <!-- <view class="home-list-container"> -->
    <view
      v-for="(item, index) in goodList"
      :key="index"
      class="Hl-container-item"
      @click="toDetail(item, index)"
    >
      <view class="Hl-container-item-img">
        <image lazy-load class="Hlc-item-img" mode="aspectFit" :src="item.goods.goodsImage" />
      </view>
      <view class="Hlc-item-title">
        <text>{{ item.goods.goodsName }}</text>
      </view>
      <!-- 猜你喜欢商品标签 -->
      <view class="Hlc-item-tag">
        <view v-for="(tag, i) in item.goods.tagList" :key="i" class="Hlc-item-tag-wrap">
          <span v-if="tag.type == 2" :key="i" class="Hlc-item-tag-normal">{{ tag.name }}</span>
          <img
            v-if="tag.type == 1"
            mode="heightFix"
            class="Hlc-item-tag-icon"
            :src="tag.icon"
            alt=""
          />
        </view>
        <img
          v-if="item.userBenefitsLabelImgUrl"
          :src="item.userBenefitsLabelImgUrl"
          class="memberImg"
        />
      </view>
      <!-- 猜你喜欢商品标签 -->
      <view class="Hlc-item-info">
        <view class="Hlcu-info-left">
          <text>¥</text>
          <text>{{ item.goods.goodsSalePrice }}</text>
          <text v-if="item.goods.saleCount">已售{{ item.goods.saleCount }}件</text>
        </view>
        <view v-if="!noShare" class="Hlcu-info-right" @click.stop="goodsMaskIdx = index">
          <view class="Hlcui-right-dot" />
          <view class="Hlcui-right-dot" />
          <view class="Hlcui-right-dot" />
        </view>
      </view>
      <view
        v-if="goodsMaskIdx === index && !noShare"
        class="Hlc-item-mask"
        @click.stop="goodsMaskIdx = -1"
      >
        <button
          class="Hlci-mask-button"
          open-type="share"
          :data-shareinfo="item"
          :data-goods="item"
          @click.stop="toShare(item, index)"
        >
          <image src="https://img.lkbang.net/xcx/goods_share@2x.png" />
          <text>分享好友</text>
        </button>
        <button v-if="isDelete" class="Hlci-mask-button" @click="delGoods(item, index)">
          <image src="https://img.lkbang.net/xcx/no@2x.png" />
          <text>不感兴趣</text>
        </button>
      </view>
    </view>
    <!-- </view> -->
  </view>
</template>
<script>
import { debounce } from "@/utils";
import { saTrackEvent } from "@/utils/sa.js";
export default {
  name: "GoodsCard",
  props: {
    list: {
      type: Array,
      default: () => []
    },
    isDelete: {
      type: Boolean,
      default: true
    },
    noShare: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      goodsMaskIdx: -1,
      goodList: []
    };
  },
  watch: {
    list: {
      deep: true,
      immediate: true,
      handler(v) {
        this.goodList = v;
      }
    }
  },
  methods: {
    toShare(item, index) {
      const currentPage = getCurrentPages();
      saTrackEvent("PD_YXMMAEC_UserClickSelectionPageViewMoreBtn", {
        page_id: currentPage[currentPage.length - 1].route,
        commodity_id: item.goods.goodsId,
        view_more_selection: "分享好友",
        position_number: index
      });
      uni.reportAnalytics("c_selectionpageviewmorebtn", {
        page_id: currentPage[currentPage.length - 1].route,
        commodity_id: item.goods.goodsId,
        view_more_selection: "分享好友",
        position_number: index
      });
    },
    delGoods(item, index) {
      const currentPage = getCurrentPages();
      saTrackEvent("PD_YXMMAEC_UserClickSelectionPageViewMoreBtn", {
        page_id: currentPage[currentPage.length - 1].route,
        commodity_id: item.goods.goodsId,
        view_more_selection: "不感兴趣",
        position_number: index
      });
      uni.reportAnalytics("c_selectionpageviewmorebtn", {
        page_id: currentPage[currentPage.length - 1].route,
        commodity_id: item.goods.goodsId,
        view_more_selection: "不感兴趣",
        position_number: index
      });
      this.goodList.splice(index, 1);
      // this.$emit("update:goodsList", this.goodsList);
      this.$api.msg("已减少此类信息推荐");
    },
    toDetail(good, index) {
      const currentPage = getCurrentPages();
      uni.reportAnalytics("c_selectionpagecommoditycard", {
        page_id: currentPage[currentPage.length - 1].route,
        commodity_id: good.goods.goodsId,
        position_number: index,
        uuid: uni.getStorageSync("userAuthInfo").uuid || "",
        channel_id: uni.getStorageSync("vccChannel") || ""
      });

      saTrackEvent("PD_YXMMAEC_UserClickSelectionPageCommodityCard", {
        page_id: currentPage[currentPage.length - 1].route,
        commodity_id: good.goods.goodsId,
        position_number: index
      });
      debounce(
        uni.navigateTo({
          url: `/pages/product/goodDetail?skuNo=${
            good.goods.goodsId
          }&count=1&receiverId=&goodsName=${encodeURIComponent(good.goods.goodsName)}&goodsImage=${
            good.goods.goodsImage
          }`
          // url: `/pages/product/goodDetail?skuNo=144652147824&count=1&receiverId=&goodsName=${good.goods.goodsName}`
        }),
        300
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.home-list {
  // &-container {
  //   padding-top: 20rpx;
  //   display: flex;
  //   justify-content: space-between;
  //   flex-wrap: wrap;
  .Hl-container-item {
    position: relative;
    margin-bottom: 25rpx;
    width: 339rpx;
    background: #fff;
    border-radius: 12rpx;
    &-img {
      height: 340rpx;
      display: flex;
      align-items: center;
    }
    .Hlc-item-img {
      width: 100%;
      height: 346rpx;
      border-radius: 12rpx;
    }
    .Hlc-item-title {
      height: 76rpx;
      margin: 10rpx 20rpx 0rpx 14rpx;
      text {
        font-size: 26rpx;
        line-height: 36rpx;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    .Hlc-item-tag {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      margin: -12rpx 0rpx 0rpx 14rpx;

      &-normal {
        display: inline-block;
        font-size: 10px;
        box-sizing: border-box;
        border: 1rpx solid #ff5a4b;
        color: #ff5a4b;
        padding: 0px 4px;
        border-radius: 3px;
        margin-right: 5px;
        line-height: 14px;
      }
      &-icon {
        height: 28rpx;
        margin-right: 5px;
        vertical-align: middle;
      }
    }

    .Hlc-item-info {
      margin: 16rpx 20rpx 14rpx;
      padding-bottom: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .Hlcu-info-left {
        display: flex;
        align-items: flex-end;
        text {
          &:nth-child(1) {
            font-size: 20rpx;
            color: #ec3333;
            font-weight: bold;
          }
          &:nth-child(2) {
            margin-right: 4rpx;
            font-size: 30rpx;
            line-height: 34rpx;
            color: #ec3333;
            font-weight: bold;
          }
          &:nth-child(3) {
            font-size: 19rpx;
            line-height: 26rpx;
            color: #999999;
            text-align: right;
          }
        }
      }
      .Hlcu-info-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 6rpx;
        // width: 66rpx;
        width: 40rpx;
        height: 40rpx;
        .Hlcui-right-dot {
          width: 6rpx;
          height: 6rpx;
          background: #d8d8d8;
          border-radius: 50%;
        }
        // font-size: 35rpx;
        // line-height: 26rpx;
        // letter-spacing: -6rpx;
        // color: #D8D8D8;
      }
    }
    .Hlc-item-mask {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 12rpx;
      .Hlci-mask-button {
        padding: 0 60rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 266rpx;
        height: 60rpx;
        border-radius: 31rpx;
        font-size: 24rpx;
        color: #333333;
        &:first-child {
          margin-bottom: 40rpx;
        }
        image {
          width: 36rpx;
          height: 36rpx;
        }
      }
    }
  }
  // }
}
.memberImg {
  width: 132.68rpx;
  height: 28rpx;
}
</style>
