<template>
	<view class="balance-page">
		<!-- 顶部余额区域 -->
		<view class="balance-header">
			<view class="header-bg"></view>
			<view class="balance-info">
				<text class="balance-label">
					{{  getName(type)  }} </text>
				<view class="balance-value-wrapper">
					<text v-if="type=='account'" class="currency">¥</text>
					<text class="balance-value">{{ getAmount(type) }}</text>
				</view>

				<view class="balance-actions" v-if="type=='account'">
					<view class="action-btn" @click="goWithdraw">
						<text class="action-text">提现</text>
					</view>
					<view class="action-btn" @click="goTransfer">
						<text class="action-text">转账</text>
					</view>
				</view>

			</view>
		</view>

		<!-- 提现记录入口 -->
		<view v-if="type=='account'" class="entry-row" @click="goWithdrawList">
			<text class="entry-label">提现记录</text>
			<text class="entry-arrow">›</text>
		</view>

		<!-- 余额明细 -->
		<view class="detail-section">
			<view class="section-header">
				<text class="section-title">明细</text>
				<view class="filter-tabs">
					<text class="filter-tab" v-for="(tab, index) in filterTabs" :key="index"
						:class="{ active: currentFilter === index }" @click="switchFilter(index)">{{ tab.name }}</text>
				</view>
			</view>
			<view class="detail-list">
				<view v-if="detailList.length>0" class="detail-item" v-for="(item, index) in detailList" :key="index">
					<view class="detail-icon">
						<image :src="Service.GetIconImg('/static/icon/userFunc/money.png')" 
							style="width: 100% ;  height: 100%;" />
					</view>
					<view class="detail-info">
						<text class="detail-title">{{ item.name }}</text>
						<text class="detail-desc">{{ item.remark }}</text>
						<text class="detail-time">{{ Service.formatDate(item.addTime,1) }}</text>
					</view>
					<view class="detail-amount" :class="item.code === '收入' ? 'income' : 'expense'">
						{{ item.code === '收入'  ? '+' : '-' }} <text v-if="type=='account'">¥</text> {{ item.amount }}
					</view>
				</view>
				<view v-else class=""
					style="text-align: center; font-size: 32rpx; font-weight: bold; padding: 20rpx; border-radius: 10rpx; background-color: #f6f6f6; ">
					暂无记录
				</view>
			</view>
		</view>
		<up-loadmore v-if="detailList.length>0" :status="status" />
	</view>
</template>

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

	const selectedPackage = ref(1);
	const currentFilter = ref(0);

	const filterTabs = ref([
		{ name: '全部' },
		{ name: '支出' },
		{ name: '收入' }

	]);


	const detailList = ref<Array<any>>([
	]);

	let type = ref('account')
	let accInfo = ref<any>({})
	let page = ref(1)
	let status = ref('nomore')
	let shareAcc=ref(0)
	onLoad((data : any) => {
		type.value = data.type
		
		if (data.type) {
			uni.setNavigationBarTitle({
				title: getTitile(data.type)
			})
		}
		
	})
	
	onShow(()=>{
		getData()
		getAccInfo()
	})

	onReachBottom(() => {
		getList()
	})


	const getAmount = (name : any) => {


		if (name == 'account') {
			return accInfo.value.account
		} else if (name == 'customs') {
			return accInfo.value.customs
		}
		else if (name == 'integral') {
			return accInfo.value.integral
		} else if (name == 'selfIntegral') {
			return accInfo.value.selfIntegral
		}
	}

	const getTitile = (name : any) => {
		if (name == 'account') {
			return '余额明细'
		} else if (name == 'customs') {
			return '报单积分明细'
		}else if (name == 'integral') {
			return '普通积分明细'
		}
		else if (name == 'selfIntegral') {
			return '自营积分明细'
		}
	}
	
	const getName=(name:any)=>{
		if (name == 'account') {
			return '余额'
		} else if (name == 'customs') {
			return '报单积分'
		}else if (name == 'integral') {
			return '普通积分'
		}
		else if (name == 'selfIntegral') {
			return '自营积分'
		}
	}
	
	
	const getAccInfo = () => {
		UserService.GetUserAccInfo().then(res => {
			if (res.code == 0) {
				accInfo.value = res.data.accInfo
				shareAcc.value=res.data.shareAcc
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const getData = () => {
		detailList.value = []
		page.value = 1
		status.value = 'loadmore'
		getList()
	}

	const getList = () => {
		if (status.value == 'loading' || status.value == 'nomore') {
			return
		}
		status.value = 'loading'
		UserService.GetUserAccLog(type.value, currentFilter.value == 0 ? '' : String(currentFilter.value - 1), page.value).then(res => {
			if (res.code == 0) {
				detailList.value = [...detailList.value, ...res.data.list]
				status.value = res.data.list.length == 10 ? 'loadmore' : 'nomore'
				page.value++
			} else {
				Service.Msg(res.msg)
			}
		})
	}



	const switchFilter = (index : number) => {
		currentFilter.value = index;
		getData()
	};

	const goWithdraw = () => {
		Service.GoPage('/pages/userFunc/withDrow')
	}

	const goTransfer = () => {
		Service.GoPage('/pages/userFunc/transfer?accType=' + type.value)
	}

	const goWithdrawList = () => {
		Service.GoPage('/pages/userFunc/withdrowList')
	}

</script>

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

	/* 顶部余额区域 */
	.balance-header {
		background: linear-gradient(135deg, #F97316, #FB923C);
		padding: 40rpx 30rpx 60rpx;
		position: relative;
		overflow: hidden;
		text-align: center;
	}

	.header-bg {
		position: absolute;
		top: -100rpx;
		right: -100rpx;
		width: 400rpx;
		height: 400rpx;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
	}

	.balance-info {
		position: relative;
		z-index: 1;
	}

	.balance-label {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);
		display: block;
		margin-bottom: 10rpx;
	}

	.balance-value-wrapper {
		display: flex;
		align-items: baseline;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.currency {
		font-size: 32rpx;
		color: #fff;
		margin-right: 4rpx;
	}

	.balance-value {
		font-size: 72rpx;
		font-weight: bold;
		color: #fff;
	}

	.balance-actions {
		display: flex;
		justify-content: center;
		gap: 30rpx;
	}

	.action-btn {
		min-width: 160rpx;
		padding: 16rpx 40rpx;
		border-radius: 40rpx;
		background-color: rgba(255, 255, 255, 0.25);
		border: 2rpx solid rgba(255, 255, 255, 0.5);
		text-align: center;
		backdrop-filter: blur(10rpx);
		transition: all 0.2s;
	}

	.action-btn:active {
		background-color: rgba(255, 255, 255, 0.4);
		transform: scale(0.95);
	}

	.action-text {
		font-size: 26rpx;
		font-weight: 500;
		color: #fff;
		letter-spacing: 4rpx;
	}

	/* 提现记录入口 */
	.entry-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 20rpx 0;
		padding: 24rpx 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.entry-row:active {
		background-color: #f5f5f5;
	}

	.entry-label {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
	}

	.entry-arrow {
		font-size: 36rpx;
		color: #ccc;
		font-weight: bold;
	}

	/* 通用区域样式 */
	.recharge-section,
	.detail-section,
	.stats-section {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.filter-tabs {
		display: flex;
		gap: 30rpx;
	}

	.filter-tab {
		font-size: 26rpx;
		color: #999;
		padding: 8rpx 0;
		position: relative;

		&.active {
			color: #F97316;
			font-weight: 500;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 4rpx;
				background-color: #F97316;
				border-radius: 2rpx;
			}
		}
	}

	/* 充值套餐 */
	.recharge-packages {
		display: flex;
		flex-wrap: wrap;
		margin: -10rpx;
		margin-bottom: 30rpx;
	}

	.package-item {
		width: calc(50% - 20rpx);
		margin: 10rpx;
		padding: 30rpx 20rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 16rpx;
		position: relative;
		box-sizing: border-box;

		&.active {
			border-color: #F97316;
			background-color: #FFF7ED;
		}
	}

	.package-tag {
		position: absolute;
		top: 0;
		right: 0;
		background: linear-gradient(135deg, #F97316, #FB923C);
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 16rpx;
		border-radius: 0 16rpx 0 16rpx;
	}

	.package-info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.package-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.package-price {
		display: flex;
		align-items: baseline;
		margin-bottom: 8rpx;
	}

	.price {
		font-size: 36rpx;
		color: #F97316;
		font-weight: bold;
	}

	.original-price {
		font-size: 22rpx;
		color: #999;
		text-decoration: line-through;
		margin-left: 8rpx;
	}

	.package-bonus {
		font-size: 22rpx;
		color: #F97316;
		background-color: #FFF7ED;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
	}

	.package-check {
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		width: 40rpx;
		height: 40rpx;
		background: linear-gradient(135deg, #F97316, #FB923C);
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: bold;
	}

	.recharge-btn {
		background: linear-gradient(135deg, #F97316, #FB923C);
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		padding: 24rpx;
		border-radius: 30rpx;
	}

	/* 余额明细 */
	.detail-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.detail-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #F9FAFB;
		border-radius: 12rpx;
	}

	.detail-icon {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.icon-text {
		font-size: 40rpx;
	}

	.detail-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.detail-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 6rpx;
	}

	.detail-desc {
		font-size: 22rpx;
		color: #999;
		margin-bottom: 4rpx;
	}

	.detail-time {
		font-size: 22rpx;
		color: #999;
	}

	.detail-amount {
		font-size: 32rpx;
		font-weight: bold;

		&.income {
			color: #10B981;
		}

		&.expense {
			color: #F97316;
		}
	}

	/* 收支统计 */
	.stats-cards {
		display: flex;
		gap: 20rpx;
	}

	.stat-card {
		flex: 1;
		padding: 30rpx;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		&.income {
			background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
		}

		&.expense {
			background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
		}
	}

	.stat-label {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.stat-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
</style>