<template>
  <div class="Hl-container-item" @click="jumpUrl(good.skuNo, good.skuName)">
    <cr-image
      class="Hlc-item-img"
      :src="good.imgUrl | Img2Thumb"
      lazy-load
      width="4.58rem"
      height="4.58rem"
      fit="cover"
    />
    <div class="Hlc-item-title">{{ good.skuName }}</div>
    <cr-image
      v-if="good.iconUrl"
      class="Hlc-item-tag"
      :src="good.iconUrl"
      lazy-load
      fit="contain"
      width="2.1rem"
      height="0.48rem"
    />
    <div v-else class="Hlc-item-placeholder" />
    <div class="Hlc-item-info">
      <span>¥</span>
      <span>{{ intPrice(good.salePrice) }}</span>
      <span>{{ floatPrice(good.salePrice) }}</span>
      <div class="Hlc-item-info-shopcart">
        <cr-image :src="shoppingCart" @click.stop="addShopCart(good)" />
      </div>
    </div>
  </div>
</template>
<script>
import { Img2Thumb } from '@/filters/img2Thumb.filter';
import { isApp, isWxMp } from '@/service/validation.service';
import wx from 'weixin-js-sdk';
import shoppingCart from '@/assets/images/goods/shopcart.png';
import { maxMember } from '@/api/member.api';
import { getTokenFromApp } from '@/service/yxmLogin.service';
export default {
  filters: {
    Img2Thumb
  },
  props: {
    pageName: {
      type: String,
      default: ''
    },
    categroyName: {
      type: String,
      default: ''
    },
    good: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      shoppingCart
    };
  },
  methods: {
    // 加购
    async addShopCart(goods) {
      // todo
      if (goods.status === 2) return;
      if (goods.status === 1) {
        this.$toast('来晚了已经卖完了~');
        return;
      }
      try {
        await getTokenFromApp();
        const { skuNo, skuSource } = goods;
        const params = [{ skuId: skuNo, skuNum: 1, skuSource, type: 1 }];
        const [res, err] = await maxMember.addShopCart({
          shopCartBaseList: params,
          selected: true
        });
        if (res) {
          this.$toast.success('添加成功');
        } else if (err.response.businessCode === '401') {
          await getTokenFromApp(true);
        }
        if (isApp) {
          this.editor?.updateShopCartCount();
          this.nativeBridge.run({
            event: 'shopCarAddGoodsNotification',
            data: {
              count: res.count
            }
          });
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 处理元
    intPrice(val) {
      return ('' + val).split('.')[0];
    },
    // 处理角分
    floatPrice(val) {
      return ('' + val).split('.')[1] ? `.${('' + val).split('.')[1]}` : '';
    },
    jumpUrl(skuNo, skuName) {
      this.$track.registeredEvents('H5_MaxMemberCommodityCardClick', {
        commodity_id: skuNo,
        commodity_name: skuName,
        page_name: this.pageName,
        top_navigation_name: this.categroyName
      });
      if (isApp) {
        window.location.href = `xyqb://homepage/goodsdetail?skuNo=${skuNo}`;
      } else if (isWxMp) {
        wx.miniProgram.navigateTo({
          url: `/pages/product/goodDetail?skuNo=${skuNo}`
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.Hl-container-item {
  margin-bottom: @padding-xs;
  width: 172px;
  background: @white;
  border-radius: @border-radius-md;
  &-img {
    height: 170px;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .Hlc-item-img {
    width: 100%;
    height: 172px;
    border-radius: @border-radius-md;
    overflow: hidden;
  }
  .Hlc-item-title {
    height: 38px;
    margin: @padding-xs @padding-sm - 2;
    .text-size(13);
    color: @black;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .Hlc-item-tag {
    margin-left: @padding-sm - 2;
  }
  .Hlc-item-placeholder {
    margin-left: @padding-sm - 2;
    width: 79px;
    height: 18px;
  }
  .Hlc-item-info {
    margin: @padding-xs @padding-sm - 2;
    display: flex;
    align-items: center;
    align-items: baseline;
    position: relative;
    span {
      &:nth-child(1) {
        .text-size(12);
        color: @black;
        font-weight: bold;
      }
      &:nth-child(2) {
        .text-size(18);
        line-height: 18px;
        color: @black;
        font-weight: bold;
      }
      &:nth-child(3) {
        .text-size(12);
        color: @black;
        font-weight: bold;
      }
    }
    &-shopcart {
      position: absolute;
      right: 0;
      top: -4px;
      height: 100%;
      .cr-image {
        width: 24px !important;
        height: 24px !important;
      }
      img {
        height: 100%;
        width: 100%;
      }
    }
  }
}
</style>
