<template>
    <ion-page>
        <ion-content class="watching">
            <img src="@/assets/png-zhuiju-bg.png" class="top-bg !absolute w-full h-[200px] top-0 left-0 !z-0" alt="" />
            <div class="watching-content">
                <van-sticky @change="changeSticky">
                    <van-nav-bar
                        :class="{ isFixed: isFixed }"
                        title="觀看歷史"
                        left-text=""
                        left-arrow
                        @click-left="back"
                    />
                </van-sticky>

                <div class="pb-6 px-[18px]">
                    <van-empty v-if="empty" :image="emptyImg" description="暂无记录" />
                    <van-list
                        class="hot-list"
                        v-model:loading="loading"
                        :finished="finished"
                        :finished-text="!empty ? $t('loadingFinished') : ''"
                        @load="getData"
                        :immediate-check="false"
                        ref="listRef"
                    >
                        <video-line
                            v-for="(item, index) in list"
                            :key="index"
                            :info="item.series"
                            history
                            :episodeNum="item.episode.episodeNum"
                        ></video-line>
                    </van-list>
                </div>
            </div>
        </ion-content>
    </ion-page>
</template>
<script setup>
import VideoLine from '../components/VideoLine.vue'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { http } from '@/plugins/http'
import { onIonViewWillEnter } from '@ionic/vue'
import useList from '../plugins/list'
import emptyImg from '../assets/png-kong.png'

const router = useRouter()
function back() {
    router.back()
}

const isFixed = ref(false)
function changeSticky(fixed) {
    isFixed.value = fixed
}

onIonViewWillEnter(() => {
    getData(true)
})

const { empty, size, loading, finished, list, getData } = useList('/api/playHistories', () => {}, 'get')
</script>

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

.hot-list {
    padding: 14px 0;

    .video-info + .video-info {
        margin-top: 14px;
    }
}

.van-nav-bar {
    --van-nav-bar-background: transparent;
    --van-border-width: 0;
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-icon-color: #fff;

    &.isFixed {
        --van-nav-bar-background: #11131e;
    }
}
</style>
