<template>
  <sail-page type="loading-view" title="登录">
      <div slot="content">
          <div class="login__regist-box">
              <p class="login__background" @click="back">
                  <svg class="icon close" aria-hidden="true">
                       <use xlink:href="#icon-xinzeng1"/>
                  </svg>
              </p>
              <van-tabs v-model="active" swipeable>
                  <van-tab v-for="index in 2" :key="index" :title="tabTextMap[index]" class="van-tab-style">
                     <div v-show="index === 1">
                         <div class="login__input-box">
                             <p class="login_phone login_input">
                               <svg class="icon login__icon" aria-hidden="true">
                                    <use xlink:href="#icon-shouji_tianchong"/>
                               </svg>                               
                               <input v-model="login.loginName" type="number" name="" class="login__input-style" placeholder="请输入手机号">
                             </p>
                             <p class="login_passworld login_input">
                               <svg class="icon login__icon" aria-hidden="true">
                                    <use xlink:href="#icon-mima"/>
                               </svg>
                               <input v-model="login.password" type="password" name="" class="login__input-style" placeholder="请输入密码">
                             </p>
                             <p class="login_passworld login_input">
                               <svg class="icon login__icon" aria-hidden="true">
                                    <use xlink:href="#icon-yanzhengma"/>
                               </svg>
                               <input v-model="login.captcha" type="text" name="" class="login__input-style" placeholder="请输入验证码">
                             </p>
                             <a class="code forget_passworld">
                              <img @click="refresh()" :src="random" alt="">
                             </a>
                             <router-link to="/forget" href="#" class="forget_passworld__link">忘记密码</router-link>                             
                         </div>
                         <van-button class="login_button gradient-green" :loading="registLoading" @click="loginSubmit">确定</van-button>                        
                     </div>
                     <div v-show="index === 2">
                          <div class="regist__input-box">
                             <p class="login_phone login_input">
                               <svg class="icon login__icon" aria-hidden="true">
                                    <use xlink:href="#icon-shouji_tianchong"/>
                               </svg>
                               <input type="text" v-model="register.phone" name="" class="login__input-style" placeholder="请输入手机号">
                             </p>
                             <p class="verification_code login_input">
                               <svg class="icon login__icon" aria-hidden="true">
                                    <use xlink:href="#icon-yanzhengma"/>
                               </svg>
                               <input type="text" v-model="register.verificationCode" name="" class="login__input-style" placeholder="验证码">
                               <van-button :disabled="isDisable" :loading="loading" @click="sendVerficationCode" class="send__verfication_code gradient-green">{{message}}</van-button>
                             </p>
                             <p class="login_passworld login_input">
                               <svg class="icon login__icon" aria-hidden="true">
                                    <use xlink:href="#icon-mima"/>
                               </svg>
                               <input type="password" v-model="register.password" name="" class="login__input-style" placeholder="请输入6-16位密码,必须包含字母+数字">
                             </p>
                          </div>
                          <van-button :loading="registLoading" class="regist_button gradient-green" @click="sendRegister">确定</van-button>
                     </div>
                  </van-tab>
               </van-tabs>
               <b class="agree_agreement regist__agree-agreement">注册表示您同意 <router-link class="agreement common_color" to="/userProtocol">《赛嶺公寓用户使用协议》</router-link></b>
          </div>          
      </div>
  </sail-page>
  
</template>

<script>
function guid() {
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
    var r = (Math.random() * 16) | 0,
      v = c === "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}
let uid = guid();
import store from "@/utils/store";
import sailPage from "@/components/sail-page.vue";
import { Toast } from "vant";
import { mapState } from "vuex";
// import { Field } from 'vant';
import api from "@/api/index.js";
let apiUrl = api.apiUrl;
export default {
  components: {
    sailPage
  },
  computed: {
    ...mapState({
      //reminderNumber: state => state.workModule.reminderNumber,
    })
  },
  data: function() {
    return {
      name: "template",
      isDisable: false,
      loading: false,
      message: "获取验证码",
      uuid: uid,
      random:
          apiUrl+"common/captcha?captchaId=" +
          uid +
          "&timestamp=1520568301338",
      active: 0,
      registLoading:false,
      tabTextMap: {
        1: "登录",
        2: "注册"
      },
      login: {
        //loginName: "17316224459",
        //loginName: "18892302110",
        //loginName: "18721391935",
        //loginName: "18316815073",
        //loginName: "18721391935",
        //password: "123456a",
        loginName: "",
        password: "",
        //password: "a123456",
        //password: "abc222",
        //loginName: "18892302110",
        //13984243199  123456a
        captcha: ""
      },
      register: {
        phone: "",
        verificationCode: "",
        password: ""
      }
    };
  },
  methods: {
    back() {
      this.$router.back();
    },
    loginSubmit() {
      const reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      if(!this.login.loginName) {
        Toast.fail({message:"请输入手机号！",duration:1000});
        return;
      }
      if(!reg.test(this.login.loginName)) {
        Toast.fail({message:"手机号格式错误！",duration:1000});
        return;
      }
      if(!this.login.password.length) {
        Toast.fail({message:"请输入密码！",duration:1000});
        return;
      }
      if(!this.login.captcha) {
        Toast.fail({message:"请输入验证码！",duration:1000});
        return;
      }
      this.registLoading = true;
      var info = {
        loginName: this.login.loginName,
        password: this.login.password,
        captcha: this.login.captcha,
        captchaId: this.uuid,
        platform: 2
      };
      this.$store.dispatch("loginModule/sendLogin", info).then(res => {
        //
        this.registLoading = false;
        if (res) {
          Toast.success({
            duration: 1000,
            message: "登录成功"
          });
          setTimeout(() => {
            let forgetPassword = store("forgetPassword");
            if(forgetPassword) {
              this.$router.push("/MyPage");
              store("forgetPassword", false);
              return;
            }
            this.$router.back(); // -> 编程式跳转
          }, 1000);
          //
        }else{
          this.refresh();
        }
      });
    },
    refresh() {
      this.uuid = guid();
      this.random = `${apiUrl}common/captcha?captchaId=${
        this.uuid
      }&timestamp=${Math.random()}`;
    },
    sendRegister() {
      const reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      const passwordReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if(!this.register.phone) {
        Toast.fail({message:"请输入手机号！",duration:1000});
        return;
      }
      if(!reg.test(this.register.phone)) {
        Toast.fail({message:"手机号格式错误！",duration:1000});
        return;
      }
      if(!this.register.verificationCode) {
        Toast.fail({message:"请输入验证码！",duration:1000});
        return;
      }
      if(!passwordReg.test(this.register.password)) {
        Toast.fail({message:"请输入6-16位密码,必须包含字母和数字！",duration:1000});
        return;
      }
      
      this.registLoading = true;
      this.$store
        .dispatch("loginModule/sendRegister", this.register)
        .then(res => {
          //
          this.registLoading = false;
          if (res) {
            Toast.success({
              duration: 1000,
              message: "注册成功"
            });
            //
            //this.$store.commit('loginModule/INIT_LOGIN_INFO', res.data.data)
            //this.$store.dispatch
            setTimeout(() => {
              this.$router.push({ path: "/bindHouseCheck" }); // -> 编程式跳转
            }, 1000);
            //
          }
        });
    },
    changeTips() {
      let second = 60;
      this.isDisable = true;
      this.message = `${second}秒后重新获取`;
      const timer = setInterval(() => {
        second--;
        if (second) {
          this.message = `${second}秒后重新获取`;
        } else {
          clearInterval(timer);
          this.isDisable = false;
          this.message = "获取验证码";
        }
      }, 1000);
    },
    sendVerficationCode() {
      const reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;       
      if(!reg.test(this.register.phone)) {
        Toast.fail({message:"手机号码格式不对,请重新输入！",duration:1000});
        return;
      }
      this.loading = true;
      this.$store.dispatch(
        "loginModule/sendVerficationCode",
        this.register.phone
      ).then(res => {
        this.loading = false;
        if(res) {
          this.changeTips();
        }
      });
    },
    close() {
      this.$router.back();
    }
  }
};
</script>
<style lang="less">
.login__regist-box {
  .van-hairline--top-bottom:after {
    border-width: 0px;
  }
  .van-tab {
    font-size: 17px;
    border-bottom: 3px solid #f2f2f2;
    border-top: 1px solid #fff;
    color: #909090;
  }
  .van-tabs__nav {
    border-top: none;
  }
  .van-tab--active {
    color: #eaa266;
  }
  .van-tab-style {
    font-size: 17px;
    color: #909090;
  }
  .van-tabs__line {
    height: 3px;
  }
}
#tabs_top_none {
  border-top: none!import;
}
#icon-xinzeng1 {
  font-size: 20px;
}
</style>
<style lang="less" scoped>
@import "~@/common/less/variable.less";
@nice-font-color: #909090;
@nice-input-color: #666;

.login__input-style {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: @nice-input-color;
  width: 100%;
  height: 40px;
  text-indent: 10px;
}

.login__icon {
  width: 25px;
  height: 25px;
  display: block;
  opacity: 0.6;
  margin-top: 10px;
  margin-left: 10px;
}
.login__regist-box {
  width: 375px;
  height: 667px;
  background: @nice-bgwhite;
  position: relative;

  .login__background {
    width: 375px;
    height: 227px;
    background: url(~@/assets/img/login_bg@3x.jpg) no-repeat center;
    background-size: 100% 100%;
    position: relative;
    .close {
      width: 24px;
      height: 24px;
      position: absolute;
      font-size: 25px;
      display: block;
      left: 15.66px;
      top: 15.66px;
    }
  }
  .login__input-box {
    width: 288px;
    height: 163px;
    position: relative;
    margin: 0 auto;
    .login_input {
      width: 288px;
      height: 40px;

      display: flex;
      border-bottom: 1px solid #ccc;
    }
    .login_phone {
      margin-top: 40px;
    }
    .login_passworld {
      margin-top: 10px;
    }
    .forget_passworld {
      font-size: 13px;
      color: @nice-font-color;
      position: absolute;
      right: 0px;
      bottom: 20px;
    }
    .forget_passworld__link {
      font-size: 14px;
      color: @nice-font-color;
      position: absolute;
      right: 0px;
      bottom: -18px;
    }
  }
  .login_button,
  .regist_button {
    width: 198px;
    height: 44px;
    border-radius: 22px;
    font-size: 20px;
    color: @nice-bgwhite;
    border: none;
    margin: 45px auto;
    display: block;
  }
  .regist__input-box {
    width: 288px;
    height: 163px;
    position: relative;
    margin: 40px auto 0;
    .login_input {
      width: 288px;
      height: 40px;
      display: flex;
      border-bottom: 1px solid #ccc;
      .send__verfication_code {
        min-width: 118px;
        height: 34px;
        font-size: 14px;
        color: @nice-bgwhite;
        border: none;
        text-align: center;
        line-height: 34px;
      }
    }
    .login_phone {
      margin-top: 0;
    }
    .verification_code {
      margin-top: 10px;
    }
    .login_passworld {
      margin-top: 10px;
    }
  }
  .agree_agreement {
    text-align: left;
    display: block;
    font-size: 13px;
    color: @nice-font-color;
    position: absolute;
    left: 51px;
    bottom: 16px;
    .agreement {
      color: #eaa266;
    }
  }
}
</style>
