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

const props = defineProps({
    isTotalRow: {
        type: Boolean,
        default: false
    },
    value: {
        type: [Number, String],
        default: ''
    },
    needCompletedToPlan: {
        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="percentType(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>
            Прогресс выполнения плана
        </NTooltip>
    </NFlex>
</template>

<style scoped>

</style>
