<template>
	<z-paging ref="paging" v-model="bookList" auto-show-back-to-top class="my-book-page" @query="hufenList"
		:default-page-size="10">
		<template #top>
			<!-- 自定义导航栏 -->
			<nav-bar :title="$t('user.hufenRecord')"></nav-bar>
		</template>
		<view class="recharge-record" v-if="(bookList && bookList.length > 0)">
			<view class="go-gecharge">{{hufenData.nameValue}} {{$t('user.hufenRecord')}}</view>
			<view class="recharge-record-block" v-for="(item, index) in bookList" :key="index">
				<view class="recharge-record-block-row">{{item.createTime}}<text class="text">{{item.score}}</text>
				</view>
				<view class="time">{{item.detail}}</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useI18n } from 'vue-i18n'
	import { useUserStore } from '@/stores/user'
	import { getUserContributionByTypeList } from '@/api/modules/user'
	import { copyToClipboard } from '@/utils/index'

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

	// 数据状态
	const bookList = ref([])
	const loading = ref(false)
	const firstLoad = ref(true)
	const hufenData = ref('')

	// 湖分记录
	async function hufenList(pageNo : number, pageSize : number) {
		loading.value = true
		try {
			const res = await getUserContributionByTypeList(pageNo, pageSize, hufenData.value.type)
			console.log(res, 'res');
			paging.value.complete(res.list.records)
		} catch (error) {
			paging.value.complete(false)
			console.error('Failed to load book list:', error)
		} finally {
			firstLoad.value = false
			loading.value = false
		}
	}
	onLoad((options) => {
		hufenData.value = options
		console.log(hufenData);
	});
</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 {
				text-align: center;
				background: linear-gradient(to right, #007bff, #17a2b8);
				font-size: 30rpx;
				font-weight: bold;
				color: #fff;
				padding: 20rpx;
				margin-bottom: 20rpx;
			}

			.title {
				font-size: 30rpx;
				padding-left: 20rpx;
				margin-bottom: 30rpx;
				color: #007bff;
				font-weight: bold;
			}

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

				.time {
					font-size: 24rpx;
					margin-bottom: 20rpx;
					color: #343434
				}

				.recharge-record-block-row {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					// font-weight: 700;
					color: #909090;

					.text {
						color: #007bff;
					}
				}
			}
		}
	}
</style>