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

    <p class="header">{{ usertitle ? "账号登录" : "" }}</p>
    <div class="rc-header">
      <!-- <i>|</i> -->
      <span
        v-for="(item, index) in swiperData"
        :key="index"
        @click="selectGoods(item, index)"
        :class="activeIndex == index ? 'active' : 'unactive'"
        >{{ item.title }}</span
      >
    </div>
    <div class="content">
      <van-field
      class="van-field-one"
        v-model="tel"
        placeholder="请输入手机号"
        :error-message="usertel"
        v-if="!ifpassword"
        clearable
      />

      <van-field
        v-model="text"
         class="van-field-two"
        placeholder="请输入账号"
    
        v-if="ifpassword"
        clearable
      />

      <van-field
        v-model="password"
        type="password"
        placeholder="请输入密码"
    
        v-if="ifpassword"
        clearable
      />
      <van-field
        v-if="!ifpassword"
        v-model="sms"
          class="van-field-two"
        center
        clearable
        placeholder="请输入验证码"
    
      >
        <van-button
          :disabled="flag"
          slot="button"
          size="small"
          @click="sendCode"
          class="rc-use"
          >{{ buttonmsg }}</van-button
        >
      </van-field>
      <div class="usecheck">
        <input
          type="checkbox"
          @click="checkBox()"
          style="width: 24px; height: 24px"
          v-model="inRank"
        />我已阅读同意隐私声明和账号使用协议
      </div>
      <div class="rc-button">
        <span>隐私政策</span>
        <nuxt-link :to="`/userlogin/edit/`">
          <span>注册账户</span>
        </nuxt-link>
      </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 { userLongin,sendMsg,vadatnmsg } from "../../ajax/getData";
import { mapMutations } from "vuex";
import Myheader from "~/components/header.vue"; //引用头部公共组件
export default {
  data() {
    return {
      phone: "",
      layerMSg: "手机格式不对",
      tel: "",
      password: "",
      activeIndex: 0,
      tamp:'',
      hash:'',
      text: "",
      sms: "",
      buttonmsg: "获取验证码",
      flag: false,
      adminCode: "",
      captchadata:'',
      zhud: false,
      loading: false,
      usertitle: true,
      ifpassword: false,
      checked: false,
      inRank: false,
      usercheckbox:false,

      swiperData: [
        // { index: 1 ,title:'短信验证码登录'},
        // { index: 2 ,title:'密码登录'},
      ],
    };
  },
  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() {},
  // watch: function () {
  //   console.log(this.inRank);
  // },
  methods: {

        ...mapMutations(["changeClod"]),
    checkBox(){
    console.log(event.target.checked)
    this.usercheckbox=event.target.checked

    },

    //获取验证码
       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.code);
          if(!data.code==1){
             return false
          }

      }

    },
    onClickHander(e) {
      console.log(e);
    },
    selectGoods(item, index) {
      this.activeIndex = index;
      console.log(index);

      if (this.activeIndex == 0) {
        this.ifpassword = false;
      } else {
        this.ifpassword = true;
      }
    },
    //注册账户
    useredd() {
      console.log("---注册账户");
      this.usertitle = false;
    },

    toLogin() {
      this.$router.replace("/login");
    },
    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{
        console.log(this.tel);
         let data = await userLongin(this.tel);
         console.log(data);
         this.vadmsg();
        

   this.$message({
                                type: 'warning',
                                message: '登录成功'
                            });
                            if(data.msg=='SUCCESS'){
                                       this.$router.push({
        path: "/",
      
      });
      let token=JSON.stringify(data);
                 this.changeClod({ cloud: token });
                            }else{
                                 this.$message({
                                type: 'warning',
                                message: data.msg
                            });
                            }
                             
                            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;
    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>