<template>
	<view class="container" style="height: 1000rpx;">
		<view >
			<!-- #ifdef APP -->
			<view class="top">
				<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
				<text>申请加盟</text>
			</view>
			<!-- #endif -->
			<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">3</text>
				<text class="line"></text>
				<text class="num">4</text>
				<text class="line"></text>
				<text class="num">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>
		<view class="wrapper">
			<view class="title">
				<view>
					<text class="line"></text>银行卡号
				</view>
				<text class="page_mark">3/7</text>
			</view>
			<view class="content">
				<view class="contentDetail employ">
					<view class="contentItem yinhang">
						<text><text class="requireCode">*</text>开户行</text>
						
						<view class="searchInput" >
							<searchInput
							    ref="searchInput"
								v-if="bankList.length>0" 
								:allData="bankList" 
								@select="onSelect"
								:isClick="this.backForm.approvalStatus!= 0 && this.backForm.approvalStatus != 2"
								:nowBank="this.backForm.bankAccountOpening"
							/>
							
						</view>
					</view>
					<view class="contentItem" v-if="showBank">
						<text></text>
						<input 
							class="form-control" 
							placeholder="请输入开户行名称" 
							v-model="backForm.bankAccountOpening" 
							auto-blur=true 
							:disabled="this.backForm.approvalStatus!= 0 && this.backForm.approvalStatus != 2" />
					</view>
					<view class="contentItem">
						<text><text class="requireCode">*</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 class="requireCode">*</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';
	import searchInput from '@/components/searchInput/searchInput.vue';
	import validate from '@/util/validate.js';
	export default {
		data() {
			return {
				showBank:false,
				shareId: null,
				sureBankAccountId: '',
				applyParam: {},
				bankList:[],
				backForm: {
					bankAccountOpening: '',
					bankAccountId: '',
					approvalStatus: ''
				}
			}
		},
		components: { searchInput },
		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: {
			onSelect(item){
				
				if(item.id == '1'){
					this.showBank = true
				}else {
					this.showBank = false
				}
				this.backForm.bankAccountOpening = item.bankName
				
			},
			goBack() {
				uni.navigateBack({
					delta: 1  
				});
			},
			queryById(id, userId) {
				api.queryById({
					id: id,
					userId: userId
				}).then((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 = '';
						}
					}
					this.bankQry();
					uni.hideLoading()
				})
			},
			bankQry(id, userId) {
				api.bankQry({
					insurerId: '888',
					userId: userId
				}).then((res) => {
					if (res['success']) {
						this.bankList= res['data']['bankList'];
						if(this.bankList.length>0){
							this.bankList.forEach(item=>{
								item.label = item.bankName
								item.id = item.bankId
							})
							//兼容以前的旧数据，以前开户行有值并且不在银行列表里通通显示自定义
							if(this.backForm.bankAccountOpening && this.bankList.filter(item=>item.bankName==this.backForm.bankAccountOpening).length<=0) {
								this.bankList.unshift({label:'自定义',id:'1',show:true})
								this.showBank = true
							}else {
								this.showBank = false
								this.bankList.unshift({label:'自定义',id:'1',show:false})
							}
						}
					}
				})
			},
			//去除输入空格
			checkInput(str) {
				if(!str) return
				str = str.replace(/\s*/g, "");
			},
			saveInfo() {
				this.$refs.searchInput.showDropdown = false
				uni.showLoading({
					title: '加载中...'
				});
				
				if (this.backForm.approvalStatus == 0 || this.backForm.approvalStatus == 2) {
					if(!this.backForm.bankAccountOpening){
						uni.showToast({
							title: '开户行不能为空',
							duration: 2000,
							icon: 'none'
						})
						return;
					}
					if(!this.backForm.bankAccountId ){
						uni.showToast({
							title: '银行卡号不能为空',
							duration: 2000,
							icon: 'none'
						})
						return;
					}
					if(!this.sureBankAccountId ){
						uni.showToast({
							title: '确认卡号不能为空',
							duration: 2000,
							icon: 'none'
						})
						return;
					}
					
					// if (this.backForm.bankAccountId == '' || this.sureBankAccountId == '' || this.backForm
					// 	.bankAccountOpening == '') {
					// 	uni.showToast({
					// 		title: '银行卡号与开户行不能为空',
					// 		duration: 2000,
					// 		icon: 'none'
					// 	})
					// 	return;
					// }
					if (this.backForm.bankAccountId && this.sureBankAccountId) {
						if (Number(this.backForm.bankAccountId) != Number(this.sureBankAccountId)) {
							uni.showToast({
								title: '两次银行卡号不一致,请重新输入',
								duration: 2000,
								icon: 'none'
							})
							return;
						}
					}
					let obj = validate.validateBankCard(this.backForm.bankAccountId)
					if(!obj.flag){
						uni.showToast({
							title: obj.msg,
							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`
					// });
					uni.navigateTo({
						// url:`personal-statement?id=${res['data']['id']}`
						url: `personal-statement`
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'applyCommon.scss';
	.container{
		display: flex;
		flex-direction: column;
		// height: 100%;
		.wrapper{
			flex: 1;
		}
		.requireCode{
			color: red;
		}
	}
	.form-control {
		min-width: 440rpx;
	}
	.yinhang{
		
		.searchInput{
			width: 80%;
			
		}
	}
</style>
