<template>
    <ion-page>
        <ion-header>
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
                </ion-buttons>
                <ion-title>消費記錄</ion-title>
            </ion-toolbar>
        </ion-header>
        <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">
                <div class="py-[14px] px-[18px]">
                    <van-list
                        class="list"
                        v-model:loading="loading"
                        :finished="finished"
                        :finished-text="!empty ? $t('loadingFinished') : ''"
                        @load="getData"
                        :immediate-check="false"
                        ref="listRef"
                    >
                        <div
                            v-for="(item, index) in list"
                            :key="index"
                            class="wallet bg-[#20223C] flex h-[86px] items-center px-[14px] rounded-lg"
                        >
                            <van-image width="90" height="58" fit="cover" radius="6" :src="getImg(item.series)" />
                            <div class="flex-1 ml-[12px] h-[58px] flex flex-col justify-between overflow-hidden">
                                <div class="text-sm text-white van-ellipsis">
                                    {{ item.series ? item.series.title : '' }}
                                </div>
                                <div class="text-xs text-[#797A8A]">{{ getTime(item.updatedAt) }}</div>
                            </div>
                            <div class="h-[58px] flex flex-col justify-between items-end ml-[12px]">
                                <div class="text-[#00FFE4] text-xs">兑换第{{ item.episode.episodeNum }}集</div>

                                <div class="text-[18px] text-white AlimamaShuHeiTi">-{{ item.price }}</div>
                            </div>
                        </div>
                    </van-list>

                    <van-empty v-if="empty" :image="emptyImg" description="暂无记录" />
                </div>
            </div>
        </ion-content>
    </ion-page>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import useList from '../plugins/list'
import resolveUrl from 'resolve-url'
import { format } from 'date-fns'
import emptyImg from '../assets/png-kong.png'
const fileURL = import.meta.env.VITE_HTTP_FILE_URL

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

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

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

getData(true)

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

function getTime(day) {
    return format(new Date(day), 'MM-dd hh:mm', new Date())
}
</script>

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

.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;
    }
}

.wallet + .wallet {
    margin-top: 14px;
}

.h-\[86px\] {
    height: 86px;
}
.h-\[58px\] {
    height: 58px;
}
</style>
