<template>
	<view v-if="curUserInfo && curUserInfo.status != -1">
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<!-- <block slot="content"></block> -->
		</cu-custom>
		<view class="margin-lr-sm margin-tb-lg shadow-warp">
			<view class="bg-gray flex justify-start align-center text-xl padding-lr padding-top-xs">
				<view class="padding-lr padding-tb-sm" :class="curAccountType === '1' ? 'curTab' : ''" data-type="1" @click="changAccountType">银行</view>
			</view>
			<view v-if="curAccountType === '1'" class="bg-white padding text-lg">
				<view>
					<view class="margin-bottom-sm">
						姓名<text class="margin-left-xs text-red">*</text>
					</view>
					<input type="text" placeholder="请输入开户人姓名" placeholder-style="color:#989898" v-model="formData.name">
				</view>
				<view class="margin-top">
					<view class="margin-bottom-sm">
						身份证号码<text class="margin-left-xs text-red">*</text>
					</view>
					<input type="idcard" placeholder="请输入身份证号码" placeholder-style="color:#989898" v-model="formData.certId">
				</view>
				<view class="margin-top">
					<view class="margin-bottom-sm">
						手机号<text class="margin-left-xs text-red">*</text>
					</view>
					<input type="number" placeholder="请输入手机号" placeholder-style="color:#989898" v-model="formData.phone">
				</view>
				<view class="margin-top">
					<view class="margin-bottom-sm">
						银行卡号<text class="margin-left-xs text-red">*</text>
					</view>
					<input type="number" placeholder="请输入银行卡号" placeholder-style="color:#989898" v-model="formData.bankNum">
				</view>
			</view>
		</view>
		<!-- 操作按钮 -->
		<view class="margin-lr">
			<button class="cu-btn lg bg-main-color long-btn shadow-blur" @click="submit">提交</button>
		</view>
		<view class="text-red padding">
			工盟互联小程序承诺此账户只用于接收家政服务收益
		</view>
		<!-- 账户及实名弹窗 -->
		<vertify-certify ref="vertifyCertify"></vertify-certify>
	</view>
</template>

<script>
	import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';
	
	export default {
		components: {
			myUniCombox
		},
		data() {
			return {
				curAccountType: '1',
				provinceList: [],
				cityList: [],
				formData: {
					provinceObj: {},
					cityObj: {}
				},
				curUserInfo: {}
			}
		},
		onLoad(options) {
			this.loadData();
		},
		methods: {
			async loadData() {
				// let res = await this.$request.areaListByStep();
				// this.provinceList = res.data;
				this.curUserInfo = this.$request.getCurUserInfo();
			},
			async chooseRegion(e) {
				let res = await this.$request.areaListByStep({
					parentCode: e.areaCode
				});
				this.cityList = res.data;
				this.formData.cityObj = {}
			},
			changAccountType(e) {
				this.curAccountType = e.currentTarget.dataset.type;
			},
			validData() {
				if (!this.formData.name || !this.formData.certId || !this.formData.phone || !this.formData.bankNum) {
					return false;
				}
				return true;
			},
			async submit() {
				if (this.curAccountType === '1') {
					if (!this.checkCertify()) {
						return;
					}
					if (!this.validData()) {
						uni.showToast({
							icon: 'none',
							title: '请完成必填项的填写'
						})
						return;
					}
					let params = {
						...this.formData,
						workerId: this.curUserInfo.workerId
					}
					let res = await this.$request.bindBankCard(params);
					if (res && res.code === 0) {
						uni.navigateBack({
							delta: -1
						})
					} else if (res && res.msg) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					} else {
						uni.showToast({
							title: '绑定失败',
							icon: 'error'
						})
					}
				}
			},
			async checkCertify() {
				// 查询实名信息
				let certifyInfoRes = await this.$request.getWorkerCertify();
				this.certifyInfo = certifyInfoRes.data;
				if (!this.certifyInfo || !this.certifyInfo.workerCertificationId) {
					this.$refs.vertifyCertify.showModal();
					return false;
				} else if (this.certifyInfo.status != 1) {
					uni.showToast({
						icon: 'none',
						title: '实名认证审核通过后才可进行操作',
						duration: 2500
					})
					return false;
				}
				return true;
			}
		},
	}
</script>

<style scoped>
	.curTab {
		background-color: #ffffff;
		color: #0081ff;
		border-radius: 15rpx 15rpx 0 0;
	}
</style>
