<template>
	<view class="content">
		<process :process="3" :type="0" title="业务流程"></process>
		<view class="content-txt">
			
			<view class="title">入驻协议内容</view>
			<view class="txt">
			</br>
师傅入驻须知
</br>
一、入驻流程
提交资料 → 审核通过 → 签署协议 → 开始接单
</br>
</br>
二、入驻条件
</br>
1.年龄在18-60周岁之间；
</br>
2.初中及以上学历；
</br>
3.能熟练使用智能手机；
</br>
4.与人交流时态度良好，沟通顺畅；
</br>
</br>
三、注意事项
</br>
1.若审核通过，平台工作人员将会电话联系您，并邀约参加师傅培训会，请您耐心等待；
</br>
2.开关插座、线路维修、空开漏保等品类的师傅需持有电工证;
</br>
3.家电清洗品类的师傅需持有专业高温清洗设备，并在每一笔清洗订单中上传设备照片（单独水枪类清洗设备不符合规定）。
</br>
4.请如实填写自己擅长品类，如有核实师傅申请的维修品类和开通账号的维修品类不一致，将不给予接单资格
</br>
</view>
		</view>
		<view class="base-list">
			<view class="item item-input flex-yc">
				<label class="label">签约人</label>
				<view class="input flex1 u-text-right">{{baseInfo.name}}</view>
			</view>
			<view class="item item-select u-row-between">
				<view class="label">结算方式：</view>
				<u-radio-group v-model="baseInfo.pay_type" ref="radioGroup"  @change="radioGroupChange">
					<u-radio 
						ref="radio"
						v-for="(item, index) in radioList" :key="index" 
						:name="item.value"
					>
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<template v-if="baseInfo.pay_type==='bankcard'">
				<view class="item item-input flex u-row-between">
					<label class="label">银行名称</label>
					<input placeholder="请输入银行名称" maxlength="100" v-model="baseInfo.bank_name" class="input flex1" />
				</view>
				<view class="item item-input flex u-row-between">
					<label class="label">银行卡号</label>
					<input placeholder="请输入银行卡号" maxlength="30" v-model="baseInfo.bank_no" type="number" class="input flex1" />
				</view>
				<view class="item item-input flex u-row-between">
					<label class="label">支行名称</label>
					<input placeholder="请输入支行名称" maxlength="100" v-model="baseInfo.bank_site" class="input flex1" />
				</view>
			</template>
			<template v-else>
<!-- 				<view class="item item-input flex u-row-between">
					<label class="label">姓名</label>
					<input placeholder="请输入账户名称" maxlength="30" v-model="baseInfo.bank_name" class="input flex1" />
				</view> -->
				<view class="item item-input flex u-row-between">
					<label class="label">支付宝账号</label>
					<input placeholder="请输入支付宝账号" maxlength="100" v-model="baseInfo.bank_no" class="input flex1" />
				</view>
			</template>
		</view>
		<view class="seat"></view>
		<view class="btn-wrap flex-xc">
			<button class="btn-submit" :disabled="!submitStatus" @click="$u.debounce(submitBaseInfo, 500)">
				我已阅读协议，点击签约{{count ? '（'+count+'）' : ''}}
			</button>
		</view>
	</view>
</template>

<script>
	const globalUrl = process.uniEnv || {}
	const ucenterApiurl = globalUrl.ucenterUrl.apiUrl
	const app = getApp()
	export default {
		data() {
			return {
				token:app.globalData.token,
				baseInfo: {
					name: "郭小清",
					id_card_no: "43072219800123456",
					id: "",
					bank_no: '',// 银行卡号
					bank_site:'', // 开户行
					bank_name:'', // 银行名称
					pay_type:'bankcard' // 结算方式：bankcard银行卡，alipay支付宝
				},
				radioList:[{
					name:'银行卡',
					value:'bankcard'
				},{
					name:'支付宝',
					value:'alipay'
				}],
				settledInfo:{},
				saving: false,
				isStop:false,
				count:9,
			}
		},
		onLoad(e) {
		},
		onShow(){
			const refs = this.$refs
			this.$nextTick(()=>{
				if(refs['radio'] && refs['radio'].length>0){
					refs['radio'][0].setRadioCheckedStatus()
				}
			})

			this.startCounting()
			this.getBaseInfo()
			// const url = 'https://m.test.ibanshou.cn/activity/settled_2021/mini'
			// uni.navigateTo({
			// 	url:'/pages/settle/web?url='+url
			// })
			// https://m.test.ibanshou.cn/activity/settled_2021/mini
		},
		computed: {
			submitStatus() {
				const baseInfo = this.baseInfo
				let flag = baseInfo.pay_type && baseInfo.bank_no
				if(baseInfo.pay_type==='bankcard'){
					flag = flag && baseInfo.bank_site && baseInfo.bank_name
				}
				return flag && !this.saving && this.isStop;
			},
		},
		components: {

		},
		watch:{
			isRefresh(val){
				if(val){
					this.initPage()
				}
			}
		},
		methods: {
			startCounting : function () {
				if(this.isStop){
					return
				}
				
				this.count = this.count - 1
				
				if(this.count > 0){
					setTimeout(this.startCounting, 1000);
				}else{
					
					this.isStop = true
					
				}
				
			},
			refreshPage(){
				this.getBaseInfo()
			},
			checkBaseInfo() {
				const baseInfo = this.baseInfo;
				let rulesObj = {
					pay_type: function(value) {
						if (!value) {
							uni.showToast({
								title: '请选择支付方式',
								icon: 'none'
							});
							return false;
						}
					},
					mobile: function(value) {
						const mobileReg = /^[1][3,4,5,7,8][0-9]{9}$/;
						if (!value) {
							uni.showToast({
								title: '请输入您的电话',
								icon: 'none'
							});
							return false;
							return false;
						} else if (!mobileReg.test(value)) {
							uni.showToast({
								title: '请输入正确的电话',
								icon: 'none'
							});
							return false;
						}
					},
					bank_site: function(value) {
						if (!value && baseInfo.pay_type==='bankcard') {
							uni.showToast({
								title: '请输入支行名称',
								icon: 'none'
							});
							return false;
						}
					},
					bank_no: function(value) {
						const pay_type = baseInfo.pay_type
						const txt = pay_type==='bankcard' ? '银行卡号' : '支付宝账户'
						const bandReg = /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/
						if (!value) {
							uni.showToast({
								title: '请输入' + txt,
								icon: 'none'
							});
							return false;
						}else if (!bandReg.test(value) && pay_type==='bankcard') {
							uni.showToast({
								title: '请输入正确的银行卡号',
								icon: 'none'
							});
							return false;
						}
					}, 
					bank_name: function(value) {
						const txt = baseInfo.pay_type==='bankcard' ? '银行' : '支付宝账户'
						if (!value && baseInfo.pay_type==='bankcard') {
							uni.showToast({
								title: '请输入'+txt+'名称',
								icon: 'none'
							});
							return false;
						}
					},
				};
				const flagArr = Object.keys(baseInfo).some((key) => {
					// 返回验证失败的数组
					let flag = true;
					if (rulesObj.hasOwnProperty(key)) {
						const func = rulesObj[key];
						const value = baseInfo[key];
						if (typeof func === "function") {
							flag = func(value) === false ? false : true;
						}
					}
					return !flag;
				});
				return !flagArr || flagArr.length < 1;
			},
			// async checkBank(){
			// 	const baseInfo = this.baseInfo;
			// 	const type = this.baseInfo.pay_type
			// 	const request = {
			// 		bankcard:this.$u.api.checkSettleBank,
			// 		alipay:this.$u.api.checkSettleAlipay
			// 	}
				
			// 	const params = {
			// 		name:baseInfo.bank_name,
			// 	}
			// 	if(type==='bankcard'){
			// 		params['cardNumber'] = baseInfo.bank_no
			// 	}else if(type==='alipay'){
			// 		params['account'] = baseInfo.bank_no
			// 	}
			// 	const res = await request[type](params)
			// 	if(res.code!==200){
			// 		return 
			// 	}
			// 	return true
			// },
			radioGroupChange(val){
				this.baseInfo.bank_name = ''
				this.baseInfo.bank_no = ''
				this.baseInfo.bank_site = ''
			},
			async getBaseInfo(){
				const app = getApp()
				const callBack = (vm,result)=>{
					vm.settledInfo = result
					const record = result.record
					vm.baseInfo.name = record.id_card_name
					vm.baseInfo.id = record.id
				}
				let settledInfo = app.globalData.settledInfo
				if(settledInfo){
					callBack(this,settledInfo)
					return
				}
				await app.getBaseInfo(this,callBack)
			},
			async submitInfo(){
				// checkSettleSignInfo
				const baseInfo = this.baseInfo;
				const params = {
					...baseInfo,
				}
				if(params.pay_type==='alipay'){
					params.bank_site = '支付宝'
				}
				const res = await this.$u.api.checkSettleSignInfo(params)
				console.log(res,'res')
				if (res.code != 200) {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					return false;
				}
				return true
			},
			async jumpSign(){
				// 跳转签约
				const baseInfo = this.baseInfo;
				const params = {
					...baseInfo,
				}
				const res = this.$u.api.checkSettleSignInfo(params)
				if (res.status != 200) {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					return;
				}
				return true
			},
			async submitBaseInfo() {
				const baseInfo = this.baseInfo;
				if (!this.checkBaseInfo()) {
					return;
				}
				this.saving = true;
				uni.showLoading({
					title: '加载中'
				});
				const result = await this.submitInfo()
				if(!result){
					this.saving = false;
					return 
				}
				this.goSign()
				// const requestArr = ['submitBaseInfo','jumpSign']
				// for(let i=0;i<requestArr.length;i++){
				// 	const result = await this[requestArr[i]]()
				// 	console.log(result,'result')
				// 	if(!result){
				// 		break;
				// 	}
				// }
				uni.hideLoading()
				uni.showToast({
					title: '入驻基本信息提交成功',
					icon: 'success'
				});
				// let timer = setTimeout(() => {
				// 	clearTimeout(timer)
				// 	uni.navigateTo({
				// 		url:'/pages/settle/file'
				// 	})
				// }, 2000)
			},
			async goSign(){
				const token = app.globalData.token;
				const settledInfo = this.settledInfo
				const baseInfo = this.baseInfo
				const params = {
					namePsn:settledInfo.record.id_card_name,
					idNumberPsn:settledInfo.record.id_card_number,
					province:settledInfo.provinceList.join(','),
					city:settledInfo.cityList.join(','),
					cardName:baseInfo.bank_name,
					cardCode:baseInfo.bank_no,
					pay_type:baseInfo.pay_type
				}
				const res = await this.$u.post(globalUrl.systemUrl.apiUrl + '/wxh-worker-rest/rest/third/'+token+'/wuKong/sign',params,{'content-type': 'application/x-www-form-urlencoded'})
				this.saving = false;
				if(res.code!==200){
					uni.showToast({
						title:'跳转签约失败',
						icon:'none'
					})
					return 
				}
				
				const url = res.data
				
				getApp().globalData.signUrl = url
				
				uni.navigateTo({
					// url:'/pages/settle/web?url='+url
					url:'/pages/settle/web'
				})
			}
		},
	}
</script>

<style lang="scss">
	.content{
		width:100%;
		height:100vh;
		display: flex;
		flex-direction: column;
		background-color: #F3F3F3;
	}
	.content-txt{
		overflow: auto;
		flex:1;
		.title{
			padding:30rpx 30rpx 0;
			line-height: 40rpx;
			text-align: center;
			font-weight: bold;
			color: #333;
			font-size: 36rpx;
		}
		.txt{
			padding:20rpx 30rpx;
			line-height: 40rpx;
			color: #333;
			font-size: 28rpx;
		}
	}
	.base-list {
		// height:524rpx;
		height:550rpx;
		/deep/ .u-radio__label{
			line-height: 40rpx;
		}
		.item {
			display: flex;
			padding: 28rpx 30rpx;
			width: 100%;
			font-size: 32rpx;
			color:#333;
			border-bottom: 2rpx solid #FDFDFD;
			background-color: #fff;
			.label {
				line-height: 40rpx;
				color: #333;
				font-size: 32rpx;
			}

			.txt {
				line-height: 40rpx;
				color: #333;
				font-size: 32rpx;
			}

			.required {
				margin: 0 6rpx;
				color: red;
				font-size: 32rpx;
			}

			.iconfont {
				color: #999;
			}
		}

		.tips {
			margin-top: 20rpx;
			padding: 0 30rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #666;

			&+.id-identity-box {
				margin-top: -38rpx;
				margin-bottom: 40rpx;
			}
		}

		.id-identity-box {
			.txt {
				padding-top: 8rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #666;

				&:first-child {
					margin-top: -58rpx;
					padding-top: 12rpx;
				}

				.red {
					color: red;
				}
			}

			// &.tips{
			//     margin-bottom:0!important;
			// }

		}

		.item+.tips {
			margin-top: -38rpx;
			margin-bottom: 58rpx;
		}

		/*选择内容*/
		.item-select {
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
			justify-content: space-between;
			border-bottom: 1rpx solid #f5f5f5;
		}

		.flex1 {
			flex: 1 !important;

			&.txt {
				white-space: nowrap;
				max-width: 450rpx;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.item-input {
			overflow: hidden;

			input {
				text-align: right;
				line-height: 44rpx;
				width: 100%;
				font-size: 30rpx;
				color: #333;
				font-weight: 400;
			}

			.input-readonly {
				font-size: 30rpx;
				color: #999;
				font-weight: 400;
			}

			input::-webkit-input-placeholder {
				font-size: 30rpx;
				color: #999;
				font-weight: 400;
			}

			input:-moz-placeholder {
				font-size: 30rpx;
				color: #999;
				font-weight: 400;
			}

			input:-ms-input-placeholder {
				font-size: 30rpx;
				color: #999;
				font-weight: 400;
			}
		}
	}

	.title {
		padding: 30rpx 0 40rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
	}

	.seat {
		padding-bottom: 144rpx;
	}

	/*提交按钮*/
	.btn-wrap {
		position: fixed;
		// margin: px2rem(36);
		left: 0;
		right: 0;
		bottom: 0;
		padding: 30rpx 0;
		background: #fff;

		.btn-submit {
			width: 600rpx;
			// left: 5%;
			// bottom: px2rem(36);
			height: 104rpx;
			line-height: 104rpx;
			border-radius: 52rpx;
			background: #2272FF;
			font-size: 32rpx;
			color: #fff;

			&[disabled] {
				border: 2rpx solid #999;
				background-color: #f3f3f3;
				color: #999;
			}
		}
	}

	/* 	.back_view{
		background-color: #FFFFFF;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	 */
</style>
