<template>
	<view class="containerView">
		<up-cell-group>
			<up-cell  title="收款人姓名">
				<template #right-icon> <up-input border="none" v-model="data.zhiFuBaoName" placeholder="请输入支付宝收款人姓名"></up-input> </template>
			</up-cell>
			<up-cell  title="支付宝账号">
				<template #right-icon> <up-input border="none" v-model="data.zhiFuBao" placeholder="请输入要绑定的支付宝手机号"></up-input> </template>
			</up-cell>
			<up-cell  title="身份证号码">
				<template #right-icon> <up-input border="none" v-model="data.certNum" placeholder="请输入要绑定身份证号码"></up-input> </template>
			</up-cell>
		</up-cell-group>
		<button :class="data.zhiFuBao&&data.zhiFuBaoName?'confirm-btn':'confirm-btn1'" @click="toLogin"
			:disabled="logining">绑定账户</button>
		<view style="font-size: 24upx;color: #999999;padding: 0 64rpx;margin-top: 32rpx;margin-bottom: 10rpx;">请正确填写收款人的支付宝账户和真实的收款人姓名</view>
		<view style="font-size: 24upx;color: #999999;padding: 0 64rpx;;margin-bottom: 10rpx;">身份证姓名需与支付宝姓名一致</view>
		<view style="font-size: 24upx;color: #999999;padding: 0 64rpx;;margin-bottom: 10rpx;">身份证信息仅可使用一次</view>
		<view style="font-size: 24upx;color: #999999;padding: 0 64rpx">否则将无法正常收款，请须知</view>

	</view>
</template>

<script setup>
	import { reactive, nextTick, ref } from 'vue';
	import { onReady,onLoad,onShow } from '@dcloudio/uni-app'
	import { updateUser } from '@/api/me/withdraw.js';
	import { commonType } from '@/api/init.js';
	
	let data = reactive({
		zhiFuBao: '',
		zhiFuBaoName: '',
		certNum: '',
		logining: false
	})
	
	onLoad(() => {
		this.zhiFuBao = uni.getStorageSync('userInfo').zhiFuBao;
		this.zhiFuBaoName = uni.getStorageSync('userInfo').zhiFuBaoName;
		this.certNum = uni.getStorageSync('userInfo').certNo;
	})
	
	function inputChange(e) {
		const key = e.currentTarget.dataset.key;
		data[key] = e.detail.value;
	}
	
	async function toLogin() {
		console.log(data.zhiFuBaoName)
		console.log(data.zhiFuBao)
		console.log(data.certNum)
	    
		if (!data.zhiFuBaoName) {
			uni.showToast({
				title: '请设置收款人姓名',
				icon: 'none'
			})
		} else if (!data.zhiFuBao) {
			uni.showToast({
				title: '请设置收款人支付宝账号',
				icon: 'none'
			})
		} else if (!data.certNum) {
			uni.showToast({
				title: '请设置收款人身份证账号',
				icon: 'none'
			})
		} else {
			data.logining = true
			let res = await updateUser({
				zhiFuBao: data.zhiFuBao,
				certName: data.zhiFuBaoName,
				certNum: data.certNum,
			})
			if( res) {
				data.logining = false
				let userInfo = uni.getStorageSync('userInfo')
				userInfo.zhiFuBao = data.zhiFuBao
				userInfo.zhiFuBaoName = data.zhiFuBaoName
				userInfo.certNo = data.certNum
				uni.setStorageSync('userInfo', userInfo)
				uni.showToast({
					title: '修改成功',
					icon: 'none',
					complete() {
						setTimeout(function() {
							// uni.navigateBack();
						}, 1000)
					}
				})
			}
			
	
		}
		
	}
</script>

<style lang='scss'>
	page {
		background: #FFFFFF;
	}

	.containerView {
		padding-top: 32upx;
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #ffffff;
	}

	.confirm-btn1 {
		width: 300px;
		height: 42px;
		line-height: 42px;
		border-radius: 30px;
		margin-top: 70upx;
		/* background: whitesmoke; */
		background: #ff7581;
		color: #FFFFFF;
		font-size: 32rpx;

		&:after {
			border-radius: 60px;
		}
	}



	.confirm-btn {
		width: 300px;
		height: 42px;
		line-height: 42px;
		border-radius: 30px;
		margin-top: 70upx;
		background: #ff7581;
		color: #ffffff;
		font-size: 32rpx;

		&:after {
			border-radius: 60px;
		}
	}
</style>