<template>
  <view class="tagList">
    <template v-for="tag in value">
      <text
        v-if="tag.type === 2"
        :key="tag.name"
        :text="tag.name"
        inverted
        type="error"
        size="small"
        class="tagList-tag"
        >{{ tag.name }}</text
      >
      <image
        v-else
        :key="tag.name"
        :src="tag.icon"
        lazy-load
        mode="heightFix"
        class="tagList-image"
      />
    </template>
  </view>
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      default() {
        return [];
      }
    }
  }
};
</script>
<style lang="scss">
.tagList {
  display: flex;
  flex-wrap: wrap;
  &-tag {
    height: 32rpx;
    display: flex;
    font-size: $uni-font-size-tiny;
    justify-content: center;
    align-items: center;
    margin-top: 8rpx;
    border-radius: $uni-border-radius-base;
    color: $font-color-search;
    padding: 0 $padding-sm;
    margin-right: $padding-sm;
    border: 1rpx solid $font-color-search;
    /* #ifdef MP-ALIPAY */
    border-width: 1px;
    /* #endif */
    ::v-deep .uni-tag {
      width: 10rpx;
    }
  }
  &-image {
    width: auto;
    height: 32rpx;
    margin-top: 8rpx;
    margin-right: $padding-sm;
  }
}
</style>
