<template>
	<view class="margin-bottom-lg bg-white">
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">平台店铺入驻申请</block>
		</cu-custom>
		<view class="padding description">
			欢迎注册平台店铺，平台店铺是以城市团长、城市业务员、城市代理商为配套的联合经营体，业务经营开展
			包含绑客、拓客、流量引入、物业洽谈、驻点业务、推荐、分销等等系列经营，为师傅店铺引流订单；师傅
			作为服务商入驻为平台店铺服务方，按平台业务分成的方式开展与经营方、平台方进行公平合作。入驻服务商
			师傅、经营商必须以诚挚合作为前提，遵守平台规则，不得损害合作的各方利益，实现与业务团体持续经营，协同互惠。
		</view>
		<view class="padding bg-white">
			<radio-group @change="changeOperatorType">
				<view class="flex justify-between align-center">
					<view class="flex justify-start">
						<view class="cu-avatar round middle-avatar bg-main-color">
							<text class="cuIcon-peoplefill"></text>
						</view>
						<view class="margin-lr flex-column-around">
							<view>我是<text class="text-main-color">专业师傅</text></view>
							<view>申请服务店铺</view>
						</view>
					</view>
					<radio class="main-color" value="personalShop" />
				</view>
				<view class="flex justify-between align-center margin-top-sm">
					<view class="flex justify-start">
						<view class="cu-avatar round middle-avatar bg-main-color">
							<text class="cuIcon-shopfill"></text>
						</view>
						<view class="margin-lr flex-column-around">
							<view>我是<text class="text-main-color">配件耗材商</text></view>
							<view>申请商品店铺</view>
						</view>
					</view>
					<radio class="main-color" value="shop" />
				</view>
				<view class="flex justify-between align-center margin-top-sm">
					<view class="flex justify-start">
						<view class="cu-avatar round middle-avatar bg-main-color">
							<text class="cuIcon-group_fill"></text>
						</view>
						<view class="margin-lr flex-column-around">
							<view>我是<text class="text-main-color">服务商</text>，有师傅团队，</view>
							<view>申请服务店铺（公司执照）</view>
						</view>
					</view>
					<radio class="main-color" value="company" />
				</view>
				<view class="flex justify-between align-center margin-top-sm">
					<view class="flex justify-start">
						<view class="cu-avatar round middle-avatar bg-main-color">
							<text class="cuIcon-deliver_fill"></text>
						</view>
						<view class="margin-lr flex-column-around">
							<view>我有<text class="text-main-color">业务及师傅团队</text>，能城市运营及服务，
								申请独立运营（年费2-5万不等）</view>
						</view>
					</view>
					<radio class="main-color" value="city" />
				</view>
			</radio-group>
		</view>
		<view class="padding-sm bg-white">
			<view class="solid radius padding-bottom">
				<view class="text-xl text-black text-center">
					<text class="float-info padding-lr bg-white">申请资料</text>
				</view>
				<form @submit="submit">
					<view class="cu-form-group">
						<view class="title">店铺名称</view>
						<input name="shopName" placeholder="请输入店铺名称"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">申请人</view>
						<input name="name" placeholder="请输入申请人姓名" v-model="formData.name"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">联系电话</view>
						<input name="phone" type="number" placeholder="请输入手机号" v-model="formData.phone"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">入驻城市</view>
						<!-- <picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange" :value="multiIndex" :range-key="'areaName'" :range="areaList">
							<view class="picker">
								{{formData.area && formData.area.length ? formData.area[0].areaName + '-' + formData.area[1].areaName : '请选择'}}
							</view>
						</picker> -->
						<input name="city" placeholder="请输入入驻城市" v-model="formData.city"></input>
					</view>
					<view class="margin">
						<button class="bg-main-color long-btn" form-type="submit">提交</button>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curUserInfo: {},
				areaList: [],
				multiIndex: [0, 0],
				countDownNum: 0,
				formData: {
					operatorType: '',
					agreeContract: false,
					area: null
				},
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			loadData() {
				this.curUserInfo = this.$request.getCurUserInfo();
				this.loadAreaList();
			},
			changeOperatorType(e) {
				this.formData.operatorType = e.detail.value;
			},
			changeAgreeContract() {
				this.formData.agreeContract = !this.formData.agreeContract;
			},
			showContract() {
				uni.navigateTo({
					url: '/pages/my/contract'
				})
			},
			async loadAreaList() {
				let areaList = await this.$request.areaListByStep();
				areaList = areaList.data;
				let col1Code = areaList[0].areaCode;
				let subAreaList = await this.$request.areaListByStep({
					parentCode: col1Code
				});
				subAreaList = subAreaList.data;
				// let col2Code = subAreaList[0].areaCode;
				// let subSubAreaList = await this.$request.areaListByStep({ parentCode: col2Code });
				// subSubAreaList = subSubAreaList.data;
				this.areaList.push(areaList);
				this.areaList.push(subAreaList);
				// this.areaList.push(subSubAreaList);
			},
			regionChange(e) {
				this.multiIndex = e.detail.value;
				let chosenArea = [];
				for (let i = 0; i < this.areaList.length; i++) {
					chosenArea.push(this.areaList[i][this.multiIndex[i]]);
				}
				this.formData.area = chosenArea;
			},
			async regionColChange(e) {
				let colObj = e.detail;
				if (colObj.column == 0) {
					let subSubAreaList = [];
					// 通过一级查询二级，通过二级查三级
					let subAreaList = await this.$request.areaListByStep({
						parentCode: this.areaList[0][colObj.value].areaCode
					});
					subAreaList = subAreaList.data;
					this.areaList.pop();
					this.areaList.push(subAreaList);
					this.multiIndex = [colObj.value, 0];
				}
			},
			startCountDownNum() {
				this.countDownNum = 180;
				let t = setInterval(() => {
					this.countDownNum -= 1;
					if (this.countDownNum === 0) {
						clearInterval(t);
					}
				}, 1000);
			},
			async sendVertifyCode() {
				if (this.$validate.validContactNum(this.formData.phone)) {
					let res = await this.$request.sendVertifyCode({
						to: this.formData.phone
					});
					if (res && res.code === 0) {
						uni.showToast({
							icon: 'none',
							title: '验证码已发送'
						})
						this.startCountDownNum();
					} else if (res && res.msg) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '验证码发送失败'
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请正确输入手机号码'
					})
				}
			},
			validateForm(confirmFormData) {
				let formInfoValid = Boolean(confirmFormData.name) &&
					Boolean(confirmFormData.phone) &&
					Boolean(confirmFormData.area) &&
					Boolean(confirmFormData.code);
				if (!formInfoValid) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none',
						mask: true
					})
				} else if (!confirmFormData.agreeContract) {
					uni.showToast({
						title: '请阅读并同意合同书',
						icon: 'none',
						mask: true
					})
					formInfoValid = false;
				}
				return formInfoValid;
			},
			async submit(e) {
				let res = await this.$request.updateWorker({
					storeStatus: 1,
					type: 1,
					status: 0
				});
				if (res && res.code === 0) {
					uni.navigateTo({
						url: '/pages/index/index?menuCode=supplyChainPage'
					})
				} else {
					uni.showToast({
						icon: 'error'
					})
				}
				// let formData = {
				// 	...e.detail.value,
				// 	...this.formData,
				// 	city: this.formData.area && this.formData.area.length ? this.formData.area[this.formData.area.length - 1].areaId : null,
				// 	customerId: this.curUserInfo.customerId
				// }
				// let formValid = this.validateForm(formData);
				// if (formValid) {
				// 	let res = await this.$request.addCustomerPlace(formData);
				// 	if (res && res.code === 0) {
				// 		await this.$request.refreshCurUserCache();
				// 		uni.navigateBack({
				// 			delta: -1
				// 		})
				// 		uni.showToast({
				// 			title: '提交成功',
				// 			icon: 'success',
				// 			duration: 2000
				// 		})
				// 	} else if (res && res.msg) {
				// 		uni.showToast({
				// 			title: res.msg,
				// 			icon: 'none',
				// 			duration: 2000
				// 		})
				// 	} else {
				// 		uni.showToast({
				// 			title: '提交失败',
				// 			icon: 'error',
				// 			duration: 2000
				// 		})
				// 	}
				// }
			}
		}
	}
</script>

<style scoped>
	.description {
		line-height: 200%;
		color: #676666;
	}

	.middle-avatar {
		min-width: 100rpx;
		min-height: 100rpx;
	}

	.middle-avatar [class*="cuIcon-"] {
		font-size: 53rpx !important;
	}

	radio-group {
		display: unset;
	}

	.first-avatar {
		background-image: linear-gradient(45deg, #Ff9700, #Ed1c24);
		color: #ffffff;
	}

	.second-avatar {
		background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
		color: #ffffff;
	}

	.third-avatar {
		background-image: linear-gradient(45deg, #Ec008c, #6739b6);
		color: #ffffff;
	}

	.float-info {
		display: inline-block;
		position: relative;
		top: -18rpx;
		z-index: 1;
	}

	.radius {
		border-radius: 37rpx;
	}
</style>
