<template>
	<view class="margin-bottom-lg">
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">申请入驻平台运营商</block>
		</cu-custom>
		<view class="padding description">
			欢迎入驻城市运营商，我们在运营全国城市区县、物业、社区、街道等等的C客户端提供包含配送、安装、维修、保养、家政、家具等全面的家居上门服务，以及提供当地服务商、经销商、当地商场、平台的配套售后服务。诚挚邀请您加入所在城市的运营，服务规划行业市场！
		</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 first-avatar">
							<text class="cuIcon-friendfill"></text>
						</view>
						<view class="margin-left-sm flex-column-around">
							<view>具备多年经营基础</view>
							<view>申请入驻社区运营</view>
						</view>
					</view>
					<radio class="main-color" value="community" />
				</view>
				<view class="flex justify-between align-center margin-top-sm">
					<view class="flex justify-start">
						<view class="cu-avatar round middle-avatar second-avatar">
							<text class="cuIcon-group_fill"></text>
						</view>
						<view class="margin-left-sm flex-column-around">
							<view>具有良好业务开拓能力</view>
							<view>申请入驻城市区域营业</view>
						</view>
					</view>
					<radio class="main-color" value="cityArea" />
				</view>
				<view class="flex justify-between align-center margin-top-sm">
					<view class="flex justify-start">
						<view class="cu-avatar round middle-avatar third-avatar">
							<text class="cuIcon-activityfill"></text>
						</view>
						<view class="margin-left-sm flex-column-around">
							<view>具有业务团队及管理经营能力</view>
							<view>申请入驻城市营业</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">您的姓名<text class="text-red">*</text></view>
						<input name="name" placeholder="请输入姓名"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">注册电话<text class="text-red">*</text></view>
						<input name="phone" placeholder="请输入手机号" v-model="formData.phone"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">申请城市<text class="text-red">*</text></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>
					</view>
					<view class="cu-form-group">
						<view class="title">验证码<text class="text-red">*</text></view>
						<input class="radius-input" type="number" name="code" placeholder="请输入验证码"></input>
						<view v-if="countDownNum === 0" class="cu-btn bg-blue round-btn margin-left-xs shadow-blur" @click="sendVertifyCode">发送验证码
						</view>
						<view v-else class="cu-btn bg-gray round-btn margin-left-sm shadow-blur">已发送({{countDownNum}})
						</view>
					</view>
					<view class="cu-form-group">
						<view class="title">关联信息</view>
						<input name="comments" placeholder="请输入入驻关联信息备注"></input>
					</view>
					<view class="cu-form-group">
						<view>
							<checkbox style="transform:scale(0.7)" class="main-color" :value="formData.agreeContract" :checked="formData.agreeContract"
								@click="changeAgreeContract">
							</checkbox>
							<text class="margin-left-xs" @click="showContract">合同同意书链接</text>
						</view>
					</view>
					<view class="margin-lr-sm">
						<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() {
				console.log(this.formData)
				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 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 {
		width: 100rpx;
		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>
