<script setup lang="ts">
const route = useRoute()

const config = useRuntimeConfig()

const data = ref()
const formatter = ref()

export interface Data {
    status: string;
    result: Result[];
    format: {
        domain: string;
        statuses: { [key: string]: string };
    }
}

export interface Result {
    id: string;
    title: string;
    responsibleId: string;
    createdDate: Date;
    deadline: Date;
    status: string;
    groupId: string;
    group: any[] | GroupClass;
    responsible: string;
    subStatus: string;
}

export interface GroupClass {
    id: string;
    name: string;
    opened: boolean;
    membersCount: number;
    image: string;
    additionalData: any[];
}

const loadData = async (deal_id: number) => {
    const res = await $fetch<Data>(`${config.public.apiBase}/widget/deal_tab/${deal_id}`, { method: 'POST' })
    if (res.status == 'success') {
        data.value = res.result
        formatter.value = res.format
    }
}

const columns = [{
    key: 'id',
    label: 'ID'
}, {
    key: 'title',
    label: 'Название'
}, {
    key: 'status',
    label: 'Статус'
}, {
    key: 'responsible',
    label: 'Исполнитель'
}, {
    key: 'createdDate',
    label: 'Создана'
}, {
    key: 'deadline',
    label: 'Крайний срок',
}]


onMounted(() => {
    const deal_id = route.query.deal_id
    if (!deal_id) return

    loadData(parseInt(deal_id as string))
})
</script>
<template>
    <UTable :rows="data" :columns="columns">
        <template #responsible-data="{ row }">
            {{ row.responsible.name }}
        </template>
        <template #deadline-data="{ row }">
            {{ new Date(Date.parse(row.deadline)).toLocaleDateString('ru-RU', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
            }) }}
        </template>
        <template #createdDate-data="{ row }">
            {{ new Date(Date.parse(row.createdDate)).toLocaleDateString('ru-RU', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
            }) }}
        </template>
        <template #status-data="{ row }">
            {{ formatter.statuses[row.status] }}
        </template>
        <template #title-data="{ row }">
            <a :href="`${formatter.domain}/workgroups/group/${row.groupId}/tasks/task/view/${row.id}/`" target="_blank" class="text-primary-600 underline hover:no-underline">
                {{ row.title }}
            </a>
        </template>
    </UTable>
</template>