<script setup>
import { ref, onMounted } from 'vue';
import { useAuthStore } from '@/stores/Auth';
import { useRouter } from 'vue-router';

const authStore = useAuthStore();
const router = useRouter();
const fullResponse = ref(null);

//Метод для загрузки графиков
const loadPlans = async () => {
    const { response, error } = await authStore.getSchedulePlanList();
    if (response) {
        fullResponse.value = response.data.schedule_plans;
        console.log('Планы загружены:', response.data);
    } else {
        console.error('Ошибка при загрузке планов:', error);
    }
};
onMounted(() => {
    loadPlans();
});
</script>

<template>
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th class="text-center bg-secondary text-white align-middle">Год</th>
                            <th class="text-center bg-secondary text-white align-middle" style="width: 160px">
                                Действия
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in fullResponse" :key="item.id" class="align-middle">
                            <td class="text-center">Год: {{ item.year }}</td>
                            <td class="text-center">
                                <button
                                    type="button"
                                    class="btn btn-primary btn-sm"
                                    @click="router.push({ name: 'schedule-plan', params: { id: item.id } })"
                                >
                                    Просмотр
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
