<script setup>
import { computed, h } from 'vue'
import { NDataTable, NEmpty, NText } from 'naive-ui'

const props = defineProps({
    columns: { type: Array, default: () => [] },
    rows: { type: Array, default: () => [] },
})

const formatValue = (value, column) => {
    if (column.kind === 'dimension') return value ?? '—'
    if (value === null || value === undefined || value === '') return '—'
    const num = Number(value)
    if (Number.isNaN(num)) return value
    if (column.unit === 'percent') return `${Math.round(num * 10) / 10}%`
    if (column.unit === 'money') return `${num.toLocaleString('ru-RU')} ₽`
    return Number.isInteger(num) ? num.toLocaleString('ru-RU') : (Math.round(num * 100) / 100).toLocaleString('ru-RU')
}

const tableColumns = computed(() => props.columns.map((col) => ({
    title: col.label,
    key: col.key,
    fixed: col.kind === 'dimension' && props.columns.indexOf(col) === 0 ? 'left' : undefined,
    minWidth: col.kind === 'dimension' ? 160 : 120,
    align: col.kind === 'dimension' ? 'left' : 'right',
    render: (row) => formatValue(row[col.key], col),
})))
</script>

<template>
    <NEmpty v-if="!rows.length" description="Сформируйте отчёт, чтобы увидеть данные" style="padding: 32px;" />
    <NDataTable
        v-else
        min-height="calc(100vh - 740px)"
        max-height="calc(100vh - 740px)"
        :columns="tableColumns"
        :data="rows"
        :bordered="false"
        :scroll-x="columns.length * 160"
        size="small"
        striped
    />
</template>
