<script setup>
import {NFlex, NTag, NTooltip} from 'naive-ui'
import {percentType, typePlan} from "../../../Utils/numbers.js";

const props = defineProps({
    isTotalRow: {
        type: Boolean,
        default: false
    },
    value: {
        type: [Number, String],
        default: ''
    },
    needCompletedToPlan: {
        type: [Number, String],
        default: null
    },
    planOfYear: {
        type: [Number, String],
        default: null
    },
    progressCompletedToPlan: {
        type: [Number, String],
        default: null
    }
})
</script>

<template>
    <NFlex align="center" justify="center" class="relative!">
        <NTooltip v-if="needCompletedToPlan && !isTotalRow"
                  trigger="hover"
                  :arrow="false"
        >
            <template #trigger>
                <NTag :type="typePlan(planOfYear, needCompletedToPlan)"
                    round
                    :bordered="false"
                    size="tiny"
                    class="absolute! -left-1.5 bottom-2.5 text-xs"
                >
                    {{ needCompletedToPlan }}
                </NTag>
            </template>
            Требуется выписать в текущем месяце
        </NTooltip>
        <div>
            {{ value }}
        </div>
        <NTooltip v-if="progressCompletedToPlan && !isTotalRow"
                  trigger="hover"
                  :arrow="false"
        >
            <template #trigger>
                <NTag :type="percentType(progressCompletedToPlan)"
                      round
                      :bordered="false"
                      size="tiny"
                      class="absolute! -right-1.5 bottom-2.5 text-xs"
                >
                    {{ progressCompletedToPlan }}%
                </NTag>
            </template>
            <NFlex align="center" justify="start" :wrap="false" size="small">
                <NTag size="small" round type="default" :bordered="false">Месячный</NTag>
                <NTag v-if="needCompletedToPlan === 0" size="small" round type="success" :bordered="false">Выполнен</NTag>
                <NTag v-else size="small" round type="warning" :bordered="false">Не выполнен</NTag>
            </NFlex>
            Прогресс выполнения плана
            <br>План:
            <span class="font-medium">{{ planOfYear }}</span>, требуется выписать еще:
            <span class="font-medium">{{ needCompletedToPlan }}</span>
        </NTooltip>
    </NFlex>
</template>

<style scoped>

</style>
