<template>
	<view>
		<view class="header-wrap">
			<view class="item">
				<text class="t">{{ listData.nickName }} {{ listData.phone }}</text>
			</view>
			<view class="item">
				<text class="t">当前积分 {{ listData.point }}</text>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="item in listData.list" :key="item.id">
				<view class="top">
					<text class="t">{{ item.content }}</text>
				</view>
				<view class="user-info">
					<view class="left">
						<view class="info">
							<text class="t1">{{ item.shopName }}</text>
							<text class="t2">{{ item.createTime }}</text>
						</view>
					</view>
					<view class="right">
						<text class="t1">{{ item.floatPoints }}</text>
						<text class="t2">变动后积分：{{ item.balancePoints }}</text>
					</view>
				</view>
			</view>
			<u-loadmore :status="listData.status"></u-loadmore>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { pointUserRecord } from '@/http/api/market/point.js';

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

onReachBottom(() => {
	if (listData.status != 'nomore') {
		listData.page++;
		pointUserRecordAjax();
	}
});

// 获取用户所有门店下积分列表
async function pointUserRecordAjax() {
	try {
		const res = await pointUserRecord({
			page: listData.page,
			size: listData.size,
			id: listData.id
		});

		if (listData.page == 1) {
			listData.list = res.records;
		} else {
			listData.list.push(...res.records);
		}

		if (res.pageNumber >= res.totalPage) {
			listData.status = 'nomore';
		}
	} catch (error) {
		console.log(error);
	}
}

onLoad((options) => {
	listData.id = options.id;
	listData.nickName = options.nickName;
	listData.phone = options.phone;
	listData.point = options.point;
	pointUserRecordAjax();
});
</script>

<style>
page {
	background-color: #f8f8f8;
}
</style>
<style scoped lang="scss">
.header-wrap {
	width: 100%;
	height: 53px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	background-color: #fff;
	padding: 0 28upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.item {
		flex: 1;
		&:last-child {
			display: flex;
			justify-content: flex-end;
		}
		.t {
			font-size: 28upx;
			color: #333;
		}
	}
}
.list {
	padding: calc(53px + 28upx) 28upx 28upx;
	.item {
		background-color: #fff;
		border-radius: 20upx;
		padding: 28upx;
		&:not(:first-child) {
			margin-top: 28upx;
		}
		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.t {
				font-size: 32upx;
				color: #333;
			}
		}
		.user-info {
			display: flex;
			padding: 28upx 0;
			.left {
				flex: 1;
				display: flex;
				.info {
					flex: 1;
					display: flex;
					justify-content: center;
					flex-direction: column;
					.t1 {
						font-size: 28upx;
						color: #333;
					}
					.t2 {
						font-size: 24upx;
						color: #666;
					}
				}
			}
			.right {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.t1 {
					font-size: 32upx;
					color: #333;
					font-weight: bold;
				}
				.t2 {
					color: #666;
					font-size: 24upx;
				}
			}
		}
		.footer-wrap {
			display: flex;
			justify-content: flex-end;
		}
	}
}
</style>
