<template>
	<view class="container">
		<view class="page">
			<text class="num actived pass">1</text>
			<text class="line line_pass"></text>
			<text class="num actived pass">2</text>
			<text class="line line_pass"></text>
			<text class="num actived pass">3</text>
			<text class="line line_pass"></text>
			<text class="num actived pass">4</text>
			<text class="line line_pass"></text>
			<text class="num actived">5</text>
			<text class="line"></text>
			<text class="num">6</text>
			<text class="line"></text>
			<text class="num">7</text>
			<text class="line"></text>
			<text class="num">8</text>
		</view>
		<view class="wrapper">
			<view class="title">
				<view>
					<text class="line"></text>银行卡号
				</view>
				<text class="page_mark">5/8</text>
			</view>
			<view class="content">
				<view class="contentDetail employ">
					<view class="contentItem">
						<text>开户行</text>
						<input class="form-control" name="" placeholder="请输入开户行" v-model="backForm.bankAccountOpening"
							:disabled="this.backForm.approvalStatus!= 0 && this.backForm.approvalStatus != 2" />
					</view>
					<view class="contentItem">
						<text>银行卡号</text>
						<input class="form-control" placeholder="请输入银行卡号" type="number" maxlength="19"
							v-model="backForm.bankAccountId" auto-blur=true @blur="checkInput(backForm.bankAccountId)"
							:disabled="this.backForm.approvalStatus!= 0 && this.backForm.approvalStatus != 2" />
					</view>
					<view class="contentItem">
						<text>确认卡号</text>
						<input class="form-control" placeholder="请再次确认卡号" type="number" v-model="sureBankAccountId"
							maxlength="19" auto-blur=true @blur="checkInput(sureBankAccountId)"
							:disabled="this.backForm.approvalStatus!= 0 && this.backForm.approvalStatus != 2" />
					</view>
				</view>
			</view>
		</view>
		<view class="fixed" @click="saveInfo()">
			{{(this.backForm.approvalStatus== 0 || this.backForm.approvalStatus == 2)?'保存并下一步':'下一步'}}
		</view>
	</view>
</template>

<script>
	import api from '@/api/api';
	export default {
		data() {
			return {
				shareId: null,
				sureBankAccountId: '',
				applyParam: {},
				backForm: {
					bankAccountOpening: '',
					bankAccountId: '',
					approvalStatus: ''
				}
			}
		},
		components: {},
		onLoad(options) {
			this.shareId = options.shareId
		},
		onShow() {
			uni.showLoading({
				title: '加载中...'
			});
			if (uni.getStorageSync('backForm')) {
				this.backForm = uni.getStorageSync('backForm')
			}
			if (uni.getStorageSync('applyId')) {
				this.queryById(uni.getStorageSync('applyId'), null)
			} else if (this.shareId) {
				this.queryById(this.shareId, null)
			} else {
				this.queryById(null, uni.getStorageSync('cffp_userId'))
			}
		},
		methods: {
			queryById(id, userId) {
				api.queryById({
					id: id,
					userId: userId
				}).then((res) => {
					console.log(res)
					if (res['success']) {
						this.applyParam = res['data']['data'];
						if (uni.getStorageSync('backForm')) {
							this.workform = uni.getStorageSync('backForm')
						} else {
							this.backForm.bankAccountOpening = this.applyParam.bankAccountOpening
							this.backForm.bankAccountId = this.applyParam.bankAccountId
						}
						this.backForm.approvalStatus = this.applyParam.approvalStatus
						if (this.backForm.bankAccountId) {
							this.sureBankAccountId = this.backForm.bankAccountId;
						} else {
							this.sureBankAccountId = '';
						}
					}
					uni.hideLoading()
				})
			},
			//去除输入空格
			checkInput(str) {
				str = str.replace(/\s*/g, "");
			},
			saveInfo() {
				uni.showLoading({
					title: '加载中...'
				});
				if (this.backForm.bankAccountId == '' || this.sureBankAccountId == '' || this.backForm
					.bankAccountOpening == '') {
					uni.showToast({
						title: '银行卡号与开户行不能为空',
						duration: 2000,
						icon: 'none'
					})
					return;
				}
				if (this.backForm.approvalStatus == 0 || this.backForm.approvalStatus == 2) {
					if (this.backForm.bankAccountId || this.sureBankAccountId) {
						if (Number(this.backForm.bankAccountId) != Number(this.sureBankAccountId)) {
							alert('卡号',this.backForm.bankAccountId)
							alert('确认卡号',this.sureBankAccountId)
							uni.showToast({
								title: '两次银行卡号不一致,请重新输入',
								duration: 2000,
								icon: 'none'
							})
							return;
						}
					}
					uni.setStorageSync('backForm', this.backForm)
					this.applyParam.bankAccountOpening = this.backForm.bankAccountOpening
					this.applyParam.bankAccountId = this.backForm.bankAccountId 
					this.applyParam.approvalStatus = this.backForm.approvalStatus
					this.applyParam = {
						...this.applyParam,
						operatStep: 5,
					}
					api.saveApplyInfo(this.applyParam).then((res) => {
						if (res['success']) {
							uni.navigateTo({
								// url:`personal-statement?id=${res['data']['id']}`
								url: `personal-statement`
							});
						} else {
							uni.showToast({
								title: res['message'],
								duration: 2000,
								icon: 'none'
							})
							return;
						}
						uni.hideLoading()
					})
				} else {
					uni.hideLoading()
					uni.navigateTo({
						// url:`personal-statement?id=${res['data']['id']}`
						url: `personal-statement`
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	@import 'applyCommon.scss';

	.form-control {
		min-width: 440rpx;
	}
</style>
