<template>
  <text class="dof-colmo-tag" :style="currentStyle">{{ content }}</text>
</template>

<script>

export default {
  props: {
    content: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'colmo_plain'   // colmo_plain colmo gray_plain green
    }
  },
  data() {
    return {
      styleMap: {
        colmo_plain: {
          borderColor: '#B35336',
          backgroundColor: 'transparent',
          color: '#B35336',
          fontSize: '24px',
          borderRadius: '8px'
        },
        colmo: {
          borderColor: 'transparent',
          backgroundColor: 'rgba(194,94,62,0.18)',
          color: '#B35336',
          fontSize: '24px',
          borderRadius: '8px'
        },
        gray_plain: {
          borderColor: '#707070',
          backgroundColor: 'transparent',
          color: '#707070',
          fontSize: '24px',
          borderRadius: '8px'
        },
        green: {
          borderColor: '#06c270',
          backgroundColor: 'rgba(6,194,112,0.1)',
          color: '#06c270',
          fontSize: '24px',
          borderRadius: '8px'
        }
      }
    }
  },
  computed: {
    currentStyle() {
      return this.styleMap[this.type] || {}
    }
  },
  methods: {
    
  }
}
</script>

<style scoped>
.dof-colmo-tag {
  padding: 8px 16px;
  border-width: 1px;
  border-style: solid;
  line-height: 24px;
}
</style>
