<template>
  <cr-swipe-cell ref="swipe" @touchstart.native="openSwipe">
    <div class="shop" @click.stop="goToDetailPageClick(product)">
      <div class="shop-image">
        <cr-image lazy-load fit="cover" :src="product.goodsImage | Img2Thumb" />
        <div v-if="+product.goodsStatus === 51" class="shop-sold">
          <div class="shop-sold-wrapper">
            <div class="shop-sold-top">已售罄</div>
            <div class="shop-sold-bottom">SOLD OUT</div>
          </div>
        </div>
      </div>
      <div class="shop-info">
        <div class="shop-info-title">{{ product.goodsName }}</div>
        <div class="shop-info-price">{{ product.goodsSalePrice }}</div>
        <div class="shop-info-button">
          <cr-button
            type="default"
            hairline
            shape="circle"
            size="small"
            @click.stop="goSimilar(product)"
            >看相似</cr-button
          >
          <cr-button
            v-if="+product.goodsStatus === 51"
            type="default"
            hairline
            shape="circle"
            size="small"
            @click.stop="subscribeAdd"
            >到货通知</cr-button
          >
        </div>
        <div
          v-if="+product.goodsStatus !== 51"
          class="shop-info-shopcar"
          @click.stop="addSkuToCart(product)"
        />
      </div>
    </div>
    <template #right>
      <div class="shop-delete" @click="onDelete">
        <div class="shop-delete-info">
          <div class="shop-delete-info__text">删除</div>
        </div>
      </div>
    </template>
  </cr-swipe-cell>
</template>
<script>
const DELETE_PRODUCT = 'delete';
const OPEN_PRODUCT = 'open';
import productMixin from '../mixins/product.mixin';
import { subscribeAdd } from '@/api/browse.api';
export default {
  mixins: [productMixin],
  props: {
    product: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    goToDetailPageClick() {
      const goods = this.product;
      this.$track.registeredEvents(
        'APP_BrowsePageCommodityCardsClick',
        {
          commodity_id: goods.goodsId
        },
        () => {
          this.goToDetailPage(goods);
        }
      );
    },
    async subscribeAdd() {
      const skuNo = this.product.goodsId;
      const [res, error] = await subscribeAdd({
        type: 2,
        operateType: 1,
        skuNo,
        sourcePage: 4000 // 4001
      });
      if (!error) {
        this.$toast(res?.result || '订阅成功');
      }
    },
    closeSwipe() {
      this.$refs.swipe.close();
    },
    openSwipe() {
      this.$emit(OPEN_PRODUCT, this.product.id);
    },
    onDelete(event) {
      event.stopPropagation();
      this.closeSwipe();
      this.$emit(DELETE_PRODUCT, [this.product.id]);
    }
  }
};
</script>
<style lang="less" scoped>
.cr-swipe-cell {
  width: 100vw;
}
.shop {
  padding: 0 @padding-sm;
  display: flex;
  box-sizing: border-box;

  &-delete {
    width: 70px;
    height: 100%;
    padding-right: 12px;
    &-info {
      width: 70px;
      height: 100%;
      background-color: @red;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0 10px 10px 0;
      &__text {
        .text-size(13);
        color: @white;
        padding-top: 26px;
        background: url(~@/assets/images/browse/delete.png) no-repeat center 0;
        background-size: 18px 19px;
      }
    }
  }

  &-image {
    width: 116px;
    height: 116px;
    background-color: @gray-1;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
    .cr-image {
      height: 100% !important;
    }
  }

  &-sold {
    .text-size(14);
    color: @white;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-40px, -40px) rotate(-20deg);
    background-color: rgba(0, 0, 0, 0.5);
    &-top {
      font-weight: bold;
      letter-spacing: 2px;
    }
    &-bottom {
      .text-size(10);
    }
  }

  &-info {
    flex: 1;
    padding-left: @padding-xs;
    position: relative;
    &-title {
      min-height: 38px;
      .text-size(13);
      .mx_multline_overwrite();
    }

    &-price {
      .text-size(18);
      color: @red;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      margin-top: 24px;
      &::before {
        content: '¥';
        font-size: 0.7em;
        font-weight: bold;
      }
    }
    &-button {
      display: flex;
      margin-top: 2px;
      .cr-button {
        .text-size(12);
        color: @black;
        height: 26px;
        margin-right: 4px;
      }
    }
    &-shopcar {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 26px;
      height: 26px;
      background: url(~@/assets/images/browse/shop.png) no-repeat center center;
      background-size: 14px 13px;
      border: solid 0.5px @gray-3;
      border-radius: 50%;
    }
  }
}
</style>
