<template>
	<!-- 骨架屏 -->
	<view v-if="loading" class="skeleton-container">
		<!-- 余额区域骨架屏 -->
		<view class="skeleton-balance-section">
			<view class="skeleton-balance-label"></view>
			<view class="skeleton-balance-amount"></view>
			<view class="skeleton-balance-current"></view>
		</view>

		<!-- 账户选择区域骨架屏 -->
		<view class="skeleton-account-section">
			<view class="skeleton-section-title"></view>
			<view class="skeleton-account-item">
				<view class="skeleton-account-icon"></view>
				<view class="skeleton-account-name"></view>
				<view class="skeleton-account-radio"></view>
			</view>
			<view class="skeleton-account-item">
				<view class="skeleton-account-icon"></view>
				<view class="skeleton-account-name"></view>
				<view class="skeleton-account-radio"></view>
			</view>
		</view>

		<!-- 提示信息骨架屏 -->
		<view class="skeleton-tip-section">
			<view class="skeleton-tip-icon"></view>
			<view class="skeleton-tip-content">
				<view class="skeleton-tip-line"></view>
				<view class="skeleton-tip-line-small"></view>
			</view>
		</view>

		<!-- 确认按钮骨架屏 -->
		<view class="skeleton-confirm-section">
			<view class="skeleton-confirm-button"></view>
		</view>
	</view>
	<!-- 真实内容 -->
	<view v-else class="withdraw-container">
		<!-- 可提现金额 -->
		<view class="balance-section">
			<text class="balance-label">可提现金额</text>
			<text class="balance-amount">¥{{ riderAcc.account }}</text>
			<text class="current-balance">当前钱包余额</text>
		</view>

		<!-- 提现账户选择 -->
		<view class="account-section">
			<text class="section-title">提现账户</text>
			<view class=""
				style="display: flex;align-items: center; border-bottom: 4rpx solid #e2e2e2;padding-bottom: 10px; margin-bottom: 10px;">
				<up-icon name="zhifubao-circle-fill" size="30" color="#1890ff"></up-icon>
				<view style="flex: 1; margin-left: 30rpx; " class="">
					支付宝
				</view>
				<view @click="changePay(0)" class="">
					<view v-if="current==0" class="radio-circle">
						<view class="radio-inner"></view>
					</view>
					<view v-else class="radio-no-circle">
					</view>
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;">
				<up-icon name="weixin-circle-fill" size="30" color="#28C445"></up-icon>
				<view style="flex: 1; margin-left: 30rpx; " class="">
					微信
				</view>
				<view @click="changePay(1)" class="">
					<view v-if="current==1" class="radio-circle">
						<view class="radio-inner"></view>
					</view>
					<view v-else class="radio-no-circle">
					</view>
				</view>
			</view>
		</view>

		<!-- 提现账号 -->
		<view class="" v-if="current!=null" style="margin: 20rpx 30rpx; ">
			<view class="" style="font-size: 34rpx; font-weight: 600; ">
				账号信息
			</view>

			<up-form labelPosition="top" label-width="200" :model="account" ref="form1">
				<up-form-item label="姓名" prop="userInfo.name" :borderBottom="true" ref="item1">
					<up-input v-model="account.name" @change="changePrice" placeholder="请输入姓名" border="none"></up-input>
				</up-form-item>
				<up-form-item :label="current==0? '支付宝账号':'微信账号'" prop="userInfo.name" :borderBottom="true" ref="item1">
					<up-input v-model="account.id" :placeholder="current==0? '请输入支付宝账号':'请输入微信账号'"
						border="none"></up-input>
				</up-form-item>
				<up-form-item label="提现金额" prop="userInfo.name" :borderBottom="true" ref="item1">
					<up-input v-model="account.price" type="digit" placeholder="请输入提现金额" border="none"></up-input>
				</up-form-item>
			</up-form>
		</view>


		<!-- 提示信息 -->
		<view class="tip-section">
			<up-icon name="clock" size="18" color="#1890ff"></up-icon>
			<view class="" style="margin-left: 10rpx;">
				<view class="tip-text">预计 T+1 工作日到账</view>
				<view class="tip-text" style="color: #666666; font-size: 24rpx; margin-top: 10rpx; ">无手续费</view>
			</view>

		</view>

		<!-- 确认按钮 -->
		<view class="confirm-section">
			<button class="confirm-button" @click="confirmWithdraw">确认提现</button>
		</view>
	</view>
</template>

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

	let current = ref(null)
	let loading = ref(true)


	let account = ref({
		id: '',
		price: "",
		name: ''
	})

	let riderAcc = ref<any>({})

	onLoad(() => {
		
	})
	
	onShow(()=>{
		getData()
	})


	const getData = () => {
		CNRiderDataService.GetRiderAccInfo().then(res => {
			loading.value = false
			if (res.data) {
				riderAcc.value = res.data.riderAcc
			}
		})
	}

	const changePay = (item : any) => {
		current.value = item
	}

	const changePrice = (e : string) => {
		console.log(e);
	}


	// 确认提现
	const confirmWithdraw = () => {
		if(current.value==null){
			Service.Msg('请选择提现方式!')
			return
		}
		
		if (!account.value.name) {
			Service.Msg('请输入姓名!')
			return
		}
		if (!account.value.price) {
			Service.Msg('请输入提现金额!')
			return
		}
		if (!account.value.id) {
			Service.Msg('请输入账户号!')
			return
		}


		uni.showModal({
			title: '提示',
			content: '请仔细确认身份信息?',
			success: function (res) {
				if (res.confirm) {
					CNRiderOrderService.AddRiderWith(Number(account.value.price), current.value == 0 ? '支付宝' : '微信', account.value.name, account.value.id).then(res => {
						if (res.code == 0) {
							Service.Msg('提现成功')
							account.value.name=''
							account.value.price=null
							account.value.id=''
							setTimeout(() => {
								Service.GoPage('/pages/my/withDrowList')
							}, 1000)
						} else {
							Service.Msg(res.msg)
						}

					})
				} else {
					// 用户点击取消后的操作
				}
			}
		});
	};
</script>

<style scoped>
	.withdraw-container {
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 40rpx;
	}

	/* 选择 */

	.radio-circle {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid var(--nav-mian);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.radio-inner {
		width: 20rpx;
		height: 20rpx;
		background-color: var(--nav-mian);
		border-radius: 50%;
	}

	.radio-no-circle {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid #dadada;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}



	/* 顶部导航栏 */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #000;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.help-icon {
		width: 40rpx;
		height: 40rpx;
	}

	/* 余额显示区域 */
	.balance-section {
		background-color: #fff;
		padding: 40rpx 30rpx;
	}

	.balance-label {
		font-size: 32rpx;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.balance-amount {
		font-size: 60rpx;
		font-weight: bold;
		color: #ff4757;
		display: block;
		margin-bottom: 10rpx;
	}

	.current-balance {
		font-size: 28rpx;
		color: #999;
	}

	/* 账户选择区域 */
	.account-section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	}

	.account-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.account-item:last-child {
		border-bottom: none;
	}

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

	.account-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 12rpx;
		background-color: #1677ff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		border: 2rpx solid #000;
	}

	.account-icon.wechat {
		background-color: #07c160;
	}

	.icon-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.account-name {
		font-size: 32rpx;
		color: #333;
	}

	/* 提示信息区域 */
	.tip-section {
		display: flex;
		align-items: flex-start;
		background-color: #e6f7ff;
		padding: 20rpx 30rpx;
		margin: 0 30rpx 20rpx;
		border-radius: 10rpx;
	}

	.tip-text {
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	/* 确认按钮区域 */
	.confirm-section {
		background-color: #fff;
		position: fixed;
		width: 100vw;
		left: 0;
		bottom: 0;
		padding: 30rpx;
	}

	.confirm-button {
		width: 100%;
		height: 90rpx;
		background-color: #1677ff;
		color: #fff;
		font-size: 36rpx;
		font-weight: 600;
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
	}

	.confirm-button:active {
		background-color: #0958d9;
	}

	/* 骨架屏样式 */
	.skeleton-container {
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 40rpx;
	}

	/* 骨架屏动画 */
	@keyframes shimmer {
		0% {
			background-position: -1000px 0;
		}

		100% {
			background-position: 1000px 0;
		}
	}

	/* 骨架屏通用样式 */
	.skeleton-balance-section,
	.skeleton-account-section,
	.skeleton-tip-section {
		padding: 40rpx 30rpx;
		margin-bottom: 20rpx;
	}

	/* 余额区域骨架屏 */
	.skeleton-balance-section {
		background-color: #fff;
	}

	.skeleton-balance-label {
		width: 30%;
		height: 32rpx;
		background-color: #e6e6e6;
		margin-bottom: 20rpx;
		border-radius: 4rpx;
		animation: shimmer 1.5s infinite;
		background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 1000px 100%;
	}

	.skeleton-balance-amount {
		width: 40%;
		height: 60rpx;
		background-color: #e6e6e6;
		margin-bottom: 20rpx;
		border-radius: 4rpx;
		animation: shimmer 1.5s infinite;
		background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 1000px 100%;
	}

	.skeleton-balance-current {
		width: 25%;
		height: 28rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		animation: shimmer 1.5s infinite;
		background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 1000px 100%;
	}

	/* 账户选择区域骨架屏 */
	.skeleton-account-section {
		background-color: #fff;
	}

	.skeleton-section-title {
		width: 25%;
		height: 32rpx;
		background-color: #e6e6e6;
		margin-bottom: 30rpx;
		border-radius: 4rpx;
		animation: shimmer 1.5s infinite;
		background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 1000px 100%;
	}

	.skeleton-account-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 4rpx solid #e2e2e2;
	}

	.skeleton-account-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.skeleton-account-icon {
		width: 60rpx;
		height: 60rpx;
		background-color: #e6e6e6;
		border-radius: 12rpx;
		margin-right: 20rpx;
		animation: shimmer 1.5s infinite;
		background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 1000px 100%;
	}

	.skeleton-account-name {
		flex: 1;
		height: 32rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		margin-right: 20rpx;
		animation: shimmer 1.5s infinite;
		background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 1000px 100%;
	}

	.skeleton-account-radio {
		width: 36rpx;
		height: 36rpx;
		background-color: #e6e6e6;
		border-radius: 50%;
		animation: shimmer 1.5s infinite;
		background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 1000px 100%;
	}

	/* 提示信息骨架屏 */
	.skeleton-tip-section {
		display: flex;
		align-items: flex-start;
		background-color: #e6f7ff;
		padding: 20rpx 30rpx;
		margin: 0 30rpx 20rpx;
		border-radius: 10rpx;
	}

	.skeleton-tip-icon {
		width: 40rpx;
		height: 40rpx;
		background-color: #e6e6e6;
		border-radius: 50%;
		margin-right: 15rpx;
		animation: shimmer 1.5s infinite;
		background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 1000px 100%;
	}

	.skeleton-tip-content {
		flex: 1;
	}

	.skeleton-tip-line {
		width: 70%;
		height: 28rpx;
		background-color: #e6e6e6;
		margin-bottom: 15rpx;
		border-radius: 4rpx;
		animation: shimmer 1.5s infinite;
		background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 1000px 100%;
	}

	.skeleton-tip-line-small {
		width: 50%;
		height: 24rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		animation: shimmer 1.5s infinite;
		background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 1000px 100%;
	}

	/* 确认按钮骨架屏 */
	.skeleton-confirm-section {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 30rpx;
	}

	.skeleton-confirm-button {
		width: 100%;
		height: 90rpx;
		background-color: #e6e6e6;
		border-radius: 45rpx;
		animation: shimmer 1.5s infinite;
		background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 1000px 100%;
	}
</style>