<template>
	<view class="shop_auth">
		<view class="content">
			<view class="hint">上传并提交您的证件照片</view>
			<image :src="authCon.front" class="card" @click="getPhoto(0)"></image>
			<image :src="authCon.otherSide" class="card" @click="getPhoto(1)"></image>
			<view style="margin:30rpx 0">拍照要求</view>
			<view class="rule">
				<image src="/static/imgs/shop/card_rule.png"></image>
				<view>照片信息清晰可见，完整无缺失，照片真实严禁经过PS处理</view>
			</view>
			<view class="auth_inp">
				<view class="inp_box">
					<view class="label">
						<text>店铺名称</text>
						<text class="star">*</text>
					</view>
					<input type="text" v-model="params.store_name" />
				</view>
				<view class="inp_box">
					<view class="label">
						<text>手机号</text>
						<text class="star">*</text>
					</view>
					<input type="text" v-model="params.contact_phone" disabled />
				</view>
				<view class="inp_box">
					<view class="label">
						<text>姓名</text>
						<text class="star">*</text>
					</view>
					<input type="text" placeholder="上传证件后自动获取" v-model="params.id_card_name" placeholder-class="place"
						@input="getVal($event,0)" />
				</view>
				<view class="inp_box">
					<view class="label">
						<text>证件号</text>
						<text class="star">*</text>
					</view>
					<input type="text" placeholder="上传证件后自动获取" v-model="params.id_card_number" maxlength="18"
						placeholder-class="place" @input="getVal($event,1)" />
				</view>
				<view class="inp_box">
					<view class="label">
						<text>证件起始时间</text>
						<text class="star">*</text>
					</view>
					<picker mode="date" :value="params.id_card_valid_time_begin" @change="bindDateChange1">
						<view class="date_picker flexB">
							<text :style="{ color: params.id_card_valid_time_begin ? '#333' : '#a7a7a7' }"
								style="font-size:32rpx;">
								{{ params.id_card_valid_time_begin ? params.id_card_valid_time_begin : '上传证件后自动获取' }}
							</text>
							<text class="iconfont iconzhcc_xiangxiajiantou"></text>
						</view>
					</picker>
				</view>
				<view class="inp_box">
					<view class="label">
						<text>证件到期时间</text>
						<text class="star">*</text>
					</view>
					<picker mode="date" :value="params.id_card_valid_time" @change="bindDateChange2">
						<view class="date_picker flexB">
							<text :style="{ color: params.id_card_valid_time ? '#333' : '#a7a7a7' }"
								style="font-size:32rpx;">
								{{ params.id_card_valid_time ? params.id_card_valid_time : '上传证件后自动获取' }}
							</text>
							<text class="iconfont iconzhcc_xiangxiajiantou"></text>
						</view>
					</picker>
				</view>
				<view>
					<view class="label">
						<text>所在地区</text>
						<text class="star">*</text>
					</view>
					<picker mode="region" @change="bindRegionChange" :value="authCon.location"
						:custom-item="customItem">
						<view class="flexB picker">
							<text
								:style="{color:authCon.location?'#333':'#999'}">{{authCon.location?authCon.location:'请点击选择店铺地址'}}</text>
							<text class="iconfont iconzhcc_xiangxiajiantou"></text>
						</view>
					</picker>
				</view>
				<view class="inp_box">
					<view class="label">
						<text>详细地址</text>
						<text class="star">*</text>
					</view>
					<view><input type="text" placeholder="请输入详细地址" v-model="params.address"
							placeholder-style="color:#999;" /></view>
				</view>
				<view class="inp_box">
					<view class="label">
						<text class="label_name">银行卡号</text>
						<text class="star">*</text>
					</view>
					<input type="number" placeholder="请输入本人银行卡号" v-model="params.account_number" class="bank_box"
						placeholder-class="inp_place" />
				</view>
				<view>
					<view class="label">
						<text class="label_name">开户银行</text>
						<text class="star">*</text>
					</view>
					<view @click="(showBank = true), getBankList()" class="flexB picker">
						<text :style="{ color: params.account_bank ? '#333' : '#999' }"
							style="font-size:32rpx;">{{ params.account_bank ? params.account_bank : '请选择开户银行' }}</text>
						<text class="iconfont iconzhcc_xiangxiajiantou"></text>
					</view>
					<u-popup v-model="showBank" mode="bottom" height="700rpx;">
						<view class="pop_box">
							<view class="box_inp">
								<!-- <u-input placeholder="输入关键字查询开户银行" border="shape" v-model="searchBank" @input="bankInp">
								</u-input> -->
								<input placeholder="输入关键字查询开户银行" v-model="searchBank" @input="bankInp" />
							</view>

							<view class="scroll">
								<scroll-view>
									<view class="scroll_con">
										<view v-for="(item, idx) in bankList" :key="idx" @click="checkBank(item)">
											{{ item.name }}
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</u-popup>
				</view>
				<view class="inp_box">
					<view class="label">
						<text class="label_name">开户银行地址</text>
						<text class="star">*</text>
					</view>
					<view class="flexB picker">
						<input v-model="authCon.bankAds" type="text" @click="choosePicker" placeholder="请选择开户银行地址"
							disabled placeholder-style="color:#999" class="picker_inp" />
						<text class="iconfont iconzhcc_xiangxiajiantou"></text>
					</view>
				</view>
				<w-picker ref="Selector" mode="region" themeColor="#F76454" @confirm="onConfirm" :hideArea="true" />
				<!-- 				<view>
					<view v-if="params.bank_address_code && authCon.bankId">
						<view class="label">
							<text class="label_name">开户银行(含支行)</text>
							<text class="star">*</text>
						</view>
						<view @click="(showBranch = true), getBranch()" class="flexB picker">
							<text :style="{ color: params.bank_name ? '#333' : '#999' }"
								style="font-size:30rpx;">{{ params.bank_name ? params.bank_name : '请选择开户银行（含支行）' }}</text>
							<text class="iconfont iconzhcc_xiangxiajiantou"></text>
						</view>
						<u-popup v-model="showBranch" mode="bottom" height="700rpx;">
							<view class="pop_box">
								<view class="box_inp">
									<input type="text" placeholder="输入关键字查询支行" @input="branchInp"
										v-model="searchBranch" />
								</view>
								<view class="scroll">
									<scroll-view>
										<view class="scroll_con">
											<view v-for="(item, idx) in bankBranch" :key="idx"
												@click="checkBranch(item)">
												{{ item.sub_branch_name }}
											</view>
										</view>
										<view v-if="bankBranch.length == 0" class="no_branch">--暂无可选择支行--</view>
									</scroll-view>
								</view>
							</view>
						</u-popup>
					</view>
				</view> -->
			</view>
			<view class="how_query flexC" @click="skipQuery">
				<image src="@/static/imgs/shop/query.png" class="query_icon"></image>
				<text>*如何查询开户银行支行？</text>
			</view>
			<view class="sub_btn" @click="submitAuth" style="margin-top:40rpx;">提交审核</view>
			<!-- <view class="notice">温馨提示：您的审核会在3个工作日内为您办理</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getIdCard,
		secondAuth,
		getBank,
		getBankBranch,
		getStoreInfo
	} from '@/apis/shop.js';
	import WPicker from '../../components/w-picker/w-picker.vue';
	import cityPicker from '../../components/citypicker/city-picker.vue';
	export default {
		data() {
			return {
				numList: [{
						name: '管理员信息'
					},
					{
						name: '身份认证'
					}
				],
				current: 0, // 0管理员信息  1身份认证
				params: {
					contact_name: '', //管理员姓名
					contact_phone: '', //管理员手机号
					contact_id_card: '', //管理员证件号
					store_name: '', //店铺名称
					// store_url: 'https://api.wd.cliu.cc/api/gzh', //店铺链接【固定值】
					store_url: 'https://api.wd.cliu.cc/api/gzh', //店铺链接【固定值】
					id_card_copy: '', //证件人像面
					id_card_national: '', //证件国徽面
					id_card_name: '', //证件号姓名
					id_card_number: '', //证件号码
					id_card_valid_time: '', //证件到期时间
					address: '', //店铺详细地址
					province: '', //店铺地址省份
					city: '', //店铺地址城市
					area: '', //店铺地址区域

					account_bank: '', //开户银行
					bank_address_code: '', //开户行地址
					bank_name: '', //开户银行（含支行）
					bank_branch_id: '', //支行id
					account_number: '' //银行卡号
				},
				authCon: {
					front: '/static/imgs/shop/card_front.png', //身份证正面照
					otherSide: '/static/imgs/shop/card_reverse.png', //身份证反面照
					location: '', //店铺地址
					bankId: '', //银行开户行id
					bankAds: '' //银行支行地址
				},
				isSub: true, //是否可以点击提交按钮
				baseUrl: 'https://api.wd.cliu.cc', //上传图片路径
				showBranch: false, //显示选择支行弹窗
				showBank: false, //显示选择银行弹窗
				searchBank: '', //搜索的银行名称
				searchBranch: '', //搜索的支行名称
				bankList: [], //银行卡开户行信息
				bankBranch: [], //银行开户行支行信息
			};
		},

		onLoad() {
			this.getShop();
		},
		onShow() {
			//如果有缓存的填写信息和正反面身份证照片，直接展示
			let authInfo = uni.getStorageSync('authInfo');
			if (authInfo) {
				this.params = authInfo;
			}
			let authCon = uni.getStorageSync('authCon');
			if (authCon) {
				this.authCon = authCon;
			}
		},

		watch: {
			searchBranch(oldVal, newVal) {
				if (!oldVal) {
					this.getBranch();
				}
			},
			searchBank(oldVal, newVal) {
				if (!oldVal) {
					this.getBankList();
				}
			}
		},
		components: {
			WPicker,
			cityPicker
		},

		methods: {
			/*选择开户银行地址*/
			choosePicker() {
				if (!this.authCon.bankId) {
					uni.showModal({
						content: '请先选择开户银行',
						showCancel: false
					});
					return false;
				}
				// 显示地址选择器
				this.$refs.Selector.show();
			},
			//跳转到查询开户行
			skipQuery() {
				uni.navigateTo({
					url: '../../../pages/bank-search/bank-search'
				});
			},
			//选择银行开户行地址
			onConfirm(e) {
				this.params.bank_address_code = e.checkValue[1];
				// 选择地址选择器
				this.authCon.bankAds = `${e.checkArr[0]}-${e.checkArr[1]}`;
				uni.setStorageSync('authInfo', this.params);
				uni.setStorageSync('authCon', this.authCon);
				// this.params.bank_name = '';
				this.getBranch();
			},
			//模糊搜索银行卡名称
			bankInp(e) {
				let val = e.detail.value;
				let reg = new RegExp(val);
				let list = this.bankList;
				this.bankList = list.filter(i => {
					if (i.name.match(reg)) {
						return i;
					}
				});
			},
			//模糊搜索支行名称
			branchInp(e) {
				let val = e.detail.value;
				let reg = new RegExp(val);
				let list = this.bankBranch;
				this.bankBranch = list.filter(i => {
					if (i.sub_branch_name.match(reg)) {
						return i;
					}
				});
			},
			//选择银行名称
			checkBank(item) {
				this.params.account_bank = item.name;
				this.authCon.bankId = item.code;
				// this.params.bank_name = this.searchBank = '';
				this.searchBank = '';
				this.showBank = false;
				// this.getBranch();
			},
			//选择支行名称
			checkBranch(item) {
				this.params.bank_name = item.sub_branch_name;
				this.params.bank_branch_id = item.sub_branch_id;
				this.searchBranch = '';
				this.showBranch = false;
				this.getBranch();
			},
			/*获取银行支行列表*/
			getBranch() {
				uni.showLoading({
					title: '加载中...'
				})
				getBankBranch({
					city_code: this.params.bank_address_code,
					bank_id: this.authCon.bankId
				}).then(res => {
					if (res.code == 200) {
						this.bankBranch = res.data;
					} else {
						uni.showModal({
							content: res.data || '获取支行选项失败',
							showCancel: false
						});
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})
			},
			/*获取银行列表*/
			getBankList() {
				uni.showLoading({
					title: '加载中...'
				})
				this.bankList = [];
				getBank().then(res => {
					if (res.code == 200) {
						let bankObj = res.data;
						for (let i in bankObj) {
							this.bankList.push({
								code: i,
								name: bankObj[i]
							});
						}
					} else {
						uni.showModal({
							content: res.data || '获取开户行选项失败',
							showCancel: false
						});
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})
			},
			//选择店铺地址
			bindRegionChange(e) {
				let ads = e.detail.value;
				this.region = e.detail.value
				this.authCon.location = `${ads[0]}-${ads[1]}-${ads[2]}`;
				this.params.province = ads[0];
				this.params.city = ads[1];
				this.params.area = ads[2];
				uni.setStorageSync('authInfo', this.params);
				uni.setStorageSync('authCon', this.authCon);
			},
			getShop() {
				getStoreInfo().then(res => {
					if (res.code == 200) {
						let store = res.data.store;
						const {
							name,
							phone
						} = store;
						this.params.store_name = name;
						this.params.contact_phone = phone;
					} else {
						uni.showModal({
							content: res.data,
							showCancel: false
						});
					}
				});
			},
			/*更换身份证到期时间*/
			bindDateChange1: function(e) {
				this.params.id_card_valid_time_begin = e.target.value;
				uni.setStorageSync('authInfo', this.params);
			},
			bindDateChange2: function(e) {
				this.params.id_card_valid_time = e.target.value;
				uni.setStorageSync('authInfo', this.params);
			},
			//修改身份证姓名
			getVal(e, type) {
				if (type === 0) {
					this.params.contact_name = this.params.id_card_name = e.detail.value
				} else {
					this.params.contact_id_card = this.params.id_card_number = e.detail.value
				}
				uni.setStorageSync('authInfo', this.params);
			},
			/*文件流转为本地图片*/
			blobToDataURI(blob, callback) {
				var reader = new FileReader();
				reader.readAsDataURL(blob);
				reader.onload = function(e) {
					callback(e.target.result);
				};
			},
			/*截取身份证到期时间信息*/
			getCaption(obj, type) {
				if (type === 0) {
					obj = obj.split('-')[0]
				} else {
					obj = obj.split('-')[1]
				}
				if (obj != '长期') {
					obj = obj.replace(/\./g, '-');
				}
				return obj;
			},
			/*点击上传身份证照片*/
			getPhoto(form) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							title: '图片上传中...'
						});
						uni.uploadFile({
							url: `${this.$config.redirect_uri}/api/store/upload_cert_img`,
							filePath: tempFilePaths[0],
							name: 'img',
							formData: {
								type: form == 0 ? 1 : 2
							},
							header: {
								Authorization: 'Bearer' + uni.getStorageSync('token')
								// Authorization: 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvYXBpLmFwcC5qaXV3ZWl5dW4uY25cL2FwaVwvbWluaWxvZ2luXC93eExvZ2luIiwiaWF0IjoxNjQyNDA0MzQwLCJleHAiOjE2NDMyNjgzNDAsIm5iZiI6MTY0MjQwNDM0MCwianRpIjoieDJKbUZ4b0hNcW9CYlFxQSIsInN1YiI6NDk0MjgsInBydiI6IjIzYmQ1Yzg5NDlmNjAwYWRiMzllNzAxYzQwMDg3MmRiN2E1OTc2ZjcifQ.Lv2PVm0AxocgxhkEgjmegwcNA8SDbbpOQvy3NKZAjlc'
							},
							success: res => {
								let data = JSON.parse(res.data);
								if (Number(data.code) == 450001 || Number(data.status_code) ==
									500) {
									uni.showModal({
										content: data.data || '上传失败',
										showCancel: false
									});
									return false;
								}
								if (data.code == 200) {
									let cardInfo = data.data;
									if (form == 0) {
										//显示的正面身份证照
										let fontUrl = cardInfo.url.split('/')
										this.authCon.front = fontUrl[1] === 'daweiboshi-app' ?
											'https://image.chuliu.cc' + cardInfo.url : this.$config.redirect_uri + cardInfo.url
										// this.authCon.front = this.$config.redirect_uri + cardInfo
										// 	.url;
										//身份证姓名
										this.params.id_card_name = this.params.contact_name = cardInfo.Name;
										//上传的身份证正面
										this.params.id_card_copy = cardInfo.url;
										//身份证号码
										this.params.id_card_number = this.params.contact_id_card =
											cardInfo.IdNum;
									} else {
										//显示的反面身份证照
										let otherSideUrl = cardInfo.url.split('/')
										this.authCon.otherSide = otherSideUrl[1] ===
											'daweiboshi-app' ?
											'https://image.chuliu.cc' + cardInfo
											.url : this.$config.redirect_uri + cardInfo.url
										// this.authCon.otherSide = this.$config.redirect_uri +
										// 	cardInfo.url;
										//上传的身份证反面照	
										this.params.id_card_national = cardInfo.url;
										//身份证起始时间
										this.params.id_card_valid_time_begin = this.getCaption(
											cardInfo.ValidDate, 0);
										//身份证到期时间
										this.params.id_card_valid_time = this.getCaption(cardInfo.ValidDate, 1);
									}
									uni.setStorageSync('authInfo', this.params);
									uni.setStorageSync('authCon', this.authCon);
									uni.hideLoading();
								} else {
									uni.showModal({
										content: data.data || '上传失败',
										showCancel: false
									});
								}
							},
							fail: err => {
								uni.showModal({
									content: '上传身份证照片失败，请重试',
									showCancel: false
								});
							},
							complete: () => {
								uni.hideLoading();
							}
						});
					}
				});
			},
			/*提交审核*/
			submitAuth() {
				let params = this.params;
				if (!this.isSub) {
					uni.showModal({
						content: '请稍后再试',
						showCancel: false
					});
					return false;
				}
				let {
					id_card_name,
					id_card_number,
					id_card_valid_time,
					id_card_copy,
					id_card_national,
					province,
					city,
					area,
					address,
					account_bank, //开户银行
					bank_address_code, //开户行地址
					// bank_name, //开户银行（含支行）
					// bank_branch_id, //支行id
					account_number, //银行卡号
					id_card_valid_time_begin,
					store_name
				} = this.params;
				if (!store_name) {
					uni.showModal({
						content: '店铺名称不能为空！',
						showCancel: false
					});
					return false;
				}
				if (!id_card_copy) {
					uni.showModal({
						content: '请上传身份证人像面',
						showCancel: false
					});
					return false;
				}
				if (!id_card_national) {
					uni.showModal({
						content: '请上传身份证国徽面',
						showCancel: false
					});
					return false;
				}
				if (!id_card_name) {
					uni.showModal({
						content: '姓名格式不正确',
						showCancel: false
					});
					return false;
				}
				if (!id_card_number) {
					uni.showModal({
						content: '身份证号格式不正确',
						showCancel: false
					});
					return false;
				}
				if (!id_card_valid_time_begin) {
					uni.showModal({
						content: '请选择证件起始时间！',
						showCancel: false
					});
					return false;
				}
				if (!id_card_valid_time) {
					uni.showModal({
						content: '请选择证件到期时间',
						showCancel: false
					});
					return false;
				}
				if (!this.authCon.location) {
					uni.showModal({
						content: '所在地区不能为空',
						showCancel: false
					});
					return false;
				}
				if (!address) {
					uni.showModal({
						content: '详细地址不能为空',
						showCancel: false
					});
					return false;
				}
				if (!account_number) {
					uni.showModal({
						content: '银行卡号不能为空！',
						showCancel: false
					});
					return false;
				}
				if (!account_bank) {
					uni.showModal({
						content: '开户银行不能为空！',
						showCancel: false
					});
					return false;
				}
				if (!bank_address_code) {
					uni.showModal({
						content: '开户行地址不能为空！',
						showCancel: false
					});
					return false;
				}
				// if (!bank_name) {
				// 	uni.showModal({
				// 		content: '开户银行（含支行）不能为空！',
				// 		showCancel: false
				// 	});
				// 	return false;
				// }
				uni.showLoading({
					title: '提交中...'
				})
				this.isSub = false;
				secondAuth(params)
					.then(res => {
						if (res.code == 200) {
							//清空缓存的填写信息
							uni.removeStorageSync('authInfo');
							uni.removeStorageSync('authCon');
							uni.showModal({
								content: '提交认证成功',
								showCancel: false,
								success: res => {
									if (res.confirm) {
										uni.reLaunch({
											url: '../../../pages/auth-step/auth-step'
										});
									}
								}
							});
						} else {
							uni.showModal({
								content: res.data || '认证失败',
								showCancel: false
							});
						}
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
					})
					.finally(() => {
						this.isSub = true;
						uni.hideLoading();
					});
			}
		}
	};
</script>

<style lang="scss">
	.how_query {
		margin-top: 36rpx;

		text {
			color: $base-color;
			font-size: 32rpx;
		}

		.query_icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}

	.pop_box {
		.box_inp {
			width: 100%;
			background: #fff;
			height: 88rpx;
			margin: 20rpx 0;

			input {
				width: 85%;
				margin: 0 auto;
				height: 100%;
				border-radius: 44rpx;
				padding-left: 20rpx;
				background: #fff;
				border: 2rpx solid #eee;

			}
		}

		.scroll {
			height: 600rpx;
			text-align: center;

			.scroll_con {
				padding-bottom: 50rpx;

				view {
					font-size: 36rpx;
					padding: 15rpx;
					text-align: center;
				}
			}

			.no_branch {
				width: 100%;
				text-align: center;
				margin-top: 30rpx;
				color: #999;
				font-size: 30rpx;
			}
		}
	}

	.shop_auth {
		width: 100%;
		min-height: 100%;
		background: #fff;
		padding-bottom: 180rpx;

		.step {
			margin-top: 30rpx;
		}

		.content {
			width: 690rpx;
			margin: 0 auto;

			input {
				font-size: 30rpx;
			}

			.label {
				font-size: 32rpx;
				padding: 10rpx 0;
				font-weight: 600;

				.star {
					color: #f00;
					margin-left: 4rpx;
					font-size: 45rpx;
				}
			}

			.auth_inp {
				.inp_box {

					input,
					.date_picker {
						min-height: 96rpx;
						background: #f8f8f8;
						border-radius: 8rpx;
						font-size: 32rpx;
						padding: 0 30rpx;
					}
				}



				.iconfont {
					color: #a7a7a7;
					font-size: 35rpx;
				}

				.place {
					font-size: 32rpx;
					color: #a7a7a7;
				}

				.picker {
					min-height: 96rpx;
					background: #f8f8f8;
					padding: 0 30rpx;

					input {
						padding-left: 0;
						width: 92%;
						min-height: 96rpx;
					}

					text:first-child {
						font-size: 32rpx;
					}
				}
			}

			.main_btn {
				width: 300rpx;
				margin: 0 auto;
				height: 88rpx;
				background: $base-line-bg;
				border-radius: 44rpx;
				color: #fff;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
			}

			.second_btn {
				width: 300rpx;
				margin: 0 auto;
				height: 88rpx;
				border: 2rpx solid $base-color;
				background: #fff4f3;
				border-radius: 44rpx;
				color: #fff;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				color: $base-color;
			}

			.next {
				margin: 50rpx auto 30rpx;
			}

			.sub {
				margin: 30rpx auto 20rpx;
			}

			.hint {
				font-size: 36rpx;
				font-weight: 700;
				padding: 30rpx 0;
			}

			.card {
				width: 690rpx;
				height: 420rpx;
				margin-bottom: 30rpx;
				border-radius: 24rpx;
			}

			.rule {
				image {
					width: 100%;
					height: 140rpx;
				}

				view {
					font-size: 24rpx;
					color: #999;
					text-align: center;
					margin: 30rpx 0 60rpx;
				}
			}

			.notice {
				font-size: 28rpx;
				color: #999;
				text-align: center;
				margin: 15rpx 0 50rpx;
			}
		}
	}
</style>
