<template>
  <div class="text-xs px-1.5 py-0.5 inline-block" :class="getTagClass">
    {{ label }}
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'CTag',
  props: {
    color: {
      type: String,
      default: 'primary',
      validator(val) {
        return ['primary', 'red', 'green', 'purple', 'yellow', 'orange'].indexOf(val) > -1
      }
    },
    tagClass: String,
    round: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: '标签'
    }
  },
  computed: {
    getTagClass() {
      // 'tag-primary': '#32B2F7'
      // 'tag-primary-lighter': '#EAF6FF',
      //  'tag-orange': '#FD8800',
      //  'tag-orange-lighter': '#FAF2D8',
      //  'tag-green': '#4CD15F',
      //  'tag-green-lighter': '#E5F7F0',
      //  'tag-yellow': '#F3B200',
      //  'tag-red': '#EB8282',
      //  'tag-purple': '#9F82E5',
      if (typeof this.tagClass !== 'undefined' && this.tagClass !== '') {
        return `${this.tagClass} ${this.round ? 'rounded-full' : 'rounded'}`
      }
      return `bg-tag-${this.color}-lighter text-tag-${this.color} ${this.tagClass} ${this.round ? 'rounded-full' : 'rounded'}`
    }
  },
  methods: {

  }
})
</script>

