<template>
    <span v-if="dot" :class="classes" ref="badge">
        <slot></slot>
        <sup
            :class="dotClasses"
            :style="styles"
            v-show="badge"
        ></sup>
    </span>
    <span
        v-else-if="status || color"
        :class="classes"
        class="ivu-badge-status"
        ref="badge"
    >
        <span
            :class="statusClasses"
            :style="statusStyles"
        ></span>
        <span class="ivu-badge-status-text"
            ><slot name="text">{{ text }}</slot></span
        >
    </span>
    <span v-else :class="classes" ref="badge">
        <slot></slot>
        <sup
            v-if="$slots.count"
            :style="styles"
            :class="customCountClasses"
            ><slot name="count"></slot
        ></sup>
        <sup
            v-else-if="hasCount"
            :style="styles"
            :class="countClasses"
            v-show="badge"
            ><slot name="text">{{ finalCount }}</slot></sup
        >
    </span>
</template>
<script>
import { oneOf } from '../../utils/assist';
const initColorList = [
    'blue',
    'green',
    'red',
    'yellow',
    'pink',
    'magenta',
    'volcano',
    'orange',
    'gold',
    'lime',
    'cyan',
    'geekblue',
    'purple'
];
const prefixCls = 'ivu-badge';

export default {
    name: 'Badge',
    props: {
        count: Number,
        dot: {
            type: Boolean,
            default: false
        },
        overflowCount: {
            type: [Number, String],
            default: 99
        },
        className: String,
        showZero: {
            type: Boolean,
            default: false
        },
        text: {
            type: String,
            default: ''
        },
        status: {
            validator(value) {
                return oneOf(value, [
                    'success',
                    'processing',
                    'default',
                    'error',
                    'warning'
                ]);
            }
        },
        type: {
            validator(value) {
                return oneOf(value, [
                    'success',
                    'primary',
                    'normal',
                    'error',
                    'warning',
                    'info'
                ]);
            }
        },
        offset: {
            type: Array
        },
        color: {
            type: String
        }
    },
    computed: {
        classes() {
            return `${prefixCls}`;
        },
        dotClasses() {
            return `${prefixCls}-dot`;
        },
        countClasses() {
            return [
                `${prefixCls}-count`,
                {
                    [`${this.className}`]: !!this.className,
                    [`${prefixCls}-count-alone`]: this.alone,
                    [`${prefixCls}-count-${this.type}`]:
                        !!this.type
                }
            ];
        },
        customCountClasses() {
            return [
                `${prefixCls}-count`,
                `${prefixCls}-count-custom`,
                {
                    [`${this.className}`]: !!this.className
                }
            ];
        },
        statusClasses() {
            return [
                `${prefixCls}-status-dot`,
                {
                    [`${prefixCls}-status-${this.status}`]:
                        !!this.status,
                    [`${prefixCls}-status-${this.color}`]:
                        !!this.color &&
                        oneOf(this.color, initColorList)
                }
            ];
        },
        statusStyles() {
            return oneOf(this.color, initColorList)
                ? {}
                : { backgroundColor: this.color };
        },
        styles() {
            const style = {};
            if (this.offset && this.offset.length === 2) {
                style['margin-top'] = `${this.offset[0]}px`;
                style['margin-right'] = `${this.offset[1]}px`;
            }
            return style;
        },
        finalCount() {
            if (this.text !== '') return this.text;
            return parseInt(this.count) >=
                parseInt(this.overflowCount)
                ? `${this.overflowCount}+`
                : this.count;
        },
        badge() {
            let status = false;

            if (this.count) {
                status = !(parseInt(this.count) === 0);
            }

            if (this.dot) {
                status = true;
                if (this.count !== null) {
                    if (parseInt(this.count) === 0) {
                        status = false;
                    }
                }
            }

            if (this.text !== '') status = true;

            return status || this.showZero;
        },
        hasCount() {
            if (this.count || this.text !== '') return true;
            if (this.showZero && parseInt(this.count) === 0)
                return true;
            else return false;
        },
        alone() {
            return this.$slots.default === undefined;
        }
    }
};
</script>
