<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: ''
    },
    plan: {
        type: Object,
        default: () => ({
            actual_to_date: 0,
            cumulative_plan: 0,
            current_mouth_dept: 0,
            debt_from_year: 0,
            month_plan: 0,
            outcome_in_current_mouth: 0,
            total_debt: 0,
            year_plan: 0,
        })
    }
})
</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="plan && !isTotalRow"
                  trigger="hover"
                  :arrow="false"
        >
            <template #trigger>
                <NTag :type="percentType(plan.cumulative_percent)"
                      round
                      :bordered="false"
                      size="tiny"
                      class="absolute! -right-1.5 bottom-2.5 text-xs"
                >
                    {{ plan.cumulative_percent }}%
                </NTag>
            </template>
            <NFlex align="center" justify="start" :wrap="false" size="small">
                <NTag size="small" round type="info" :bordered="false">План на месяц: {{ plan.month_plan }}</NTag>
                <NTag v-if="plan.current_mouth_dept === 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">{{ plan.cumulative_plan }}</span>, долг:
            <span class="font-medium">{{ plan.debt_from_year }}</span> +
            <span class="font-medium">{{ plan.current_mouth_dept }}</span>
        </NTooltip>
    </NFlex>
</template>

<style scoped>

</style>
