<template>
    <div :class="bem()">
        <!-- badge包裹内容 -->
        <slot/>
        <sup  v-if="number || hidden" :style="dotStyle" :class="bem('content', {'dot': isDot})">{{ isDot ? '' : number }}</sup>
    </div>
</template>

<script>
import { componentMixin, createComponentName } from '../_utils/component';

export default {
    name: createComponentName('badge'),
    mixins: [componentMixin],
    props: {
        // 隐藏 badge
        hidden: {
            type: Boolean,
            default: false,
        },
        // 是否是小圆点
        isDot: {
            type: Boolean,
            default: false,
        },
        // 最大值，超过最大值会显示 `{max}+`，要求 value 是 Number 类型
        max: {
            type: Number,
            default: 99,
        },
        // 显示值
        value: {
            type: [Number, String],
            default: '',
        },
        // 红点样式
        dotStyle: {
            type: Object,
            default: () => {},
        },
    },
    computed: {
        number() {
            if (this.max) return this.max < this.value ? this.max + '+' : this.value;
            return this.value;
        },
    },
};
</script>

<style lang="less">
@import '../_styles/base.less';

@b: ~'@{prefix}-badge';

.@{b} {
    position: relative;
    vertical-align: middle;
    display: inline-block;

    &__content {
        background-color: #ff0000;
        border-radius: 10px;
        color: #fff;
        display: inline-block;
        font-size: 12px;
        height: 18px;
        line-height: 18px;
        padding: 0 6px;
        text-align: center;
        white-space: nowrap;
        border: 1px solid #fff;
        position: absolute;
        top: 0;
        right: 10px;
        transform: translateY(-50%) translateX(100%);

        &--dot {
            height: 8px;
            width: 8px;
            padding: 0;
            right: 5px;
            border-radius: 50%;
        }
    }
}
</style>
