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

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,
        })
    },
    endDate: {
        type: [Number, String],
        default: null
    }
})

const formatedMonth = computed(() => {
    const date = toDate(props.endDate)
    return date.toLocaleString('ru', { month: 'long' })
})

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(plan.cumulative_percent)"
                      round
                      :bordered="false"
                      size="tiny"
                      class="absolute! -right-1.5 bottom-2.5 text-xs"
                >
                    {{ plan.cumulative_percent }}%
                </NTag>
            </template>
            <NSpace vertical>
                <NFlex align="center" justify="start" :wrap="false" size="small">
                    <NTag type="info">План на {{formatedMonth}}: {{ plan.month_plan }} / {{ plan.current_mouth_dept }}</NTag>
                </NFlex>
                <NTag :type="typePlan">Долг с начала года: {{ plan.debt_from_year }}</NTag>
<!--                Долг с начала года: {{ plan.debt_from_year }}-->
            </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>
