<template>
	<view class="container">
		<!-- 顶部筛选标签 -->
		<uv-sticky bgColor="#fff" :offsetTop="isWeChatH5 ? -50 : 0">
			<div class="tabBox">
				<div class="tabItem" :class="{selected:active==='全部'}" @click="switchTab('全部')">全部</div>
				<div class="tabItem" :class="{selected:active==='生成'}" @click="switchTab('生成')">生成</div>
				<div class="tabItem" :class="{selected:active==='充值'}" @click="switchTab('充值')">充值</div>
				<div class="tabItem" :class="{selected:active==='会员'}" @click="switchTab('会员')">会员</div>
			</div>
		</uv-sticky>
		<!-- 消费记录列表 -->
		<view class="consumption-list">
			<view class="consumption-item" v-for="item in list" :key="item.id">
				<!-- 消费项目和金额 -->
				<view class="item-header">
					<view class="item-title">{{ item.type }}</view>
					<view class="item-amount" :class="{
              positive: item.amount > 0,
              negative: item.amount < 0,
            }">
						{{ item.amount > 0 ? "+" : "-" }}¥{{
              Math.abs(item.amount).toFixed(2)
            }}
					</view>
				</view>

				<!-- 消费详情 -->
				<view class="item-details">
					<view class="detail-row">
						<text class="detail-label">消费编号:</text>
						<text class="detail-value">{{ item.order_no }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">消费时间:</text>
						<text class="detail-value">{{ item.finished_at ? dayjs(item.finished_at * 1000).format('YYYY-MM-DD HH:mm:ss') :'' }}</text>
					</view>
					<view class="balance-row">
						<view class="balance-item">
							<text class="balance-label">账前金额:</text>
							<text class="balance-value">
								¥{{ item.balance_before_cents / 100 }}
							</text>
						</view>
						<view class="balance-item">
							<text class="balance-label">账后金额:</text>
							<text class="balance-value">
								¥{{ item.balance_after_cents / 100 }}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-if="list.length === 0 && loadingStatus !== 'loading'" class="empty-state">
			<u-icon name="file-text" size="60" color="#ccc"></u-icon>
			<text class="empty-text">暂无消费记录</text>
		</view>
		<uv-load-more v-else :status="loadingStatus" />

	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from "vue";
	import {
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		useAuthStore,
		useUserStore
	} from "@/store";
	import HeaderCustom from "/components/HeaderCustom/HeaderCustom.vue";
	import RPC from "@/utils/request";
	import dayjs from "dayjs";
	
	const isWeChatH5 = ref(false)
	// #ifdef H5
	if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
		isWeChatH5.value = true
	}
	// #endif

	const authStore = useAuthStore();
	const userStore = useUserStore();
	
	const active = ref('全部')

	const list = ref([{
			id: 1,
			title: "乘客电梯图纸生成",
			amount: -30.0,
			consumptionNumber: "CONS20230516024",
			consumptionTime: "2025-05-16 14:30:22",
			beforeBalance: 1250.0,
			afterBalance: 1220.0,
			type: "generate",
		},
		{
			id: 2,
			title: "货运电梯图纸生成",
			amount: -45.0,
			consumptionNumber: "CONS20230516024",
			consumptionTime: "2025-05-16 14:30:22",
			beforeBalance: 1295.0,
			afterBalance: 1250.0,
			type: "generate",
		},
		{
			id: 3,
			title: "包年会员订阅",
			amount: -45.0,
			consumptionNumber: "CONS20230516024",
			consumptionTime: "2025-05-16 14:30:22",
			beforeBalance: 1295.0,
			afterBalance: 1250.0,
			type: "member",
		},
		{
			id: 4,
			title: "账户充值",
			amount: 1000.0,
			consumptionNumber: "CONS20230516024",
			consumptionTime: "2025-05-16 14:30:22",
			beforeBalance: 1795.0,
			afterBalance: 2795.0,
			type: "other",
		},
	]);
	
	const switchTab = (tab) => {
		list.value = []
		active.value = tab
		page.value = 1
		if(tab === '全部') {
			typeParams.value = ''
		}else {
			typeParams.value = tab
		}
		getList()
	}
	const page = ref(1)
	const typeParams = ref('')
	const loadingStatus = ref('loadmore')
	const count = ref(0);
	// 加载消费记录
	const getList = () => {
		uni.showLoading();
		RPC.post('/wallet/txns/list', {
			user_id: userStore.userInfo.id,
			page:page.value,
			size:20,
			type:typeParams.value
		}).then(res => {
			list.value = [...list.value, ...res.list];
			count.value = res.total;
			if (list.value.length >= count.value) {
			  loadingStatus.value = "nomore";
			} else {
			  loadingStatus.value = "loadmore";
			}
		}).catch(() => {
			loadingStatus.value = "loadmore";
		}).finally(() => {
			uni.hideLoading();
		})
	}


	onMounted(() => {
	
	});
	
	onReachBottom(() => {
	  if (list.value.length >= count.value || loadingStatus.value === "loading")
	    return;
	  console.log("上拉加载:");
	  loadingStatus.value = "loading";
	  page.value = ++page.value;
	  getList();
	});

	onShow(() => {
		// 页面显示时刷新数据
		list.value = []
		page.value = 1
		active.value = '全部'
		typeParams.value = ''
		getList();
	});
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		min-height: 100vh;
		background-color: #f8f8f8;
	}
	
	.tabBox {
		height: 50px;
		background-color: #fff;
		display: flex;
	
		.tabItem {
			height: 100%;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
	
			&.selected {
				color: #5479ED;
				border-bottom: 1px solid #5479ED;
			}
		}
	}

	.consumption-list {
		padding: 16px;

		.consumption-item {
			background: white;
			border-radius: 12px;
			padding: 16px;
			margin-bottom: 12px;

			.item-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12px;

				.item-title {
					font-size: 16px;
					color: #333;
					font-weight: 500;
				}

				.item-amount {
					font-size: 16px;
					font-weight: bold;

					&.positive {
						color: #52c41a;
					}

					&.negative {
						color: #ff4d4f;
					}
				}
			}

			.item-details {
				.detail-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 6px;

					.detail-label {
						color: #999;
						font-size: 13px;
					}

					.detail-value {
						color: #666;
						font-size: 13px;
					}
				}

				.balance-row {
					display: flex;
					justify-content: space-between;
					margin-top: 8px;

					.balance-item {
						display: flex;
						align-items: center;
						gap: 4px;

						.balance-label {
							color: #999;
							font-size: 13px;
						}

						.balance-value {
							color: #333;
							font-size: 13px;
							font-weight: 500;
						}
					}
				}
			}
		}
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80px 20px;

		.empty-text {
			color: #999;
			font-size: 14px;
			margin-top: 16px;
		}
	}

</style>