<template>
  <span :class="_class">
    <slot />
    <template v-if="count > 0 || text">
      <span
        :class="_numberClass"
        :style="numberStyle"
        v-if="dot"
      />
      <span
        :class="_numberClass"
        :style="numberStyle"
        v-else
      >{{ text }} {{ count > maxCount ? `${maxCount}+` : count }}</span>
    </template>
  </span>
</template>

<script>
const name = 'hive-badge';

export default {
  name,
  props: {
    /**
     * 设置 Badge 主题,当传入 color / textColor 时，theme 无效
     * @member info | success | error | warn | disabled
     */
    theme: {
      validator: function(type) {
        return ['info', 'success', 'error', 'warn', 'disabled'].indexOf(type) !== -1;
      },
      default: 'error'
    },
    /**
     * 是否只展示小红点，不展示数值
     */
    dot: {
      type: Boolean,
      default: false
    },
    /**
     * 展示的最大数值，大于该数值时显示最大值且后面添加符号'+'，为 0 时隐藏
     */
    maxCount: {
      type: Number,
      default: 99
    },
    /**
     * 展示的数值
     */
    count: Number,
    /**
     * 自定义 Badge 的内容
     */
    text: String,
    /**
     * 设置状态点的位置偏移，格式为 [x, y], 仅在 dot 开启下有效
     */
    offset: Array,
    /**
     * 自定义 Badge 的背景颜色,当只传入 color，不传 textColor 时，textColor 默认为 '#FFFFFF'
     */
    color: String,
    /**
     * 自定义 Badge 的字体颜色,当只传入 textColor，不传 color 时，color 默认为 '#FF3E00'
     */
    textColor: String
  },
  data() {
    return {

    };
  },
  computed: {
    _class() {
      return [
        `${name}`,
        `${name}--${this.theme}`,
        {
          'hive-badge--circle': !this.dot,
          'hive-badge__count': this.dot
        }
      ];
    },
    _numberClass() {
      return [
        `hive-badge__number`
      ];
    },
    numberStyle() {
      let theStyle;
      if (this.color || this.textColor || this.offset) {
        let theColor;
        let theTextColor;
        if (this.color || this.textColor) {
          theColor = this.color || '#FF3E00';
          theTextColor = this.textColor || '#FFFFFF';
        }

        let offsetX;
        let offsetY;
        if (this.dot && this.offset) {
          offsetX = -parseInt(this.offset[0]) + 'px';
          offsetY = -parseInt(this.offset[1]) + 'px';
        };

        theStyle = {
          'backgroundColor': theColor,
          'color': theTextColor,
          'right': offsetX,
          'top': offsetY
        };
        return theStyle;
      }
      return '';
    }
  }
};
</script>
