<template>
  <div class="tag-item">
    <div v-if="item.type === 1" class="tag-item--icon">
      <img v-if="item.icon" :src="item.icon" />
    </div>
    <div v-else-if="item.type === 2" class="tag-item--text">{{ item.name }}</div>
    <div v-else-if="item.type === 3" class="tag-item--text tag-item--radius">{{ item.name }}</div>
    <div v-else-if="item.type === 4" class="tag-item--text tag-item--coupon">
      <div class="tag-item--coupon__label">{{ item.head }}</div>
      <div class="tag-item--coupon__content">{{ item.name }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    imgWidth() {
      return 12 * +this.item.iconRate + 'px';
    }
  }
};
</script>
<style lang="less">
@itemHeight: 12px;
.tag-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 14px;
  margin-right: 3px;
  .text-size(8px);
  overflow: hidden;
  &--icon {
    img {
      display: block;
      height: @itemHeight;
    }
  }
  &--text {
    border-radius: 3px;
    border: 1px solid @red;
    height: @itemHeight;
    line-height: @itemHeight;
    box-sizing: border-box;
    padding: 0 5px;
    color: @red;
  }
  &--radius {
    position: relative;
    &::after,
    &::before {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      box-sizing: border-box;
      border: 1px solid @red;
      background-color: #fff;
      transform: translate(4px, -50%);
    }
    &::before {
      left: 0;
      transform: translate(-4px, -50%);
    }
  }
  &--coupon {
    display: flex;
    padding: 0;
    &__label {
      height: 100%;
      width: @itemHeight;
      background-color: @red;
      color: #fff;
      text-align: center;
    }
    &__content {
      flex: 1;
      text-align: center;
      padding: 0 2px;
    }
  }
}
</style>
