<template>
  <div class="container rc-full-width">
    <Myheader></Myheader>
    <div class="rc-top"></div>
    <div class="content ts-max-width--460">
      <h2 class="rc-beta rc-text--center">{{ usertitle ? "账号登录" : "" }}</h2>
      <!-- Deprecated : No tab switching as no password
      <div class="rc-header">
        <span
          v-for="(item, index) in swiperData"
          :key="index"
          @click="selectGoods(item, index)"
          :class="activeIndex == index ? 'active' : 'unactive'"
          >{{ item.title }}</span
        >
      </div>
      -->
      <div class="rc-layout-container rc-one-column">
        <div class="rc-column">
          <input
              class="ts-standard-input"
              v-model="tel"
              placeholder="请输入手机号"
              :error-message="usertel"
              v-if="!ifpassword"
              clearable
          />
        </div>
      </div>
      <!-- Deprecated : No tab switching as no password
      <input
        v-model="text"
        class="ts-standard-input ts-standard-input--two"
        placeholder="请输入账号"

        v-if="ifpassword"
        clearable
      />

      <van-field
        v-model="password"
        type="password"
        placeholder="请输入密码"

        v-if="ifpassword"
        clearable
      />
      -->
      <div class="rc-layout-container rc-two-column">
        <div class="rc-column">
          <input
              v-if="!ifpassword"
              v-model="sms"
              class="ts-standard-input ts-standard-input--two center"
              center
              clearable
              placeholder="请输入验证码"

          >
        </div>
        <div class="rc-column">
          <button
              :disabled="flag"
              slot="button"
              size="small"
              @click="sendCode"
              class="rc-use ts-standard-btn ts-standard-btn--two"
          >{{ buttonmsg }}</button
          >
        </div>
      </div>

      <div class="rc-layout-container rc-one-column">
        <div class="usecheck rc-column rc-text--left">
          <label>
            <input
                type="checkbox"
                @click="checkBox()"
                style="width: 24px; height: 24px"
                v-model="inRank"
            />我已阅读同意隐私声明和账号使用协议
          </label>
        </div>
      </div>
      <div class="rc-layout-container rc-two-column rc-button">
        <div class="rc-column rc-text--left">
          <a href="#" class="rc-styled-link"><span>隐私政策</span></a>
        </div>
        <div class="rc-column rc-text--right">
          <nuxt-link :to="`/userlogin/edit/`" class="rc-styled-link">
            <span>注册账户</span>
          </nuxt-link>
        </div>
      </div>

      <div class="rc-layout-container rc-one-column">
        <div class="rc-column">
          <input
              type="primary"
              :loading="loading"
              loading-text="登录..."
              size="large"
              :disabled="zhud"
              @click="register()"
              class="ts-standard-btn ts-standard-btn--max-width"
              value="登录"
          ></input
          >
          <!-- <van-divider @click="toLogin">注册账户</van-divider> -->
        </div>
      </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 "";
      }
    },
  },
  mounted() {
    //console.log(this.$route.params);
  },
  // 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.sms,this.hash,this.tamp);
      if(data){
        return data;
      }
    },
    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.$message({
          type: 'warning',
          message: '请输入验证码'
        });
        return
      }
      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 data=await this.vadmsg();
        if(data.code=="1")
        {
          data = await userLongin(this.tel);
          if(data.msg=='SUCCESS'){
            this.$message({
              type: 'warning',
              message: '登录成功'
            });
            this.$router.push({
              path: "/",
            });
            let token=JSON.stringify(data);
            this.changeClod({ cloud: token });
            return;
          }
        }
        this.$message({
          type: 'warning',
          message: data.msg
        });

        return
      }},
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/css/login.less");
</style>