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

const props = defineProps({
    isTotalRow: {
        type: Boolean,
        default: false
    },
    value: {
        type: [Number, String],
        default: ''
    },
    plan: {
        type: Object,
        default: () => ({
            year_plan: 0,
            month_plan: 0,
            period_plan: 0,
            debt_at_period_start: 0,
            cumulative_plan: 0,
            debt_from_year: 0,
            actual_year_to_date: 0,
            cumulative_percent: 0,
        })
    }
})

// План за период + непогашенный долг, накопленный до начала периода
const planWithDebt = computed(() => {
    return Number(props.plan?.period_plan ?? 0) + Number(props.plan?.debt_at_period_start ?? 0)
})

// % выполнения плана за период с учётом долга (иначе долг никак не влияет на оценку)
const periodPercent = computed(() => {
    if (!planWithDebt.value) return 0
    return Math.round((Number(props.value) * 100) / planWithDebt.value)
})

// Цвет долга с начала года (на дату конца выбранного периода)
const typePlan = computed(() => {
    if (props.plan.debt_from_year > 20) return 'error'
    if (props.plan.debt_from_year > 10) return 'warning'
    return 'success'
})
</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(periodPercent)"
                      round
                      :bordered="false"
                      size="tiny"
                      class="absolute! -right-1.5 bottom-2.5 text-xs"
                >
                    {{ periodPercent }}%
                </NTag>
            </template>
            <NSpace vertical>
                <NFlex align="center" justify="start" :wrap="false" size="small">
                    <NTag type="info">План: {{ plan.period_plan }}, выполнено: {{ value }}</NTag>
                </NFlex>
                <NTag :type="typePlan">Долг с начала года: {{ plan.debt_from_year }}</NTag>
            </NSpace>
<!--            <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>
