<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="mobile" maxlength="11" autocomplete="off" placeholder="输入6位验证码" />
		  <a class="btn" href="" @click="getsmscode">获取验证码</a>
	  </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('prototal')">《用户注册协议》</text>
		</view>
	</view>
	
      <!-- 登录按钮 -->
      <view class="login-button" @click="handleLogin">
        <text>注册</text>
      </view>
	  </form>
    </view>
	
	<!-- 找回密码 注册 -->
	<view class="regtips">
		<view>已拥有账户?<a class="loginnow" @tap="gologin">登录</a></view>
	</view>
	
	<!-- 弹框 -->
	<!-- <popup @open="openPop" :popurl="murl"></popup> -->
	
	<whpop></whpop>

  </view>
</template>

<script>
  import store from '@/store'
  import * as LoginApi from '@/api/login'
  import * as Verify from '@/utils/verify'
  // import Popup from '@/components/popup/popup'
  import whpop from './components/WhPopup'
  
  export default {
    components: {
      // nothing
	  // "popup":Popup
	  whpop
    },

    data() {
      return {
        // 正在加载
        isLoading: false,
        // 手机号
        mobile: '',
		// 密码
		vpass:"",
		// 重复密码
		repass:"",
		// 阅读标志
		isTick:false,
		// user type
		userType:"",
		// 用户类型选择
		utchk1:true,
		utchk2:false,
		// 需要打开的链接
		murl:"",
      }
    },

    methods: {

	  // 账户类型
       radioChange(evt) {
			this.userType = evt.detail.value
			if(this.userType=="企业"){
				this.utchk2=false
				this.utchk1=true;
			}else{
				this.utchk2=true
				this.utchk1=false;
			}
			let bb = this.$md5("123456")
	   },
	   // 判断是否阅读了政策协议
	   readpri(e){
		   this.isTick=!this.isTick
	   },
	   
	   // 判读两次密码是否相同
	   chkpass(){
		   let that  = this
		   if (that.vpass != that.repass){
			   this.$toast('两次输入的密码不一样')
			   return false
		   }
		   return ture;
	   },
	   
      // 表单验证
      formValidation() {
        const app = this
        // 验证提交登录
        if (!app.validteMobile(app.mobile) ||!app.validtePass(app.vpass)) {
            return false
        }
		// 处理用户类型
		if(app.utchk1){
			this.userType="企业"
		}
		if(app.utchk2){
			this.userType ="个人"
		}
		// 检查是否阅读了协议
		if(!app.isTick){
			this.$toast("请勾选《隐私保护政策》和《用户注册协议》")
			return false
		}
        return true
      },
	  
	  // 验证密码
	  validtePass(str){
		  if (Verify.isEmpty(str)) {
		    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
      },

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

      // 确认登录
      submitLogin() {
        const app = this
        app.isLoading = true
		
        store.dispatch('Login', {
			loginName: app.mobile,
			loginType: "0",
			password: this.$md5(app.vpass).toUpperCase(), // 转成大写
			userType: app.userType
          })
          .then(result => {
            // 显示登录成功
            app.$toast(result.message)
            // 相应全局事件订阅: 刷新上级页面数据
            uni.$emit('syncRefresh', true)
            // 跳转回原页面
            setTimeout(() => app.onNavigateBack(1), 2000)
          })
          .catch(err => {
			  console.log("err",err)
            // 跳转回原页面
            if (err.result.data.isBack) {
              setTimeout(() => app.onNavigateBack(1), 2000)
            }
          })
          .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.$toast(e)
		  // 弹框显示
		  // let xurl="pages/help/"+e
		  // this.$navTo(xurl)
		  // console.log(xurl)
		  // this.murl= xurl;
		  // this.$emit("open")
		  
		  // this.$navTo("pages/");
	  },
	  //
	  openPop(e){
		console.log(e)  
	  },

    }
  }
</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%;
	}



    // 短信验证码
    .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>
