<template>
    <ion-page>
        <ion-content :scrollEvents="true" fullscreen 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">
                <div class="title p-[18px] text-white text-[26px] AlimamaShuHeiTi">{{ $t('watching.watching') }}</div>
                <div class="pb-6 px-[18px]" v-if="histories.length > 0">
                    <div class="news-title text-white text-lg AlimamaShuHeiTi relative">
                        <span class="z-[1] relative">{{ $t('watching.recently') }}</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 histories"
                            :key="index"
                            :info="item.series"
                            history
                            :episodeNum="item.episode.episodeNum"
                        ></video-small>
                    </div>
                </div>

                <div class="pb-6 px-[18px]">
                    <div class="news-title text-white text-lg AlimamaShuHeiTi relative">
                        <span class="z-[1] relative">{{ $t('watching.mine') }}</span>
                        <img
                            class="w-[78px] h-[16px] absolute bottom-0 left-0 z-0"
                            src="@/assets/png-xiantiao1.png"
                            alt=""
                        />
                    </div>
                    <van-empty v-if="histories.length == 0 && !loading" :image="emptyImg" description="暂无记录" />

                    <div class="hot-list" v-else>
                        <video-line
                            v-for="(item, index) in histories"
                            :key="index"
                            :info="item.series"
                            history
                            :episodeNum="item.episode.episodeNum"
                        ></video-line>
                    </div>
                </div></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 } from 'vue'
import { onIonViewWillEnter } from '@ionic/vue'
import emptyImg from '../assets/png-kong.png'

const histories = ref([])
const loading = ref(true)

function init() {
    http.get('/api/playHistories').then(res => {
        histories.value = res.data
        loading.value = false
    })
}

init()
onIonViewWillEnter(() => {
    init()
})
</script>

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

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

.hot-list {
    padding: 14px 0;

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