<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="applyParam.bankAccountOpening"
							:disabled="this.applyParam.approvalStatus!= 0 && this.applyParam.approvalStatus != 2" />
					</view>
					<view class="contentItem">
						<text>银行卡号</text>
						<input class="form-control" placeholder="请输入银行卡号" type="number" maxlength="19"
							v-model="applyParam.bankAccountId" auto-blur=true
							@blur="checkInput(applyParam.bankAccountId)"
							:disabled="this.applyParam.approvalStatus!= 0 && this.applyParam.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.applyParam.approvalStatus!= 0 && this.applyParam.approvalStatus != 2" />
					</view>
				</view>
			</view>
		</view>
		<view class="fixed" @click="saveInfo()">
			{{(this.applyParam.approvalStatus== 0 || this.applyParam.approvalStatus == 2)?'保存并下一步':'下一步'}}
		</view>
	</view>
</template>

<script>
	import api from '@/api/api';
	export default {
		data() {
			return {
				shareId:null,
				sureBankAccountId: '',
				applyParam: {
					bankAccountOpening: '',
					bankAccountId: '',
					approvalStatus: ''
				}
			}
		},
		components: {},
		onLoad(options) {
			this.shareId = options.shareId
		},
		onShow() {
			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 (this.applyParam.bankAccountId) {
							this.sureBankAccountId = this.applyParam.bankAccountId;
						} else {
							this.sureBankAccountId = '';
						}
					}
				})
			},
			//去除输入空格
			checkInput(str) {
				str = str.replace(/\s*/g, "");
			},
			saveInfo() {
				console.log(this.applyParam.bankAccountId, 155)
				console.log(this.sureBankAccountId, 155)
				console.log(this.applyParam
					.bankAccountOpening, 155)
				if (this.applyParam.bankAccountId == '' || this.sureBankAccountId == '' || this.applyParam
					.bankAccountOpening == '') {
					uni.showToast({
						title: '银行卡号与开户行不能为空',
						duration: 2000,
						icon: 'none'
					})
					return;
				}
				if (this.applyParam.approvalStatus == 0 || this.applyParam.approvalStatus == 2) {
					if (this.applyParam.bankAccountId || this.sureBankAccountId) {
						if (this.applyParam.bankAccountId != this.sureBankAccountId) {
							uni.showToast({
								title: '两次银行卡号不一致,请重新输入',
								duration: 2000,
								icon: 'none'
							})
							return;
						}
					}
					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;
						}
					})
				} else {
					uni.navigateTo({
						// url:`personal-statement?id=${res['data']['id']}`
						url: `personal-statement`
					});
				}
			}
		}
	}
</script>

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