<script>
    import {useScheduleStore} from '../../stores/schedule.js';
    import {ref} from "vue";

    export default {
        name: "ScheduleTable",
        data: () => ({
            schedules: ref(),
            scheduleStore: useScheduleStore(),
            fetching: true
        }),
        props: {
            isWide: Boolean
        },
        methods: {
            parseDate(date){
                let dateArr = date.split("-");
                return dateArr[2] + "." + dateArr[1];
            }
        },
        mounted() {
            this.scheduleStore.getSchedules().then(()=>{
                this.schedules = this.scheduleStore.schedules;
                this.fetching = false;
            });
        }
    }
</script>

<template>
    <div class="w-100 d-flex justify-center">
        <v-skeleton-loader v-if="fetching" type="table"/>
        <v-table v-else class="text-xl-h5 text-lg-h5 text-md-h5 text-sm-h5  text-body-2" :class="isWide ? 'w-66' : 'w-100'">
            <tbody>
            <tr v-for="schedule in schedules">
                <td>{{ parseDate(schedule.current_date) }} {{ schedule.weekday_name }} {{ schedule.stream_time }}</td>
                <td>{{ schedule.name }}</td>
            </tr>
            </tbody>
        </v-table>
    </div>
</template>

<style scoped>

</style>
