<template>
  <div
    class="bx-badge"
    :class="className"
    :style="styleObject"
    >
    {{ text }}
  </div>
</template>
<script>
import Env from '../../src/utils/env'
import { create } from '../utils/index'

export default create({
  name: 'badge',
  props: {
    // 显示文本，空时为小红点
    text: {
      type: String,
      default: '',
    },
    // 红点类型，圆形：cricle/标签：label
    type: {
      type: String,
      default: 'circle',
    },
    // 宽度值
    width: {
      type: Number,
      default: null,
    },
    // 是否有描边
    outline: {
      type: Boolean,
      default: false,
    },
    // 是否是角标
    subscript: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 是否是小红点
      isDot: this.text === '',
      isAndroid: Env.isAndroid,
      className: '',
      styleObject: {},
    }
  },
  created() {
    // 设置css类
    const classArr = []
    if (this.isDot) {
      classArr.push('bx-badge-dot')
    } else if (this.type === 'label') {
      classArr.push('bx-badge-label')
    } else {
      classArr.push('bx-badge-circle')
      const number = parseInt(this.text, 10)
      if (number >= 0 && number <= 9) {
        classArr.push('bx-badge-number')
      }
    }
    if (this.isAndroid) {
      classArr.push('bx-badge--android')
    }
    if (this.outline) {
      classArr.push('bx-badge--outline')
    }
    if (this.subscript) {
      classArr.push('bx-badge--subscript')
      if (!this.isDot && this.type === 'label') {
        classArr.push('bx-badge-label--subscript')
      }
    }
    this.className = classArr.join(' ')
    // 设置固定宽度
    if (this.width) {
      this.styleObject.width = `${this.width}px`
      this.styleObject.paddingLeft = 0
      this.styleObject.paddingRight = 0
    }
  },
})
</script>
<style lang="postcss">
@import './index.css';
</style>
