<template>
  <div
    :class="border?'box border':'box'"
    >
    <div class="img">
      <img class="proimg" :src="item.productImg" alt="">
      <!-- <span class="label"><img :src="item.platinumIcon" alt=""></span> -->
      <img class="sign" :src="item.subScriptImgUrl" alt="">
    </div>

    <div class="name">
      <div class="line_over_2">{{item.productName}}</div>
    </div>
    <div class="brand">
      <div class="line_over_1">{{brandName}} ></div>
      <img :src="item.platinumIcon" alt="">
    </div>
    <div class="price">
      <div>优惠价： ￥{{item.mallSalePrice}}</div>
      <div>批发价： ￥{{item.dealerPrice}}</div>
      <div v-if="item.actPrice">活动价： ￥{{item.actPrice}}</div>
    </div>
    <!-- <div class="sale" v-if="type == '0'">平台销量 {{item.sales || item.salesNum}}</div> -->
  </div>

</template>

<script>
import { _href ,_getStorage} from "@/utils/utils";
/**
 * item:数据={skuId:XXX,mainImg:'',labelTitle:'',subTitle:'',minPurchasePrice:'',maxPurchasePrice:'',sales:""}
 * type:产品卡类型（普通：'0'，详情页同品牌推荐：'1'）
 * border:是否显示边框（true/false）
 */
export default {
  props:{
    item: {
      type: Object,
      default(){
        return {}
      }
    },
    type: {
      type: String,
      default:'0'
    },
    border: {
      type: Boolean,
      default:true
    }
  },
  data() {
    return {
      brandName:''
    };
  },
  mounted(){
    // debugger
    let brand = _getStorage('info');
    console.log(this.brandName);
    this.brandName = brand.brandName;
  },
  methods: {
    handle2Detial(spuId){
      _href(this, "/goodsdetail", {spuId})
    },
    handle2Brand(brandId){
      _href(this, "/shop", {brandId})
    }
  },
  components: {}
};
</script>

<style lang="scss" scoped>
// @import '@/assets/css/_var.scss';
.line_over_1{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line_over_2{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.box{
  background: #fff;
  &.border{
    border:1px solid #eeeeee;
  }
  margin-top:10px ;
  font-size: 14px;
  cursor: pointer;
  &:hover{
    box-shadow: 0 0 10px 0 #dcdcdc;
    transform: translateY(-1px);
  }
  .img{
    position: relative;
    height: 0;
    padding: 50%;
    .proimg{
      max-width: 94%;
      max-height: 94%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .label{
    position: absolute;
    left:3%;
    bottom: 3%;
    color: #F7904C;
    font-size: .8em;
    img{
      height: 25px;
      width: 25px;
    }
  }
  .sign{
    position: absolute;
    right:3%;
    top: 3%;
    color: #F7904C;
    font-size: .8em;
  }
  .name, .price, .sale,.brand{
    padding:0 3% 0px;
  }
  .name{
    color: #333333;
    padding-bottom: 10px;
  }
  .brand{
    color: #666666;
    font-size: 12px;
    display: flex;
    justify-content:space-between;
    img{
      height: 20px;
    }
  }
  .price{
    color: #666666;
    font-size: 12px;
    div{
      padding-bottom: 12px;
    }
    .line_over_1{
      text-align: center;
    }
    :last-child{
      color: #F26B28;
      font-size: 18px;
      font-weight: bold;
    }
  }
  .sale{
    font-size: .8em;
    color: #CCCCCC;
  }
}
</style>
