<template>
	<view class="container">
		<view class="list">
			<view class="item" v-for="item in listData.list" :key="item.id">
				<view class="row">类型：{{ item.title }}</view>
				<view class="row">内容：{{ item.content }}</view>
				<view class="row">时间：{{ item.createTime }}</view>
				<view class="btm">+{{ item.money }}</view>
			</view>
		</view>
		<emprty-card v-if="!listData.list.length && listData.status == 'nomore'" />
		<up-loadmore :status="listData.status" />
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { queryUserMoneyDetails } from '@/api/me/me.js';

const listData = reactive({
	list: [],
	page: 1,
	size: 10,
	status: 'loading'
});

async function getList() {
	try {
		const res = await queryUserMoneyDetails({
			page: listData.page,
			limit: listData.size,
			moneyType: 2,
			viewType: 2
		});
		if (listData.page == 1) {
			listData.list = res.records;
		} else {
			listData.list.push(...res.records);
		}
		if (res.currPage >= res.totalPage) {
			listData.status = 'nomore';
		}
	} catch (error) {
		console.log(error);
	}
	setTimeout(() => {
		uni.stopPullDownRefresh();
	}, 500);
}

// 监听下拉结束
onPullDownRefresh(() => {
	listData.page = 1;
	listData.status = 'loading';
	getList();
});

onLoad((e) => {
	getList();
});
</script>

<style>
page {
	background: #f5f5f5;
}
</style>
<style scoped lang="scss">
.container {
	padding: 28upx;
}
.list {
	.item {
		padding: 28upx;
		border-radius: 20upx;
		margin-bottom: 28upx;
		background: #fff;
		.row {
			margin-bottom: 4px;
			font-size: 28upx;
		}
		.btm {
			display: flex;
			justify-content: flex-end;
			color: rgb(253, 100, 22);
			font-weight: bold;
		}
	}
}
</style>
