// <!--  -->
<template>

    <div class="container">
      <!-- <Myheader/> -->

        <p class="header">账号注册</p>
         <div class="content">
             <van-field
                 v-model="tel"
                 placeholder="请输入手机号"
                 :error-message="usertel"
                  class="van-field-one"
                  clearable
             />
             <!-- <van-field
                 v-model="password"
                 type="password"
                 placeholder="请输入密码"
                 :error-message="pass"
                
                 clearable
             /> -->
             <van-field
              class="van-field-two"
                 v-model="sms"
                 center
                 clearable                
                 placeholder="请输入验证码"
              
              >
                 <!-- :error-message="test" -->
            
               
             <van-button :disabled="flag" slot="button" size="small"  @click="sendCode" class="rc-use">{{ buttonmsg }}</van-button>
            
             </van-field>
                  <div class="usecheck">
                <input type="checkBox" style="width:24px;height:24px"  @click="checkBox()">我已阅读同意隐私声明和账号使用协议
                     </div>

             <div class="rc-user">
              <van-button type="primary" :loading="loading" loading-text="登录..." size="large" :disabled="zhud" @click="register()" class="userbutton" >注册</van-button>
              <!-- <van-divider @click="toLogin">注册账户</van-divider> -->
              </div>

           
         </div>



    </div>
</template>


<script>
import {useredit,inserdiscount,sendMsg,vadatnmsg } from '../../ajax/getData' 
import Myheader from '~/components/header.vue' //引用头部公共组件
export default {
  data () {
    return {
      phone:'',
      layerMSg:'手机格式不对',
       tel:'',
            password:'',
            captchadata:'',
            tamp:'',
            hash:'',
            sms:'',
            buttonmsg:'获取验证码',
            flag:false,
            adminCode:'',
            zhud:false,
            usercheckbox:false,
            loading:false,
            usertitle:true,
             gender: '',
             inRank:false

    };
  },
  components: {
    // Myheader,
  },
   computed: {
        usertel () {
            if (this.tel === ""){
                return ''
            }else if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel)){
                return '手机号格式错误'
            }else {
                return ''
            }
        },
        pass () {
            if (this.password === ""){
                return ''
            }else if(this.password.length<6){
                return '密码不可小于6位'
            }else {
                return ''
            }
        },
        // test () {
        //     if (this.sms === ""){
        //         return ''
        //     }else if(this.sms.length !== 5){
        //         return '验证码格式错误'
        //     }else {
        //         return ''
        //     }
        // }
    },

  components: {
   
  },
  mounted(){
  },

  methods: {


      //获取验证码
       async usermsg() {
      console.log("-----");
      let data = await sendMsg(this.tel);
      if(data){
            console.log(data);
            this.captchadata=data.msgNum;
            this.tamp=data.tamp;
            this.hash=data.hash;
      }

    },

       //发送验证码数据
       async vadmsg() {
      console.log("-----");
      let data = await vadatnmsg(this.captchadata,this.hash,this.tamp);
      if(data){
          console.log(data);
          if(!data.code==1){
             return false
          }

      }

    },
        checkBox(){
    console.log(event.target.checked)
    this.usercheckbox=event.target.checked

    },

          //添加优惠券
       async serdiscount (mobile,couponId) {
      let data = await inserdiscount(mobile,couponId);
      if(data){
         console.log(data);
      }
      console.log(data);
    },
     //注册账户
        sendCode () {
            this.getCode()
        },
    getCode() {
      if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel) || this.tel === "") {
           this.$message({
                                type: 'warning',
                                message: '手机号码输入有误'
                            });
                            return
 
      } else{
      let time = 60;
      let timer;
        
      timer = setInterval(() => {
        time--;
        if (time === 0) {
          clearInterval(timer);
          this.flag = false;
          this.buttonmsg = "点击发送验证码";
          return;
        }
        this.flag = true;
        this.buttonmsg = time + "秒后重新发送";
      }, 1000);
      this.usermsg();
      }
    },
       async register () {
                   if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel) || this.tel === "") {
           this.$message({
                                type: 'warning',
                                message: '手机号码输入有误'
                            });
                            return
 
      }
            if(this.sms!==this.captchadata){
              this.$message({
                                type: 'warning',
                                message: '验证码输入有误请重新输入'
                            });
                            return
      }
        if(this.sms==''){
         this.$message({
                                type: 'warning',
                                message: '请输入验证码'
                            });
                            return
      }
      console.log(this.usercheckbox);
      if(this.usercheckbox==false){
        console.log('----');
          this.$message({
                                type: 'warning',
                                message: '请先勾选'
                            });
            if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel) || this.tel === "") {
           this.$message({
                                type: 'warning',
                                message: '手机号码输入有误'
                            });
                            return
 
      }
      }
     else{


        let user= JSON.parse(localStorage.getItem("userInfo"));
        console.log(this.tel);
         let data=await useredit(this.tel);
           this.vadmsg();
                                this.$message({
                                type: 'warning',
                                message: data.msg
                            });
                            if(data){
                          let couponId='0000000123';
                           this.serdiscount(user.data.mobile,couponId);
                           setTimeout(() => {
                                this.serdiscount(user.data.mobile,"0000000140");
                           }, 100);
                             setTimeout(() => {
                                this.serdiscount(user.data.mobile,"0000000122");
                           }, 500);
                         
                            }
                           
                            return
     
      }


        
        },

        // reallR () {
        //     this.zhud=true
        //     this.loading=true
        //     axios.post('https://www.daxunxun.com/users/register', {
        //     username: this.tel,
        //     password: this.password
        // }).then(res=>{
        //     this.zhud=false
        //     this.loading=false
        //     if (res.data === 2) {
        //         Toast('用户名已注册，请直接登录')
        //     } else if (res.data === 0) {
        //         Toast('注册失败')
        //     } else {
        //     Toast('注册成功')
        //     }
        // })
        // }
     

  }
}

</script>
<style  lang="less" scoped>
@media screen and(min-width: 320px) and(max-width:768px) {
   .van-field-one{
   width: 335px;
background: #F6F6F6;
border-radius: 4px;
margin: 0 auto;
  }
  .van-field-two{
    margin: 0 auto;
    width: 335px;
height: 48px;
background: #F6F6F6;
margin: 0 auto;
border-radius: 4px;
margin-top: 24px;
  }
   .usecheck{
    display: flex;
    text-align: left;
    width: 335px;
    margin: 0 auto;
    align-items: center;
    margin-top: 18px;
 
  }
  .container {
   
    font-size: 0.1rem;
    .van-field__body {
      border-bottom: 1px solid red;
    }
    .content {
      margin-top: 24px;
    }
    .userfoget {
      font-size: 14px;
      color: #333333;
      border-bottom: 1px solid #333333;
      margin-left: 20px;
    }
    .rc-header {
      text-align: center;
    }
    .rc-header span:first-of-type {
      margin-right: 60px;
    }
    .rc-header span:last-child {
      margin-right: 20px;
    }
    .active {
      font-size: 18px;
      color: #666666;
    }
    .unactive {
      font-size: 18px;
      color: #999999;
    }
    .rc-use {
      width: 155px;
      height: 48px;
      opacity: 1;
      border-radius: 30px;
      outline: none;
      border: none;
      border: 2px solid #e1001a;
      color: #e1001a;
      font-size: 14px;
    }
    .rc-user {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 40px;
    }
    .userbutton {
      width: 335px;
      height: 48px;
      background: #e2001a;
      opacity: 1;
      border-radius: 30px;
      outline: none;
      border: none;
      margin: 0 auto;
    }
    van-button {
      width: 335px;
      height: 48px;
      background: #e2001a;
      opacity: 1;
      border-radius: 30px;
    }
    .header {
      color: #333333;
      font-size: 30px;
      text-align: center;
    }
    input {
      border: none;
      outline: none;
    }
    button {
      outline: none;
      border: none;
      list-style: none;
      background: none;
    }
    .rc-center {
      font-size: 30px;
      color: #333333;
      text-align: center;
    }
    .rc-center input {
      color: #999999;
      font-size: 14px;
    }
    .userlogin {
      width: 92%;
      margin: 0 auto;
    }
   .rc-button {
      font-size: 14px;
       width:335px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
      color: #333333;
    }
    .rc-button span {
      border-bottom: 1px solid #333333;
    }
    .rc-button span {
      margin-left: 20px;
      margin-top: 24px;
    }
    .rc-button span:last-child {
      margin-right: 20px;
      display: block;
    }
  }
}
//    /* 最小768px最大1920 *pc端/
@media screen and (min-width: 768px) and (max-width: 1920px) {
  .usecheck{
    display: flex;
    text-align: left;
    width: 395px;
    margin: 0 auto;
    align-items: center;
    margin-top: 18px;
 
  }
  /deep/
  .van-field-one{
   width: 395px;
height: 48px;
background: #F6F6F6;
border-radius: 4px;
margin: 0 auto;
  }
  .van-field-two{
    margin: 0 auto;
    width: 395px;
height: 48px;
background: #F6F6F6;
margin: 0 auto;
border-radius: 4px;
margin-top: 24px;
  }
  .container {
    // border: 1px solid red;
    .header {
      color: #333333;
      font-size: 0.4rem;
      text-align: center;
    }
    .content {
      margin-top: 24px;
    }
    .userfoget {
      font-size: 14px;
      color: #333333;
      border-bottom: 1px solid #333333;
      margin-left: 20px;
    }
    .rc-header {
      text-align: center;
    }
    .rc-header span:first-of-type {
      margin-right: 60px;
    }
    .rc-header span:last-child {
      margin-right: 20px;
    }
    .active {
      font-size: 0.1rem;
      color: #666666;
    }
    .unactive {
      font-size: 0.1rem;
      color: #999999;
    }
    .rc-use {
      width: 1.55rem;
      height: 0.48rem;
      opacity: 1;
      border-radius: 0.15rem;
      border: 2px solid #e1001a;
      color: #e1001a;
      font-size: 0.14rem;
      background: white;

    }
    .rc-user {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 40px;
    }
    .userbutton {
      width: 3.8rem;
      height: 0.48rem;
      background: #e2001a;
      border-radius: 0.15rem;
      outline: none;
      border: none;
      margin: 0 auto;
    }
    van-button {
      width: 335px;
      height: 48px;
      background: #e2001a;
      opacity: 1;
      border-radius: 30px;
    }

    input {
      border: none;
      outline: none;
    }
    button {
      outline: none;
      border: none;
      list-style: none;
      background: none;
    }
    .rc-center {
      font-size: 30px;
      color: #333333;
      text-align: center;
    }
    .rc-center input {
      color: #999999;
      font-size: 14px;
    }
    .userlogin {
      width: 92%;
      margin: 0 auto;
    }
    .rc-button {
      font-size: 14px;
       width:395px;
    /* line-height: 0.85rem; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
 

      color: #333333;
    }
    .rc-button span {
      border-bottom: 1px solid #333333;
    }
    .rc-button span {
      margin-left: 20px;
      margin-top: 24px;
    }
    .rc-button span:last-child {
      margin-right: 20px;
      display: block;
    }
  }
}


</style>