<template>
	<view class="apply-wrap">
		<form class="login-form" @submit="formSubmit">
			<view class="form-item">
				<text class="require-tip">*</text>
				<input v-model="form.name" class="item-inp" name="name" type="text" placeholder="请输入企业名称" />
			</view>
			<view class="form-item">
				<text class="require-tip">*</text>
				<input v-model="areaInfo.label" class="item-inp" type="text" :disabled="true" placeholder="请选择省市区" @tap="openAddress" />
				<Address ref="applyAddress" @onConfirm="areaConfirm"></Address>
			</view>
			<view class="form-item">
				<input v-model="form.addrDetail" class="item-inp" name="addrDetail" type="text" placeholder="请输入详细地址" />
			</view>
			<view class="form-item">
				<text class="require-tip">*</text>
				<input v-model="form.contactPhone" class="item-inp" name="contactPhone" type="number" maxlength="11" placeholder="请输入手机号,该号码会作为系统登录账号" />
			</view>
			<view class="form-item">
				<text class="require-tip">*</text>
				<input v-model="form.verifyCode" class="item-inp" name="verifyCode" type="number" maxlength="6" placeholder="请输入手机验证码" />
				<button class="getcode-btn" :disabled="isDisable" @click="getCodeValidate">{{nowVal}}</button>
			</view>
			<view class="form-item">
				<input v-model="form.introPhone" class="item-inp" name="introPhone" type="number" maxlength="11" placeholder="请输入推荐人手机" />
			</view>
			<view class="form-btn-con">
				<button class="form-btn" form-type="submit">提交</button>
				<text class="apply-btn" @click="goLogin">已有账号？去登录</text>
			</view>
		</form>
		<!-- 图文验证码 -->
		<uni-popup ref="imageTxtPopup" type="center">
			<!-- type值 用于区分applyImageTxt申请试用   forgetImageTxt忘记密码 -->
			<popup-con type="applyImageTxt" title="图文验证码" :popBtn="popBtn" :changeImg="changeImg" @captchaImg="captchaImg"></popup-con>
		</uni-popup>
		<view class="authUserYs">
			<checkbox-group @change="authuserChange">
				<label>
					<checkbox value="true" :checked="isAuthuserYs" class="login-form-checkbox" />
					注册代表同意<text @click="toYsPage()">智能巡店用户隐私政策</text>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
	import { isvalidPhone } from '@/libs/tools.js'
	import Address from '@/components/address.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import popupCon from '@/components/uni-popup/popup-con.vue'
	import { clzConfirm } from '@/libs/tools.js'
	import { sendVerifyCode, apply, validateUser } from '@/api/user.js'
	
	export default{
		components: {
			Address,
			uniPopup,
			popupCon
		},
		data(){
			return{
				form: {
					name: '',
					orgType: '',
					addrProvince: '',
					addrCity: '',
					addrDistrict: '',
					addrDetail: '',
					contactPhone: '',
					introPhone: '',
					verifyCode: ''
				},
				nowVal: '获取验证码',  //  按钮显示内容
				count: '',  //  当前秒数
				timer: null,  //  倒计时
				isDisable: false,  //  是否禁止获取验证码
				areaInfo: '',  //  省市区
				areaIdArr: [],  //  省市区id数组
				popBtn: [],  //  name为操作按钮名称，color为操作按钮颜色值
				changeImg: false,  //  是否重新更换图形验证码
				randomCode: '',  //  图片验证码随机码
				isAuthuserYs: false // 是否同意隐私政策
			}
		},
		mounted() {
			this.isAuthuserYs = this.$store.state.vuex_isUsrAuthYs
		},
		methods: {
			//  表单提交
			formSubmit(){
				//  表单校验
				if(this.form.name == ''){
					uni.showToast({icon: 'none',title: '请输入企业名称'})
					return
				}
				//  省市区
				if(this.areaIdArr.length == 0){
					uni.showToast({icon: 'none',title: '请选择省市区'})
					return
				}
				if(this.form.contactPhone == ''){
					uni.showToast({icon: 'none',title: '请输入手机号码'})
					return
				}
				if(!isvalidPhone(this.form.contactPhone)){
				  uni.showToast({icon: 'none',title: '请输入正确的手机号码'})
				  return
				}
				if(this.form.verifyCode == ''){
					uni.showToast({icon: 'none',title: '请输入验证码'})
					return
				}
				if(this.randomCode == ''){
					uni.showToast({icon: 'none',title: '请输入正确的手机验证码'})
					return
				}
				if(!this.isAuthuserYs){
					uni.showToast({icon: 'none',title: '请同意并阅读用户隐私政策'})
					return
				}
				let obj = this.form
				obj.addrProvince = this.areaIdArr[0]  //  省id
				obj.addrCity = this.areaIdArr[1]  //  市id
				obj.addrDistrict = this.areaIdArr[2]  //  区id
				obj.random = this.randomCode  //  图片验证码随机码
				//  申请试用
				apply(obj).then(res => {
					console.log(res)
					if(res.status == 200){
						clzConfirm({
						    title: '提示',
						    content: '资料已提交成功，客服会在3个工作日内同您联系。请保持电话畅通，谢谢！',
							showCancel: false,
							success: function (ret) {
						        if (ret.confirm||ret.index==0) {
									uni.reLaunch({
										url: '/pages/index'
									})
						        }
						    }
						})
					}else{
						uni.showToast({icon: 'none',title: res.message})
					}
				})
			},
			//  获取验证码
			getCodeValidate(){
				if(this.form.contactPhone){
					if(!isvalidPhone(this.form.contactPhone)){
						uni.showToast({icon: 'none',title: '请输入正确的手机号码'})
						return
					}else{
						//  校验手机号是否注册过
						validateUser({phone: this.form.contactPhone}).then(res => {
							if(res.status == 200){
								//  图文验证码
								this.$refs.imageTxtPopup.open()
							}else{
								uni.showToast({icon: 'none',title: res.message})
							}
						})
					}
				}else{
					uni.showToast({icon: 'none',title: '请先输入手机号'})
				}
			},
			//  图文验证码
			captchaImg(code, nowRandomCode){
				this.captchaVerify(code, nowRandomCode)
			},
			//  验证图片验证码
			captchaVerify(code, nowRandomCode){
				const _this = this
				let obj = {}
				obj.contactPhone = this.form.contactPhone
				obj.random = nowRandomCode
				obj.captcha = code
				//  短信验证码
				sendVerifyCode(obj).then(res => {
					console.log(JSON.stringify(res))
					if(res.status == 200){  //  验证码输入正确
						_this.randomCode = nowRandomCode  //  图片验证码随机码
						//  关闭   图形验证码 弹框
						_this.$refs.imageTxtPopup.close()
						//  开启倒计时
						this.getCodeFun()
						uni.showToast({icon: 'none',title: '验证码发送成功'})
					}else {  //  验证码输入错误
						_this.randomCode = ''
						//  切换验证码重新校验
						_this.changeImg = false
						_this.$nextTick(function(){
							_this.changeImg = true
						})
						uni.showToast({icon: 'none',title: res.message})
					}
				})
			},
			//  开始倒计时
			getCodeFun(){
				const TIME_COUNT = 60
				if (!this.timer) {
				  this.count = TIME_COUNT
				  this.timer = setInterval(() => {
				    if (this.count > 0 && this.count <= TIME_COUNT) {
				      this.count--
				      this.nowVal = this.count + 's'
				      this.isDisable = true
				    } else {
				      this.nowVal = '重新获取验证码'
				      clearInterval(this.timer)
				      this.timer = null
				      this.isDisable = false
				    }
				  }, 1000)
				}
			},
			//  选择省区市
			areaConfirm(e) {
				console.log('已选择的省市区', e)
				this.areaInfo = e
				this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
			},
			openAddress(){
				//  省市区  回显     参数为省市区id数组
				this.$refs.applyAddress.open(this.areaIdArr)
			},
			//  去登录
			goLogin(){
				uni.navigateTo({
				    url: '/pages/login/login'
				})
			},
			// 隐私
			authuserChange(e){
				this.isAuthuserYs = e.detail.value.length > 0
				this.$u.vuex('vuex_isUsrAuthYs', this.isAuthuserYs)
			},
			toYsPage(){
				uni.navigateTo({
					url:'/pages/login/userAuthYs'
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	@import './login.scss';
	.apply-wrap .login-form{
		padding-top: 80upx;
	}
	.getcode-btn {
		background-color: #298bf2 !important;
		color: #fff !important;
		border: none !important;
	}
</style>
