<template>
  <span class="tagList">
    <template v-for="(tag, idx) in value">
      <span
        v-if="tag.type === 2"
        :key="tag.name"
        :text="tag.name"
        inverted
        type="error"
        size="small"
        class="tagList-tag"
        >{{ tag.name }}</span
      >
      <img v-else :key="idx" :src="tag.icon" lazy-load class="tagList-image" />
    </template>
  </span>
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      default() {
        return [];
      }
    }
  }
};
</script>
<style lang="less">
.tagList {
  display: flex;
  flex-wrap: wrap;
  &-tag {
    height: 12px;
    display: flex-inline;
    font-size: 10px;
    justify-content: center;
    align-items: center;
    line-height: 12px;
    border-radius: 3px;
    color: #ec1500;
    padding: 0 @padding-xs;
    border: 1px solid #ec1500;
    margin-right: @padding-unit;
    margin-top: @padding-unit;
    ::v-deep .uni-tag {
      width: 5px;
    }
  }
  &-image {
    width: auto;
    height: 12px;
    margin-top: @padding-unit;
    margin-right: @padding-unit;
  }
}
</style>
