<template>
  <div :class="classes" v-if="!!tag">{{ content }}</div>
</template>

<script>
const colorMap = {
  A: 'warning',
  B: 'primary',
  C: 'info',
  D: 'light',
  E: 'danger',
  F: 'transparent'
};

export default {
  name: 'rtTag',
  props: {
    tag: String,
    type: String, // warning,primary,info,light,danger
    content: String,
    // 多个显示
    isMultiple: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    classes() {
      return [
        'rt-tag',
        {
          [`${this.tagType}`]: this.tagType
        },
        {
          'rt-tag-margin': this.isMultiple
        }
      ];
    },
    tagType() {
      return this.type || (this.tag ? colorMap[this.tag] : '');
    }
  }
};
</script>

<style lang="less" scoped>
.rt-tag-margin {
  margin: 0 5px 0 0;
}
</style>
