
<template>
  <span :class="tagClass">
    <slot />
  </span>
</template>
<script>
import Env from '../../src/utils/env'
import { create } from '../utils'

const typeList = [
  'default',
  'primary',
  'success',
  'info',
  'warning',
  'danger',
  'caution',
]
const onlyValues = values => str => values.indexOf(str) !== -1

export default create({
  name: 'tag',
  props: {
    plain: {
      type: Boolean,
      default: false,
    },
    loose: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'default',
      validator: onlyValues(typeList),
    },
  },
  computed: {
    tagClass() {
      const obj = {
        'bx-tag--android': Env.isAndroid,
        'bx-tag': true,
        'bx-tag--plain': this.plain,
        'bx-hairline--surround': this.plain,
        'bx-tag--loose': this.loose,
        'bx-tag-type--default': false,
      }
      if (this.type && this.type !== 'default') {
        obj[`bx-tag-type--${this.type}`] = true
      } else {
        obj[`bx-tag-type--default`] = true
      }
      return obj
    },
  },
})
</script>
<style lang="postcss">
@import './index.css';
</style>
