<template>
	<z-paging ref="paging" v-model="bookList" auto-show-back-to-top class="my-book-page" @query="loadBookList">
		<template #top>
			<!-- 自定义导航栏 -->
			<nav-bar :title="$t('book.myBook')"></nav-bar>
		</template>

		<!-- 充值列表 -->
		<!-- <uni-icons fontFamily="CustomFont" :size="26">{{'\uebc6'}}</uni-icons> -->
		
		<view class="recharge-record">
			<view><uni-icons type="right" size="30"></uni-icons></view>
			<view class="go-gecharge">
				立即充值
				<uni-icons type="contact" size="30"></uni-icons>
			</view>
			<view class="title">充值消费记录</view>
			<view class="recharge-record-block" v-for="(item) in 5">
				<view class="recharge-record-block-row">购买商品<text class="text">90</text></view>
				<view class="time">2025-10-20</view>
			</view>
		</view>
		<!-- <view v-if="(bookList && bookList.length > 0)" class="book-list">
      <BookCard 
        v-for="item in bookList" 
        :key="item.id"
        :book="item"
      />
    </view> -->

		<!-- 空状态 -->
		<!-- <view v-else-if="!loading && !firstLoad" class="empty-state">
      <image src="@/static/null_img.png" mode="aspectFit" />
      <text class="empty-text">{{ $t('book.nullText') }}</text>
      <wd-button type="primary" @click="goToBuy">
        {{ $t('book.choose') }}
      </wd-button>
    </view> -->
	</z-paging>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useI18n } from 'vue-i18n'
	import { bookApi } from '@/api/modules/book'
	import type { IBook } from '@/types/book'
	import BookCard from '@/components/book/BookCard.vue'

	const { t } = useI18n()
	const paging = ref<any>()

	// 数据状态
	const bookList = ref<IBook[]>([])
	const loading = ref(false)
	const firstLoad = ref(true)

	// 加载书单列表
	async function loadBookList(pageNo : number, pageSize : number) {
		loading.value = true
		try {
			const res = await bookApi.getMyBooks(pageNo, pageSize)
			paging.value.complete(res.page.records)
		} catch (error) {
			paging.value.complete(false)
			console.error('Failed to load book list:', error)
		} finally {
			firstLoad.value = false
			loading.value = false
		}
	}
</script>

<style lang="scss" scoped>
	.my-book-page {
		background: #f7faf9;
		min-height: 100vh;

		.recharge-record {
			background: #fff;
			border-radius: 15rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			// padding: 20rpx;
			margin: 20rpx;
			
			.go-gecharge{
				//height: 100rpx;
				background: linear-gradient(to right, #007bff, #17a2b8);
				font-size: 40rpx;
				font-weight: bold;
				color: #fff;
				padding: 20rpx;
				margin-bottom: 20rpx;
			}
			
			.title {
				font-size: 40rpx;
				padding-left:20rpx;
				margin-bottom: 30rpx;
				color: #007bff;
				font-weight: bold;
			}

			.recharge-record-block {
				border-bottom: 1px solid #e0e0e0;
				padding: 20rpx;
				
				.time{
					font-size: 20rpx;
				}

				.recharge-record-block-row {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					
					.text{
						color: #007bff;
					}
				}
			}
		}

	}
</style>