<template>
  <view class="container">

    <!-- 页面头部 -->
    <view class="header">
      <view class="title">
        <text>注册</text>
      </view>
    </view>
    <!-- 表单 -->
    <view class="login-form">
		<form>
      <!-- 手机号 -->
      <view class="form-item">
        <input class="form-item--input" type="number" v-model="mobile" maxlength="11" autocomplete="off" placeholder="输入手机号码"/>
      </view>
	  <!-- 验证码 -->
	  <view class="form-item">
		  <input class="form-item--input" type="number" v-model="chkcode" maxlength="11" autocomplete="off" placeholder="输入6位验证码" />
		  <button class="abtn" href="" @click="getsmscode" ref="abtn">获取验证码 </button>
	  </view>
	  <!-- 密码 -->
	  <view class="form-item">
		  <input class="form-item--input" type="password" v-model="vpass" autocomplete="off" placeholder="请输入密码" />
	  </view>
	  <!-- 重复密码 -->
	  <view class="form-item">
		  <input class="form-item--input" type="password" v-model="repass" autocomplete="off" placeholder="再次请输入密码" />
	  </view>

	<!-- 隐私政策等 -->
	<view class="privacy">
		<view>
			<checkbox :checked="isTick" color="#4399ff" class="ckbox" @click="readpri"></checkbox>
			我已阅读并同意网站的 <text class="atxt"  @click="viewdoc('private')">《隐私政策》</text>和 
			<text class="atxt" @click="viewdoc('protocol')">《用户注册协议》</text>和
			<text class="atxt" @click="viewdoc('escapeclause')">《免责协议》</text>
		</view>
	</view>
	
      <!-- 登录按钮 -->
      <view class="login-button" @click="handleReg">
        <text>注册</text>
      </view>
	  </form>
    </view>
	
	<!-- 找回密码 注册 -->
	<view class="regtips">
		<view>已拥有账户?<a class="loginnow" @tap="gologin">登录</a></view>
	</view>
	
	<!-- 弹框 -->
	<!-- <popup v-model="showPopup" :maskCloseAble="true" :popurl="murl"></popup> -->
	
	<whpop v-model="showPopup" :maskCloseAble="true" :mkey="murl"></whpop>

  </view>
</template>

<script>
  import store from '@/store'
  import * as regApi from '@/api/reg/index'
  import * as Verify from '@/utils/verify'
  import whpop from './components/WhPopup'
  
  export default {
    components: {
	  whpop
    },

    data() {
      return {
        // 正在加载
        isLoading: false,
        // 手机号
        mobile: '',
		//手机验证码
		chkcode:'',
		// 密码
		vpass:"",
		// 重复密码
		repass:"",
		// 阅读标志
		isTick:false,
		// user type
		userType:"",
		// 用户类型选择
		utchk1:true,
		utchk2:false,
		// 需要打开的链接
		murl:"",
		// 是否倒计时
		isCutdown:false,
		//倒计时
		st:120,
		// 显示/隐藏弹窗
		showPopup: false,
      }
    },

    methods: {
	   // 判断是否阅读了政策协议
	   readpri(e){
		   this.isTick=!this.isTick
	   },
	   
	   // 发送验证码
	   getsmscode(){
		 // 检查手机号是否填写  
		 let mb = this.mobile
		 if(this.validteMobile(mb) && this.isCutdown!=true){
			 regApi.sendSms(mb).then(res=>{
				 if(res.resultCode=="00000000"){
					 if(res.data ==1){
						 this.$toast("手机号已被注册")
						 this.st = 60
					 }else{ // 手机号未被注册
						 //发送验证码？
						 let pars={username:mb,purpose:1}
						 regApi.sendVerifyCode(pars).then(res=>{
								 // console.log("verify code",res)
								 if(res.resultCode === "00000000"){
									 // 倒计时
									this.countDown()
									this.$toast("发送成功")
								 }else{
									 this.$error(res.resultMsg)
								 }
						 })
					 }
					 //
				 }
				 console.log(res)
			 });
		 }
	   },
	   
	   // 倒计时
	   countDown(){
		   let app = this
		   app.$refs.abtn.$el.innerText=app.st+"秒"
		   let qq = app.st
		   // console.log(qq)
		   setTimeout(function(){
			   if(app.st>1){
				   app.st--
				   app.countDown(app.st)
				   //倒计时ing
				   app.isCutdown=true
			    }else{
					app.st=0
				    app.$refs.abtn.$el.innerText = "获取验证码"
			    }
		   },1000)

	   },
	   
      // 表单验证
      formValidation() {
        const app = this
        // 验证提交登录
        if (!app.validteMobile(app.mobile) ||!app.validtePass(app.vpass) || !app.chkpass() || !app.validteVerify(app.chkcode)) {
            return false
        }

		// 检查是否阅读了协议
		if(!app.isTick){
			this.$toast("请勾选《隐私保护政策》和 用《户注册协议》。")
			return false
		}
        return true
      },
	  //
	  // 验证密码
	  validtePass(str){
		  if (Verify.isEmpty(str)) {
		    this.$toast('请先输入登录密码')
		    return false
		  }
		  return true;
	  },
	  
	  // 判读两次密码是否相同
	  chkpass(){
		   let that  = this
		   if (that.vpass != that.repass){
			   this.$toast('两次输入的密码不一样')
			   return false
		   }
		   return true;
	  },

      // 验证手机号
      validteMobile(str) {
		  // 防抖
        if (Verify.isEmpty(str)) {
          this.$toast('请先输入手机号')
          return false
        }
        if (!Verify.isMobile(str)) {
		  this.$toast("输入正确格式手机号码")
          return false
        }
        return true
      },
	  
	  // 验证手机验证码
	  validteVerify(str){
		  if(Verify.isEmpty(str)){
			this.$toast("请输入手机验证码")
			return false
		  }
		  if(str.length!=6){
			  this.$toast("请输入6位数的验证码")
			  return false
		  }
		  return true
	  },

      // 点击登录
       handleReg() {
        const app = this
        if (!app.isLoading && app.formValidation()) {
           app.submitRegist()
        }
      },

      // 注册操作
      submitRegist() {
        const app = this
        app.isLoading = true
		// 提交到注册接口，返回成功后跳转到登录界面
		const rdata = {
			cellPhone: app.mobile,
			verifyCode: app.chkcode,
			password:app.$md5(app.vpass).toUpperCase(),
			passMd5ed: true
		}
		//
		 regApi.doreg(rdata,{isLoading:true})
		.then(res=>{
			if(res.resultCode === "00000000"){
				 app.$toast("注册成功")
				// 跳转回原页面
				setTimeout(() => app.onNavigateBack(1), 2000)
			}
		})
		.catch(err => {
			console.log("err",err)
		})
		.finally(() => app.isLoading = false)
      },

      /**
       * 登录成功-跳转回原页面
       */
      onNavigateBack(delta = 1) {
        const pages = getCurrentPages()
        if (pages.length > 1) {
          uni.navigateBack({
            delta: Number(delta || 1)
          })
        } else {
          this.$navTo('pages/index/index')
        }
      },
	  
	  // 调整到登录页面
	  gologin(){
		this.$navTo("pages/login/index")  
	  },
	  // 查看协议
	  viewdoc(e){
		  this.murl = e
		  this.showPopup = ! this.showPopup
	  },


    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 100rpx 60rpx;
    min-height: 100vh;
    background-color: #fff;
  }

  // 页面头部
  .header {
    margin-bottom: 60rpx;

    .title {
      color: #191919;
      font-size: 54rpx;
    }

  }

  // 输入框元素
  .form-item {
    display: flex;
    padding: 18rpx;
    border-bottom: 1rpx solid #f3f1f2;
    margin-bottom: 30rpx;
    height: 96rpx;

    &--input {
      font-size: 28rpx;
      letter-spacing: 1rpx;
      flex: 1;
      height: 100%;
    }

    &--parts {
      min-width: 100rpx;
      height: 100%;
    }
	
	&--radgrp{
		display: flex;
		flex:1;
		height: 100%;
	}
	
	.abtn{
		font-size: 26rpx;
	}



    // 短信验证码
    .captcha-sms {
      font-size: 28rpx;
      line-height: 50rpx;
      padding-right: 20rpx;

      .activate {
        color: #cea26a;
      }

      .un-activate {
        color: #9e9e9e;
      }
    }
  }


  // 登录按钮
  .login-button {
    width: 100%;
    height: 86rpx;
    margin-top: 80rpx;
    background: linear-gradient(to right, #242e4b, #242e4b);
    color: #fff;
    // border-radius: 80rpx;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    letter-spacing: 15rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  // 找回密码和 立即注册
  .regtips{
	  display: flex;
	 margin-top: 26rpx;
	 line-height: 1.4;
	 padding-right: 32rpx;
	 
	 .loginnow{
		 color: #5299dc;
		 
		 &:hover{
			 color: #a60000;
		 }
	 }
	 
	 

  }
  
  .privacy{
  	  display: flex;
  	  margin-top: 10rpx;
  	  
  	  .ckbox{
  		  border-radius: 50%;
  	  }
  	  
  	  .atxt{
  		  color: #4399ff;
  	  }
  }
</style>
