<template>
    <ion-page>
        <ion-content :scrollEvents="true" fullscreen class="home relative">
            <img src="@/assets/png-shouye-bg.png" class="top-bg !absolute w-full h-[200px] top-0 left-0 !z-0" alt="" />
            <div class="title p-[18px] text-white text-[26px] AlimamaShuHeiTi">{{ $t('zouma') }}.</div>

            <van-swipe ref="swiperRef" class="my-swipe" :width="315" touchable :stop-propagation="false">
                <van-swipe-item
                    v-for="(item, index) in banners"
                    :key="index"
                    class="pl-[18px]"
                    @click="bannerClick(item)"
                >
                    <van-image width="300" height="180" :radius="18" :src="item.img" fit="cover" />
                </van-swipe-item>
            </van-swipe>

            <div class="py-6 px-[18px]" v-if="seriesList.length > 0">
                <div class="news-title text-white text-lg AlimamaShuHeiTi relative">
                    <span class="z-[1] relative">{{ $t('home.new') }}</span>
                    <img
                        class="w-78px] h-[16px] absolute bottom-0 left-0 z-0"
                        src="@/assets/png-xiantiao1.png"
                        alt=""
                    />
                </div>
                <div class="news-list">
                    <video-small v-for="(item, index) in seriesList" :key="index" :info="item"></video-small>
                </div>
            </div>

            <div class="hot" v-if="hotList.length > 0">
                <div class="hot-title">{{ $t('home.hot') }}</div>
                <img src="@/assets/hotImg.png" alt="" class="hot-img" />
                <div class="hot-list">
                    <video-line v-for="(item, index) in hotList" :key="index" :info="item"></video-line>
                </div>
                <img src="@/assets/pbg-bg.png" alt="" class="hot-bg" />
            </div>

            <div class="py-6 px-[18px]" v-for="(item, index) in categories" :key="index">
                <div class="news-title text-white text-lg AlimamaShuHeiTi relative">
                    <span class="z-[1] relative">{{ item.name }}</span>
                    <img
                        class="w-[44px] h-[16px] absolute bottom-0 left-0 z-0"
                        src="@/assets/png-xiantiao1.png"
                        alt=""
                    />
                </div>
                <div class="news-list">
                    <video-small v-for="(data, dataIndex) in item.datas" :key="dataIndex" :info="data"></video-small>
                </div>
            </div>
            <div class="py-6 px-[18px]">
                <div class="news-title text-white text-lg AlimamaShuHeiTi relative">
                    <span class="z-[1] relative">{{ $t('home.recommend') }}</span>
                    <img
                        class="w-[78px] h-[16px] absolute bottom-0 left-0 z-0"
                        src="@/assets/png-xiantiao1.png"
                        alt=""
                    />
                </div>
                <van-list
                    class="perfect-list"
                    v-model:loading="loading"
                    :finished="finished"
                    :finished-text="$t('loadingFinished')"
                    @load="getData"
                    :immediate-check="false"
                    ref="listRef"
                >
                    <video-small v-for="(item, index) in allList" :key="index" :info="item"></video-small>
                </van-list>
            </div>
        </ion-content>
    </ion-page>
</template>

<script setup>
import VideoSmall from '../components/VideoSmall.vue'
import VideoLine from '../components/VideoLine.vue'
import { http } from '@/plugins/http'
import { ref, onMounted, nextTick } from 'vue'
import useList from '../plugins/list'
import resolveUrl from 'resolve-url'
import { useRouter } from 'vue-router'
const fileURL = import.meta.env.VITE_HTTP_FILE_URL

const seriesList = ref([])
const hotList = ref([])

const { empty, size, loading, finished, list: allList, getData } = useList('/api/series', () => {}, 'get')
getData(true)

async function getSeries(data = {}) {
    return http.get('/api/series', data).then(res => {
        return Promise.resolve(res.data)
    })
}

const categories = ref([])
http.get('/api/categories').then(res => {
    res.data.forEach(async item => {
        let data = await getSeries({
            categories: item.id
        })
        if (item.id === 6) {
            seriesList.value = data
        } else if (item.id === 5) {
            hotList.value = data.slice(0, 3)
        } else {
            categories.value.push({
                ...item,
                datas: data
            })
        }
    })
})

const banners = ref([])
http.get('/api/banners').then(res => {
    banners.value = res.data
})

function getImg(series) {
    if (series) {
        return resolveUrl(fileURL, series.cover)
    } else {
        return ''
    }
}

const swiperRef = ref(null)

const router = useRouter()
function bannerClick(info) {
    if (info.link) {
        router.push(info.link)
    }
}
</script>

<style lang="less" scoped>
.home > * {
    z-index: 1;
    position: relative;
}

.news-list {
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    padding-top: 14px;
    .video-info + .video-info {
        margin-left: 14px;
    }
}

.perfect-list {
    // padding-top: 14px;
    .video-info + .video-info {
        margin-left: 14px;
    }
    .video-info {
        &:nth-child(3n + 1) {
            margin-left: 0;
        }
        &:nth-child(n + 3) {
            margin-top: 14px;
        }
    }
}

.hot {
    padding: 0 18px;
    height: 306px;
    position: relative;
    .hot-title {
        font-size: 18px;
        font-weight: 600;
        color: #00ffe4;
        line-height: 18px;
        // background: linear-gradient(133deg, #c1ff8f 0%, #00ffe4 100%);
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
        position: relative;
        z-index: 1;
        padding: 16px 14px;
    }

    .hot-bg {
        height: 306px;
        width: calc(100vw - 36px);
        position: absolute;
        left: 18px;
        top: 0;
        z-index: 0;
    }

    .hot-img {
        position: absolute;
        z-index: 1;
        right: 18px;
        top: 0;
        width: 160px;
        height: 50px;
    }

    .hot-list {
        position: relative;
        z-index: 1;
        padding: 0 14px 14px;

        .video-info + .video-info {
            margin-top: 14px;
        }
    }
}
</style>
