<template>
    <v-sheet class="mt-5 mb-5 rounded-lg w-75">
        <p class="text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 ma-5">Расписание стримов</p>
        <v-skeleton-loader v-if="fetching" type="text" />
        <p v-else class="ma-5 text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5"> {{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
        <ScheduleTable/>
        <p class="text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 ma-5">Ссылочки</p>
        <Links/>
    </v-sheet>
</template>

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

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

<style scoped>

@keyframes gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

</style>
