<template>
	<view class="containerView">
		<up-cell-group label-width="80" :border="false">
			<up-cell>
				<template #title>
					<view style="width: 90px;">姓名</view>
				</template>
				<template #right-icon> <up-input border="none" :disabled="setinput()" v-model="data.certName"
						placeholder="请输入姓名"></up-input>
				</template>
			</up-cell>
			<up-cell>
				<template #title>
					<view style="width: 90px;">身份证号码</view>
				</template>
				<template #right-icon> <up-input border="none" v-model="data.certNum" :disabled="setinput()"
						placeholder="请输入身份证号码"></up-input>
				</template>
			</up-cell>
			<up-cell>
				<template #title>
					<view style="width: 90px;">银行卡号码</view>
				</template>
				<template #right-icon> <up-input border="none" :disabled="setinput()" v-model="data.accountNo"
						placeholder="请输入银行卡号码"></up-input> </template>
			</up-cell>
			<up-cell>
				<template #title>
					<view style="width: 90px;">手机号</view>
				</template>
				<template #right-icon> <up-input border="none" :disabled="setinput()" v-model="data.mobile"
						placeholder="请输入银行预留号码"></up-input> </template>
			</up-cell>
			<up-cell>
				<template #title>
					<view style="width: 90px;">开户省份</view>
				</template>
				<template #right-icon> <up-input border="none" v-model="data.province"
						placeholder="请输入银行开户省份"></up-input> </template>
			</up-cell>
			<up-cell>
				<template #title>
					<view style="width: 90px;">开户市区</view>
				</template>
				<template #right-icon> <up-input border="none" v-model="data.city" placeholder="请输入银行开户市区"></up-input>
				</template>
			</up-cell>
			<up-cell>
				<template #title>
					<view style="width: 90px;">开户行</view>
				</template>
				<template #right-icon> <up-input border="none" v-model="data.bankBranch"
						placeholder="请输入银行开户行"></up-input> </template>
			</up-cell>
		</up-cell-group>
		<button v-if="data.isAccountNo" class="confirm-btn" @click="toLogin" :disabled="data.logining">认证</button>
		<view style="font-size: 24upx;color: #999999;padding: 0 15rpx;margin-top: 32rpx;margin-bottom: 10rpx;">
			请正确填写收款人的银行卡号和真实的收款人姓名</view>
		<view style="font-size: 24upx;color: #999999;padding: 0 15rpx;;margin-bottom: 10rpx;">手机号需是银行卡银行卡预留手机号</view>
		<view style="font-size: 24upx;color: #999999;padding: 0 15rpx;;margin-bottom: 10rpx;">银行卡号需与收款人姓名一致</view>
		<view style="font-size: 24upx;color: #999999;padding: 0 15rpx;;margin-bottom: 10rpx;">身份证信息仅可使用一次</view>
		<view style="font-size: 24upx;color: #999999;padding: 0 15rpx">否则将无法正常收款，请须知</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		nextTick,
		ref
	} from 'vue';
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		realNameAuth
	} from '@/api/me/withdraw.js';
	import {
		selectUserById
	} from '@/api/user/user.js';
	import {
		commonType
	} from '@/api/init.js';

	let data = reactive({
		certName: null,
		mobile: null,
		certNum: null,
		accountNo: null,
		isAccountNo: true,
		logining: false,
		province: null,
		city: null,
		bankBranch: null
	})
	let inputdata = ref()
	onLoad(() => {
		getUserInfo()
	})

	function setinput() {
		if (data.accountNo) {
			return data.accountNo.indexOf('****') != -1
		} else {
			return false
		}
	}

	function getUserInfo() {
		selectUserById().then(res => {
			if (res) {
				data.certName = res.certName;
				data.mobile = res.mobile;
				if (res.accountNo) {
					inputdata.value = res
					data.accountNo = res.accountNo;
					data.certNum = res.certNo;
				}
				if (res.accountNo && res.province && res.city && res.bankBranch) {
					data.province = res.province;
					data.city = res.city;
					data.bankBranch = res.bankBranch;
					data.isAccountNo = false
				}
			}

		})
	}

	function inputChange(e) {
		const key = e.currentTarget.dataset.key;
		data[key] = e.detail.value;
	}

	async function toLogin() {

		if (!data.certName) {
			uni.showToast({
				title: '请设置收款人姓名',
				icon: 'none'
			})
		} else if (!data.mobile) {
			uni.showToast({
				title: '请设置收款人支付宝账号',
				icon: 'none'
			})
		} else if (!data.certNum) {
			uni.showToast({
				title: '请设置收款人支付宝账号',
				icon: 'none'
			})
		} else if (!data.accountNo) {
			uni.showToast({
				title: '请设置收款人支付宝账号',
				icon: 'none'
			})
		} else {
			data.logining = true
			let res = await realNameAuth({
				certName: data.certName,
				mobile: data.mobile,
				certNum: data.certNum,
				accountNo: data.accountNo.replace(/\s+/g, ''),
				province: data.province,
				city: data.city,
				bankBranch: data.bankBranch
			})
			if (res) {
				data.logining = false
				let userInfo = uni.getStorageSync('userInfo')
				userInfo.mobile = data.mobile
				userInfo.mobile = data.mobile
				userInfo.certNo = data.certNum
				userInfo.accountNo = data.accountNo
				uni.setStorageSync('userInfo', userInfo)
				uni.showToast({
					title: '修改成功',
					icon: 'none',
					complete() {
						setTimeout(function() {
							uni.navigateBack();
						}, 1000)
					}
				})
			} else {
				data.logining = false
			}


		}

	}
</script>

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

	.u-cell__body__content {
		flex: 0 !important;
	}

	.containerView {
		padding: 30rpx;
		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: none;
		}
	}



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

		&:after {
			border: none;
		}
	}
</style>