<template>
    <text class="global-tag" :class="getClass">
        <slot></slot>
    </text>
</template>

<script setup>
import { computed } from 'vue'

const ps = defineProps({
    //primary / success / warning / info / danger
    type: {
        type: String,
        default: 'primary'
    },
    class: {
        type: String,
        default: ''
    },
    radious: {
        type: [String, Number],
        default: 6
    },
    background: {
        type: Boolean,
        default: true
    },
    border: {
        type: Boolean,
        default: false
    }
})
//获取class
const getClass = computed(() => {
    const _class = []
    if (ps.class) {
        _class.push(ps.class)
    }
    if (ps.type == 'primary') {
        ps.background && _class.push('mocp-bg-primary-2')
        ps.border && _class.push('mocp-border-primary-3')
        _class.push('mocp-color-primary-6')
    }
    if (ps.type == 'success') {
        ps.background && _class.push('mocp-bg-success-2')
        ps.border && _class.push('mocp-border-success-3')
        _class.push('mocp-color-success-6')
    }
    if (ps.type == 'warning') {
        ps.background && _class.push('mocp-bg-warning-2')
        ps.border && _class.push('mocp-border-warning-3')
        _class.push('mocp-color-warning-6')
    }
    if (ps.type == 'info') {
        ps.background && _class.push('mocp-bg-fill-4')
        ps.border && _class.push('mocp-border-fill-3')
        _class.push('mocp-color-text-1')
    }
    if (ps.type == 'danger') {
        ps.background && _class.push('mocp-bg-danger-2')
        ps.border && _class.push('mocp-border-danger-3')
        _class.push('mocp-color-danger-6')
    }
    return _class
})
//获取圆角
const getRadious = computed(() => {
    if (typeof ps.radious == 'string') {
        return ps.radious
    } else {
        return ps.radious + 'rpx'
    }
})
</script>
<style lang="scss" scoped>
.global-tag {
    font-size: 24rpx;
    padding: 4rpx 8rpx;
    border-radius: v-bind(getRadious);
}
</style>
