<template>
  <view :class="[showAni ? 'ani-scale' : '']">
    <text
      v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)"
      :class="[
        isDot ? 's-badge--dot' : 's-badge--not-dot',
        inverted && 's-badge--inverted',
        shape === 'horn' && 's-badge--horn',
        `s-badge--${type}${inverted ? '--inverted' : ''}`,
      ]"
      :style="[$s.addStyle(customStyle), badgeStyle]"
      class="s-badge"
    >{{ isDot ? "" : showValue }}</text>
    <!-- <view v-else class="s-badge-icon" :class="[`s-badge--${type}`]">
      <s-icon class="s-badge--icon" :name="icon" :color="iconColor"></s-icon>
    </view>-->
  </view>
</template>

<script>
import props from './props.js'
/**
 * badge 徽标数
 * @description 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
 * @tutorial https://uviewui.com/components/badge.html
 *
 * @property {Boolean} 			isDot 		是否显示圆点 （默认 false ）
 * @property {String | Number} 	value 		显示的内容
 * @property {Boolean} 			show 		是否显示 （默认 true ）
 * @property {String | Number} 	max 		最大值，超过最大值会显示 '{max}+'  （默认999）
 * @property {String} 			type 		主题类型，error|warning|success|primary （默认 'error' ）
 * @property {Boolean} 			showZero	当数值为 0 时，是否展示 Badge （默认 false ）
 * @property {Boolean} 			showAni		是否显示初始化缩放动画（默认true）
 * @property {String} 			bgColor 	背景颜色，优先级比type高，如设置，type参数会失效
 * @property {String} 			color 		字体颜色 （默认 '#ffffff' ）
 * @property {String} 			shape 		徽标形状，circle-四角均为圆角，horn-左下角为直角 （默认 'circle' ）
 * @property {String} 			numberType	设置数字的显示方式，overflow|ellipsis|limit  （默认 'overflow' ）
 * @property {Array}} 			offset		设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
 * @property {Boolean} 			inverted	是否反转背景和字体颜色（默认 false ）
 * @property {Boolean} 			absolute	是否绝对定位（默认 false ）
 * @property {Object}			customStyle	定义需要用到的外部样式
 * @example <s-badge :type="type" :count="count"></s-badge>
 */
export default {
  name: 's-badge',
  mixins: [uni.$s.mpMixin, props, uni.$s.mixin],
  computed: {
    // 是否将badge中心与父组件右上角重合
    boxStyle() {
      let style = {}
      return style
    },
    // 整个组件的样式
    badgeStyle() {
      const style = {}
      if (this.color) {
        style.color = this.color
      }
      if (this.bgColor && !this.inverted) {
        style.backgroundColor = this.bgColor
      }
      if (this.absolute) {
        style.position = 'absolute'
        // 如果有设置offset参数
        if (this.offset.length) {
          // top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
          const top = this.offset[0]
          const right = this.offset[1] || top
          style.top = uni.$s.addUnit(top)
          style.right = uni.$s.addUnit(right)
        }
      }
      return style
    },
    showValue() {
      switch (this.numberType) {
        case 'overflow':
          return Number(this.value) > Number(this.max)
            ? this.max + '+'
            : this.value
          break
        case 'ellipsis':
          return Number(this.value) > Number(this.max) ? '...' : this.value
          break
        case 'limit':
          return Number(this.value) > 999
            ? Number(this.value) >= 9999
              ? Math.floor((this.value / 1e4) * 100) / 100 + 'w'
              : Math.floor((this.value / 1e3) * 100) / 100 + 'k'
            : this.value
          break
        default:
          return Number(this.value)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/components.scss';
@import '../../libs/css/ani.scss';

$s-badge-primary: $s-primary !default;
$s-badge-error: $s-error !default;
$s-badge-success: $s-success !default;
$s-badge-info: $s-info !default;
$s-badge-warning: $s-warning !default;
$s-badge-dot-radius: 100px !default;
$s-badge-dot-size: 8px !default;
$s-badge-dot-right: 4px !default;
$s-badge-dot-top: 0 !default;
$s-badge-text-font-size: 11px !default;
$s-badge-text-right: 10px !default;
$s-badge-text-padding: 2px 5px !default;
$s-badge-text-align: center !default;
$s-badge-text-color: #ffffff !default;
$s-badge-icon-width: 16px !default;

.s-badge {
  border-top-right-radius: $s-badge-dot-radius;
  border-top-left-radius: $s-badge-dot-radius;
  border-bottom-left-radius: $s-badge-dot-radius;
  border-bottom-right-radius: $s-badge-dot-radius;
  @include flex;
  line-height: $s-badge-text-font-size;
  text-align: $s-badge-text-align;
  font-size: $s-badge-text-font-size;
  color: $s-badge-text-color;

  &--dot {
    height: $s-badge-dot-size;
    width: $s-badge-dot-size;
  }
  &-icon {
    display: inline-block;
    width: $s-badge-icon-width;
    height: $s-badge-icon-width;
    border-radius: 50%;
  }
  &--icon {
    transform: scale(0.75);
  }
  &--inverted {
    font-size: 13px;
  }

  &--not-dot {
    padding: $s-badge-text-padding;
  }

  &--horn {
    border-bottom-left-radius: 0;
  }

  &--primary {
    background-color: $s-badge-primary;
  }

  &--primary--inverted {
    color: $s-badge-primary;
  }

  &--error {
    background-color: $s-badge-error;
  }

  &--error--inverted {
    color: $s-badge-error;
  }

  &--success {
    background-color: $s-badge-success;
  }

  &--success--inverted {
    color: $s-badge-success;
  }

  &--info {
    background-color: $s-badge-info;
  }

  &--info--inverted {
    color: $s-badge-info;
  }

  &--warning {
    background-color: $s-badge-warning;
  }

  &--warning--inverted {
    color: $s-badge-warning;
  }
}
</style>
