<script>

import {ref} from "vue";
import {useServicesList} from "../../stores/services_list.js";

export default {
    name: "ServicesLinks",
    data: () => ({
        links: ref([]),
        servicesListStore: useServicesList(),
        fetching: true,
        windowHeight: document.documentElement.clientHeight,
        windowWidth: document.documentElement.clientWidth,
        isWide: window.innerWidth >= 654
    }),
    mounted() {
        this.fetching = true;
        this.servicesListStore.getList().then(()=>{
            this.links = this.servicesListStore.links;
            this.fetching = false;
        });
        this.myEventHandler();
        window.addEventListener("resize", this.myEventHandler, { passive: true });
    },
    methods: {
        myEventHandler(e) {
            this.windowHeight = document.documentElement.clientHeight;
            this.windowWidth = document.documentElement.clientWidth;
            this.isWide = this.windowWidth >= 654;
        }
    },
    created() {
        window.addEventListener("resize", this.myEventHandler);
    },
}
</script>

<template>
    <v-app>
        <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
            <v-sheet class="bg-grey-darken-3 mt-5 mb-5 rounded-lg w-75 pl-3 pr-3">
                <p class="text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 text-center pt-3">Список сервисов и страниц</p>
                <v-skeleton-loader v-if="fetching" class="bg-grey-darken-3" type="card"/>
                <div class="pt-5 h-100" v-else>
                    <v-row class="ma-0" v-for="n in Math.ceil(links.length / 3)" v-if="isWide">
                        <v-col class="d-flex justify-center align-center w-33" v-for="j in 3">
                            <v-btn v-if="links[(n - 1) * 3 + j - 1]" class="w-100 h-100 pa-5 text-white mt-5 mb-5 bg-btn text-center" :href="links[(n - 1) * 3 + j - 1].link" target="_blank">
                                <template v-slot:default>
                                    <span class="txt-wrap">{{ links[(n - 1) * 3 + j - 1].name }}</span>
                                </template>
                            </v-btn>
                        </v-col>
                    </v-row>
                    <div v-else class="ma-0">
                        <v-btn class="w-100 h-100 pa-5 text-white mt-5 mb-5 bg-btn text-center" v-for="link in links" :href="link.link" target="_blank">
                            <template v-slot:default>
                                <span class="txt-wrap">{{ link.name }}</span>
                            </template>
                        </v-btn>
                    </div>
                </div>
            </v-sheet>
        </v-sheet>
    </v-app>
</template>

<style scoped>
.bg-gradient {
    --s: 50px; /* control the size */

    --c: #E08E79 0 25%,#774F38 0 50%,#0000 0;
    background:
        conic-gradient(from 180deg,var(--c))
        0/var(--s) var(--s),
        repeating-conic-gradient(from 90deg,var(--c))
        0/calc(3*var(--s)) calc(3*var(--s))
}

.bg-btn {
    background-color: #E08E79
}

.txt-wrap {
    white-space: wrap!important;
}
</style>
