<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({
    type: {
        type: Number,
        default: 1
    },
    value: {
        type: Number,
        required: true
    },
    name: {
        type: String,
        required: true
    }
});
//#endregion

const tagClass = ref('');

function getTagClass() {

    console.log('props', props.value);
    if (props.type === 1) {
        console.log('OrderStatus mounted');
        switch (props.value) {
            case 1:
                tagClass.value = 'tag-default'; break;
            case 8:
                tagClass.value = 'tag-dark'; break;
            case 3:

                tagClass.value = 'tag-lime'; break;

            case 11:
                tagClass.value = 'tag-yellow'; break;
            case 55:
                tagClass.value = 'tag-green'; break;
            case 51:
                tagClass.value = 'tag-orange'; break;

            case 7:
                tagClass.value = 'tag-red'; break;
            default:
                tagClass.value = 'tag-default'; break;
        }

    } else {
        switch (props.value) {
            case 1:
                tagClass.value = 'tag-default'; break;
            case 8:
                tagClass.value = 'tag-dark'; break;

            case 11:
                tagClass.value = 'tag-azure'; break;
            case 12:
                tagClass.value = 'tag-blue'; break;
            case 13:
                tagClass.value = 'tag-lime'; break;

            case 20:
                tagClass.value = 'tag-teal'; break;
            case 30:
                tagClass.value = 'tag-cyan';
                break;
            case 51:
                tagClass.value = 'tag-orange'; break;
            case 53:
                tagClass.value = 'tag-yellow'; break;
            case 55:
                tagClass.value = 'tag-green'; break;

            default:
                tagClass.value = 'tag-default'; break;
        }
    }

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

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