<template>
    <ion-page>
        <ion-content :fullscreen="true">
            <div class="relative">
                <VueSwiper
                    :initialSlide="0"
                    :slides-per-view="1"
                    :space-between="0"
                    :loop="true"
                    :pagination="true"
                    :autoplay="{
                        delay: 2500,
                    }"
                    @swiper="onSwiper"
                    :modules="[Navigation, Pagination, Scrollbar, A11y]"
                >
                    <swiper-slide
                        class="swiper-slide"
                        v-for="item in banners"
                        :key="item.id"
                    >
                        <img :src="item.img" />
                        <div class="mask"></div>
                        <ion-button class="btn-play" @click="detail(item)">
                            Play Now
                        </ion-button>
                    </swiper-slide>
                </VueSwiper>
                <div
                    class="absolute top-4 left-4 leading-1 text-xl z-10"
                    style="
                        font-family: Lalezar;
                        margin-top: var(--ion-safe-area-top);
                    "
                >
                    <div class="inline-block">
                        <img
                            class="h-[20px] relative top-[3px] left-[4px]"
                            src="@/assets/logo.svg"
                        />
                    </div>
                    reeShort
                </div>
            </div>
            <div class="py-6">
                <div
                    class="mt-12 first:mt-0"
                    v-for="category in categories"
                    :key="category.id"
                >
                    <div class="px-4">
                        <div v-if="category.id" class="m-0 text-xl font-bold">
                            {{ category.name }}
                        </div>
                        <ion-skeleton-text
                            v-else
                            :animated="true"
                            class="text-xl"
                            style="width: 110px"
                        ></ion-skeleton-text>
                        <div
                            v-if="category.desc"
                            class="text-xs text-neutral-300 mt-1 mb-0"
                        >
                            {{ category.desc }}
                        </div>
                        <ion-skeleton-text
                            v-if="!category.id"
                            :animated="true"
                            class="text-xs mt-2"
                            style="width: 200px"
                        ></ion-skeleton-text>
                    </div>
                    <div
                        v-if="category.series"
                        class="flex overflow-x-scroll mt-2 px-4"
                    >
                        <SeriesItem
                            class="mr-2"
                            v-for="item in category.series"
                            :key="item.id"
                            :series="item"
                        >
                        </SeriesItem>
                    </div>
                    <div v-else class="flex overflow-x-scroll mt-2 px-4">
                        <SeriesItem class="mr-2" v-for="n in 4" :key="n">
                        </SeriesItem>
                    </div>
                </div>
            </div>
        </ion-content>
    </ion-page>
</template>

<script setup lang="ts">
import {
    IonPage,
    IonContent,
    IonButton,
    IonSkeletonText,
    IonThumbnail,
} from "@ionic/vue";
import { Swiper as VueSwiper, SwiperSlide } from "swiper/vue";
import { Swiper } from "swiper";
import { Navigation, Pagination, Scrollbar, A11y } from "swiper/modules";
import http from "@/plugins/http";
import { Ref, nextTick, onMounted, ref } from "vue";
import SeriesItem from "@/components/SeriesItem.vue";
import router from "@/router";

const swiper = ref<Swiper | null>(null);
const onSwiper = (sw: Swiper) => {
    window.swiper = swiper.value = sw;
};
const banners: Ref<any[]> = ref([]);

const categories: Ref<any[]> = ref([{}, {}]);

onMounted(() => {
    http.get("/banners").then((res) => {
        banners.value = res.data;
        nextTick(() => {
            swiper.value?.update();
            swiper.value?.slideReset();
            swiper.value?.slideTo(0);
        });
    });
    http.get("/categories", { order: "sort" }).then((res) => {
        categories.value = res.data;
        categories.value.forEach((item) => {
            http.get("/series", { categories: item.id }).then((res) => {
                item.series = res.data;
            });
        });
    });
});
function detail(item: any) {
    console.log(item);
    router.push({ path: item.link });
}
</script>
<style lang="less" scoped>
.swiper-slide {
    height: 498px;
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .mask {
        position: absolute;
        left: 0px;
        right: 0;
        bottom: 0;
        height: 80px;
        opacity: 1;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 100%
        );
    }
    .btn-play {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 18px;
        width: 167px;
        height: 50px;
        margin: auto;
        font-weight: bold;
        --color: var(--ion-color-tertiary);
    }
}
:deep(.swiper-pagination) {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    .swiper-pagination-bullet {
        width: 42px;
        height: 2px;
        border-radius: 1px;
        background: #333333;
        margin: 0 2.5px;
    }
    .swiper-pagination-bullet-active {
        background: #cccccc;
    }
}
</style>
