<template>
  <div class="good-title">
    <div class="good-title-top">
      <div class="good-title-title">
        <img v-if="value.goodsTypeImage" :src="value.goodsTypeImage" class="title-tag" />{{
          value.skuName
        }}
      </div>
      <!-- 二期放开 -->
      <!-- <div v-if="value.hasCoupon" class="divide">|</div>
      <div v-if="value.hasCoupon" class="good-title-coupon" @click="openPopup($event, 'coupon')">
        领券
      </div> -->
      <!-- 二期放开 -->
    </div>
    <div class="good-title-body">
      <div v-if="value.skuAttr" class="good-title-sku spec">
        <span class="text">{{ value.skuAttr }}</span>
        <!-- <span class="iconfont icon-arrow-down icon" /> -->
      </div>
      <div
        v-if="value.canSelectPromotions.length > 1"
        class="good-title-sku"
        @click="openPopup($event, 'promotion')"
      >
        <span class="text">换促销</span><span class="iconfont icon-arrow-down icon" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'GoodTitle',
  props: {
    value: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    openPopup(e, type) {
      e.stopPropagation();
      e.preventDefault();
      this.$emit('openPopup', type);
      return false;
    }
  }
};
</script>
<style lang="less" scoped>
.good-title {
  width: 100%;
  font-size: 13px;
  color: #333;
  &-top {
    display: flex;
  }
  &-coupon {
    white-space: nowrap;
    color: #ec1500;
    margin-top: 1px;
  }
  &-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
    .title-tag {
      width: 26px;
      height: 13px;
      vertical-align: middle;
      box-sizing: border-box;
      margin-top: -3px;
      margin-right: 5px;
    }
  }
  &-body {
    display: flex;
  }
  &-sku {
    margin-top: 6px;
    height: 18px;
    border-radius: 10px;
    max-width: 123px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 2px 7px;
    background-color: #f2f3f5;
    font-size: 12px;
    box-sizing: border-box;
    .text {
      max-width: 97px;
      overflow: hidden;
      white-space: nowrap;
      color: #999;
      text-overflow: ellipsis;
    }
    .icon {
      font-size: 4px;
      margin-left: 4px;
    }
  }
}
.spec {
  margin-right: 6px;
}
.divide {
  margin: 0 5px;
}
</style>
