<template>
	<view class="wallet-page">
		

		<!-- 账户列表 -->
		<view class="accounts-section">
			<view class="accounts-list">
				<!-- 余额 -->
				<view @click="goToDetail('account')" class="account-item">
					<view class="account-left">
						<view class="account-icon balance-icon">
							<image :src="Service.GetIconImg('/static/icon/userFunc/wallet/01.png')" class="account-icon-img"  />
						</view>
						<view class="account-text">
							<text class="account-name">余额</text>
							<text class="account-desc">账户余额</text>
						</view>
					</view>
					<view class="account-right">
						<text class="account-value">¥{{ accInfo.account || '0.00' }}</text>
						<up-icon name="arrow-right" color="#C4C4C4" size="16"></up-icon>
					</view>
				</view>

				<!-- 报单商品积分 -->
				<view @click="goToDetail('customs')" class="account-item">
					<view class="account-left">
						<view class="account-icon customs-icon">
							<image :src="Service.GetIconImg('/static/icon/userFunc/wallet/02.png')" class="account-icon-img" />
						</view>
						<view class="account-text">
							<text class="account-name">报单积分</text>
							<text class="account-desc">报单商品奖励</text>
						</view>
					</view>
					<view class="account-right">
						<text class="account-value">{{ accInfo.customs || '0' }}</text>
						<up-icon name="arrow-right" color="#C4C4C4" size="16"></up-icon>
					</view>
				</view>

				<!-- 普通商品积分 -->
				<view @click="goToDetail('integral')" class="account-item">
					<view class="account-left">
						<view class="account-icon integral-icon">
							<image :src="Service.GetIconImg('/static/icon/userFunc/wallet/03.png')" class="account-icon-img"  />
						</view>
						<view class="account-text">
							<text class="account-name">普通积分</text>
							<text class="account-desc">普通商品奖励</text>
						</view>
					</view>
					<view class="account-right">
						<text class="account-value">{{ accInfo.integral || '0' }}</text>
						<up-icon name="arrow-right" color="#C4C4C4" size="16"></up-icon>
					</view>
				</view>

				<!-- 自营商品积分 -->
				<view @click="goToDetail('selfIntegral')" class="account-item">
					<view class="account-left">
						<view class="account-icon self-icon">
							<image :src="Service.GetIconImg('/static/icon/userFunc/wallet/04.png')" class="account-icon-img"  />
						</view>
						<view class="account-text">
							<text class="account-name">自营积分</text>
							<text class="account-desc">自营商品奖励</text>
						</view>
					</view>
					<view class="account-right">
						<text class="account-value">{{ accInfo.selfIntegral || '0' }}</text>
						<up-icon name="arrow-right" color="#C4C4C4" size="16"></up-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { Service } from '@/Service/Service';
	import { UserService } from '@/Service/api/UserService';
	

	// ==================== 自定义导航栏 ====================
	let statusBarHeight = ref(uni.getWindowInfo().statusBarHeight || 20)

	const accInfo = ref<any>({});
	onShow(() => {
		
		getAccInfo()
	})
	
	

	
	const getAccInfo = () => {
		UserService.GetUserAccInfo().then(res => {
			if (res.code == 0) {
				accInfo.value = res.data.accInfo;
			} else {
				Service.Msg(res.msg);
			}
		});
	};

	const goToDetail = (type : string) => {
		Service.GoPage('/pages/userFunc/walletRecord?type='+type)
		
	};

</script>

<style scoped lang="scss">
	.wallet-page {
		background-color: #F8F9FA;
	}

	/* 账户区域 */
	.accounts-section {
		background-color: #fff;
		margin: 30rpx 24rpx 24rpx;
		border-radius: 24rpx;
		padding: 32rpx 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
	}

	.accounts-list {
		display: flex;
		flex-direction: column;
	}

	.account-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 0;
	}

	.account-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.account-icon {
		width: 88rpx;
		height: 88rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.account-icon-img {
		width: 50rpx;
		height: 50rpx;
	}

	.balance-icon {
		background: linear-gradient(135deg, #F97316, #FB923C);
	}

	.customs-icon {
		background: linear-gradient(135deg, #10B981, #34D399);
	}

	.integral-icon {
		background: linear-gradient(135deg, #8B5CF6, #A78BFA);
	}

	.self-icon {
		background: linear-gradient(135deg, #F59E0B, #FBBF24);
	}



	.account-text {
		display: flex;
		flex-direction: column;
	}

	.account-name {
		font-size: 30rpx;
		color: #1A1A1A;
		font-weight: 600;
		margin-bottom: 6rpx;
	}

	.account-desc {
		font-size: 24rpx;
		color: #999;
	}

	.account-right {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.account-value {
		font-size: 32rpx;
		color: #1A1A1A;
		font-weight: 700;
	}

	// ==================== 自定义导航栏 ====================
	.custom-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background-color: #fff;
	}

	.nav-content {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16rpx;
	}

	.nav-left {
		width: 80rpx;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-center {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.nav-right {
		width: 80rpx;
	}

	.nav-placeholder {
		width: 100%;
	}
</style>