<!--
@name 通用组件：徽标提示
@desc 基于 vant-ui

【必填入参】：
    @param {String} [title]  - 提示文本，默认：""
    @param {String/Number} [num]  - 徽标文本，默认：""
    @param {String} [color]  - 徽标颜色，rgb或rgba


【选填入参】： 
    @param {Boolean} [dot] - 是否显示小红点, 默认：false
    @param {Boolean} [right] - 微标靠右显示, 默认：false
    @param {String} [color2]  - 徽标渐变颜色，rgb或rgba

@time 2020年7月24日 -- design by Yj_cHen
-->

<template>
    <div class="lj-bagde">
        {{ title }}
        <div v-if="dot" class="lj-info dot" :style="{backgroundColor: color}"></div>
        <div v-else-if="content != ''" class="content" :style="isContentStyle">
            {{ content }}
        </div>
        <em v-else
            class="lj-info bagde"
            :class="{'in-right': right}"
            :style="{background: color2 ? 'linear-gradient(to right, ' + color + ', ' + color2 + ')' : color}"
        >
            {{ num }}
        </em>
    </div>
</template>

<script>
export default {
    name: "lj-bagde",
    props: {
        dot: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ""
        },
        num: {
            type: String/Number,
            default: ""
        },
        color: {
            type: String,
            default: "#ff9c13"
        },
        color2: {
            type: String,
            default: ""
        },
        right: {
            type: Boolean,
            default: false
        },
        content: {
            type: String,
            default: ""
        }
    },
    computed: {
        isContentStyle() {
            return {
                background: this.color2 ? 'linear-gradient(to right, ' + this.color + ', ' + this.color2 + ')' : this.color
            }
        }
    }
}
</script>

<style>
.lj-bagde {
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
}
.lj-info {
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
    padding: 0 4px;
    text-align: center;
    z-index: 10;
}
.lj-bagde .bagde {
    padding: 0 2px;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    font-style: normal;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    background-color: #ff9c13;
    border-radius: 13px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    transform: translate(50%, -80%);
}
.lj-bagde .content {
    box-sizing: border-box;
    min-width: 16px;
    padding: 0 3px;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    background-color: #ee0a24;
    border: 1px solid #fff;
    border-radius: 999px;
}
.lj-bagde .bagde.in-right {
    right: -45%;
    transform: translateY(-80%);
}
.lj-bagde .dot {
    width: 8px;
    min-width: 0;
    height: 8px;
    background-color: #ee0a24;
    border-radius: 100%;
    transform: translate(50%, -50%);
    transform-origin: 100%;
}
</style>