<template>
  <view class="good-title">
    <view class="good-title-title"
      ><image v-if="value.goodsTypeImage" :src="value.goodsTypeImage" class="title-tag" />{{
        value.skuName
      }}</view
    >
    <view v-if="value.skuAttr" class="good-title-sku">{{ value.skuAttr }}</view>
    <img
      v-if="value.goods.userBenefitsLabelImgUrl"
      :src="value.goods.userBenefitsLabelImgUrl"
      class="memberImg"
    />
  </view>
</template>
<script>
export default {
  name: "GoodTitle",
  props: {
    value: {
      type: Object,
      default() {
        return {};
      }
    }
  }
  // watch: {
  //   value: {
  //     deep: true,
  //     immediate: true,
  //     handler: function(val) {
  //       console.log(val);
  //     }
  //   }
  // }
};
</script>
<style lang="scss">
.good-title {
  width: 100%;
  font-size: $uni-font-size-md;
  color: $font-color-dark;
  &-title {
    /* #ifdef MP-ALIPAY */
    line-height: 36rpx;
    /* #endif */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    .title-tag {
      width: 52rpx;
      height: 26rpx;
      vertical-align: middle;
      box-sizing: border-box;
      margin-top: -6rpx;
      margin-right: $margin-sm;
    }
  }
  &-sku {
    margin-top: 4rpx;
    max-width: 100%;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    color: $text-color-n1;
    text-overflow: ellipsis;
    padding: 0 $padding-sm;
    background-color: #f2f3f5;
    border-radius: 4rpx;
    font-size: $uni-font-size-sm;
  }
}
.memberImg {
  width: 132.68rpx;
  height: 28rpx;
}
</style>
