<template>
    <span class="tag mg-r-5 mg-b-5" :class="tagClass" :title="props.name">
        {{ props.name }}
    </span>
</template>
<script setup>
import { ref, onMounted } from 'vue';


//#region props
const props = defineProps({
    value: {
        type: Number,
        required: true
    },
    name: {
        type: String,
        required: true
    }
});
//#endregion

const tagClass = ref('');

function getTagClass() {
    switch (props.value) {
        case 1:
            tagClass.value = 'tag-default'; break;
        case 2:
            tagClass.value = 'tag-info'; break;
        case 3:
            tagClass.value = 'tag-green'; break;
        case 4:
            tagClass.value = 'tag-red'; break;
        default:
            tagClass.value = 'tag-default'; break;
    }

}
//#region Events
onMounted(() => {

    getTagClass();
})
</script>
<style scoped>
.alert .alert-inner--icon {
    margin-inline-end: 10px
}
</style>