<template>
	<view class="my-account-page">
		<!-- 顶部导航栏 -->
		 <view class="navbox">
			<view class="status_bar"></view>
			<uni-nav-bar
			left-icon="left"
			title="我的账户"
			@clickLeft="goBack"
			color="#8B2316"
			:border="false"
			backgroundColor="#eeeeee"
		></uni-nav-bar>
		 </view>

		<!-- 账户余额区域 -->
		<view class="account-summary">
			<view class="profile-section">
				<image class="profile-avatar" :src="avatar" mode="aspectFill"></image>
			</view>
			<text class="balance-label">账户余额(元)</text>
			<text class="balance-amount">{{ (accountBalance/100).toFixed(2) }}</text>
			
			<!-- 账户信息详情 -->
			<!-- <view class="account-details">
				<view class="detail-item">
					<text class="detail-label">单次提现限额</text>
					<text class="detail-value">{{ (withdrawalBalanceMaxOnce/100).toFixed(2) }}元</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">提现手续费</text>
					<text class="detail-value">{{ (withdrawalBalanceFee/100).toFixed(2) }}元</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">最低提现金额</text>
					<text class="detail-value">{{ (lessWithdrawalBalance/100).toFixed(2) }}元</text>
				</view>
			</view> -->
		</view>

		<!-- 操作选项 -->
		<view class="action-items">
			<view class="action-item" @click="handleWithdrawal">
				<view class="action-icon withdrawal-icon">
					<image class="icon-img" :src="withdrawalsIcon" mode="aspectFit"></image>
				</view>
				<view class="action-content">
					<text class="action-title">提现</text>
					<text class="action-subtitle">提现金额不得少于{{ (lessWithdrawalBalance/100).toFixed(2) }}元</text>
				</view>
				<uni-icons type="right" size="25" color="#999"></uni-icons>
			</view>
			
			<view class="action-item" @click="handleBillDetails">
				<view class="action-icon bill-icon">
					<image class="icon-img" :src="accountIcon" mode="aspectFit"></image>
				</view>
				<view class="action-content">
					<text class="action-title">账单明细</text>
				</view>
				<uni-icons type="right" size="25" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 底部指示器 -->
		<view class="bottom-indicator"></view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '@/api/api.js'	
import docUrl from '@/utils/docUrl'
import withdrawalsIcon from '@/static/withdrawals.png'
import accountIcon from '@/static/account_icon.png'
import { onLoad,onBackPress } from '@dcloudio/uni-app';
const from = ref('');
onLoad((options) => {
	if(options.from){
		from.value = options.from;
	}
});
onBackPress(() => {
	if(!from.value){
		plus.runtime.quit();
		return true;
	}
});
// 响应式数据
const accountBalance = ref(0)
const withdrawalBalanceMaxOnce = ref(0)
const withdrawalBalanceFee = ref(0)
const lessWithdrawalBalance = ref(0)
const avatar = ref('')

onMounted(() => {
	getMyAccount()

	let userInfo= uni.getStorageSync('userInfo')
	avatar.value = docUrl+userInfo.photo
})

// 方法
const goBack = () => {
	if(!from.value){
		plus.runtime.quit();
	}else{
		uni.navigateBack();
	}
}

const handleWithdrawal = () => {
	if(accountBalance.value < lessWithdrawalBalance.value){
		uni.showToast({
			title: `提现金额不得少于${(lessWithdrawalBalance.value/100).toFixed(2)}元`,
			icon: 'none'
		})
		return
	}else{
		api.bankCardList().then(res => {
			console.log(res)
			if(res.code == 200 && res.data.length > 0){
				uni.navigateTo({
					url: '/pages_app/myAccount/withdrawal'
				})
			}else{
				uni.showModal({
					title: '提示',
					content: '请先添加银行卡',
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if(res.confirm){
							const returnTo = encodeURIComponent('/pages_app/myAccount/myAccount')
							uni.navigateTo({
								url: `/pages_app/idcardAuth/idcardAuth?returnTo=${returnTo}`
							})
						}
					}
				})	
			}
		})
	}
}

const handleBillDetails = () => {
	const from = encodeURIComponent('myAccount')
	uni.navigateTo({
		url: `/pages_app/myAccount/billDetails?from=${from}`
	})
}

const getMyAccount = async () => {
	const res = await api.getMyAccount({})
	console.log(res)
	if (res && res.code === 200 && res.data) {
		accountBalance.value = res.data.balance
		withdrawalBalanceMaxOnce.value = res.data.withdrawalBalanceMaxOnce
		withdrawalBalanceFee.value = res.data.withdrawalBalanceFee
		lessWithdrawalBalance.value = res.data.lessWithdrawalBalance
	}
}

</script>

<style lang="scss" scoped>
.my-account-page {
	background-color: #f5f5f5;
	min-height: 100vh;
	position: relative;
}

// 账户余额区域样式
.account-summary {
	margin-top: calc(var(--status-bar-height) + 44px);
	background: linear-gradient(135deg, #8B2316, #A0522D);
	// margin: 30rpx;
	// border-radius: 20rpx;
	padding: 30rpx 40rpx 10rpx;
	text-align: center;
	box-shadow: 0 8rpx 24rpx rgba(139, 35, 22, 0.3);
	position: relative;
	
	.profile-section {
		margin-bottom: 10rpx;
		
		.profile-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 20rpx;
			border: 4rpx solid rgba(255, 255, 255, 0.3);
			object-fit: cover;
		}
	}
	
	.balance-label {
		display: block;
		color: rgba(255, 255, 255, 0.9);
		font-size: 28rpx;
		margin-bottom: 10rpx;
		font-weight: 500;
	}
	
	.balance-amount {
		display: block;
		color: #ffffff;
		font-size: 50rpx;
		font-weight: bold;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		letter-spacing: 2rpx;
		margin-bottom: 0rpx;
	}
	
	// 账户信息详情样式
	.account-details {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 16rpx;
		padding: 30rpx;
		margin-top: 20rpx;
		
		.detail-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.detail-label {
				color: rgba(255, 255, 255, 0.8);
				font-size: 24rpx;
				font-weight: 400;
			}
			
			.detail-value {
				color: #ffffff;
				font-size: 26rpx;
				font-weight: 500;
			}
		}
	}
}

// 操作选项样式
.action-items {
	background-color: #ffffff;
	margin-top: 0rpx;
	// border-radius: 20rpx;
	overflow: hidden;
	// box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	
	.action-item {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		transition: background-color 0.2s ease;
		
		&:last-child {
			border-bottom: none;
		}
		
		&:active {
			background-color: #f8f8f8;
		}
		
		.action-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 30rpx;
			background-color: #f8f8f8;
			
			.icon-text {
				font-size: 32rpx;
			}

			.icon-img {
				width: 34rpx;
				height: 34rpx;
			}
		}
		
		.withdrawal-icon {
			background-color: #f5f5f5;
		}
		
		.bill-icon {
			background-color: #fff8e1;
		}
		
		.action-content {
			flex: 1;
			
			.action-title {
				display: block;
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 8rpx;
			}
			
			.action-subtitle {
				display: block;
				font-size: 24rpx;
				color: #999;
				line-height: 1.4;
				font-weight: 400;
			}
		}
		
		.action-arrow {
			font-size: 32rpx;
			color: #ccc;
			font-weight: bold;
			margin-left: 20rpx;
		}
	}
}

// 底部指示器
.bottom-indicator {
	position: fixed;
	bottom: 20rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 120rpx;
	height: 6rpx;
	background-color: #e0e0e0;
	border-radius: 3rpx;
	opacity: 0.6;
}
</style>
