<template>
  <view class="nine-content-001">
    <view class="login">
      <view class="login-logo">
        <image class="login-logo-image" lazy-load="true" src="/static/image/ninecloud-white.png"></image>
      </view>
      <view class="login-block">
        <view class="login-type">
          <span @click="onNavBarTap(0)" :class="loginType == 0?'login-type-span-alive login-type-span':'login-type-span'">
            密码登录
          </span>
          <span @click="onNavBarTap(1)" :class="loginType == 1?'login-type-span-alive login-type-span':'login-type-span'">
            短信登录
          </span>
        </view>
        <view class="login-phone">    
          <image class="login-phone-image" src="/static/image/user/login-phone-blue.png"></image>
          <input class="login-phone-input input" :focus="isFocus=='username'" name="phone" placeholder="请输入您的账号/手机号" v-model="userName" @confirm="loginClick"/>
        </view>
        <view class="nine-line-001 mlr30"></view>
        <view v-if="loginType == 0" class="login-phone">
          <image class="login-phone-image" src="/static/image/user/login-password-blue.png"></image>
          <input class="login-phone-input input" :focus="isFocus=='password'" password placeholder="请输入您的密码" v-model="password" @confirm="loginClick"/>
        </view>
        <view v-if="loginType == 1" class="login-verify">
          <view class="display-flex-row">
            <image class="login-verify-image" src="/static/image/user/login-password-blue.png"></image>
            <input class="login-verify-input input" :focus="isFocus=='verify'" placeholder="请输入验证码" v-model="verifyCode" @confirm="loginClick"/>
          </view>
          <view class="nine-btn-verify-001 font-size12 text-nowrap pa10" @click="verifyClick">
            {{verifyText}}
          </view>
        </view>
        <view class="nine-line-001 mlr30"></view>
        <view class="ma15 mr30 text-right color-blue" @click="forgetClick">  
          忘记密码?
        </view>
        <view class="nine-btn-save-001 ma20" @click="loginClick">登 录</view>
        <!--#ifndef MP-WEIXIN-->
        <view class="text-center ma20">没有账号?
          <span class="ml10 color-blue" @click="registerClick">
            立即注册
          </span>
        </view>
        <!--#endif-->
      </view>
    </view>
  </view>
</template>

<script>
  import store from '@/store'
  import socketStore from '@/uni_modules/vrapile-im/store'
  import { getToken } from '@/utils/token'
  export default {
    data() {
      return {
        loginType: 0,
        
        userName: "",
        password: "",
        
        verifyTimer: null,
        verifyCode: "",
        verifyTime: 0,
        verifyText: "发送验证码",
        
        isFocus: ""
      }
    },
    // onBackPress(e){
    //   return true;
    // },
    onUnload() {
      if(this.verifyTimer) {  
        clearInterval(this.verifyTimer);  
        this.verifyTimer = null;  
        this.verifyTime = 0;
      }  
    },
    onShow(){
      let loginInfo = this.$store.state.user.loginInfo;
      this.loginType = loginInfo.loginType || 0;
      this.userName = loginInfo.userName;
      this.password = loginInfo.password;
      if(!this.userName){
        this.usernamefocus();
      }else if(this.loginType == 0){
        this.passwordfocus();
      }else{
        this.verifyfocus();
      }
    },
    
    methods: {
      onNavBarTap (index) {
        this.loginType = index;
      },
      verifyClick(){
        if(this.verifyTime != 0){
          return;
        }
        if(!this.isPhone(this.userName)){
          this.msg("必须为有效手机号");
          return;
        }
        
        this.verifyTime = 60;
        this.verifyText = this.verifyTime + " S";
        this.verifyTimer = setInterval(() => {
          this.timeInterval();
        }, 1000)
        this.diyApiGet('/captchaSms', {phone: this.userName}).catch(error => {
          if(this.verifyTimer) {  
            clearInterval(this.verifyTimer);  
            this.verifyTimer = null;  
            this.verifyTime = 0;
          }  
          this.verifyText = "发送验证码";
        });
      },
      timeInterval() {
        this.verifyTime--;
        if (this.verifyTime > 0) {
          this.verifyText = this.verifyTime + " S";
        }else{
          if(this.verifyTimer) {  
            clearInterval(this.verifyTimer);  
            this.verifyTimer = null;  
          } 
          this.verifyText = "发送验证码";
        }
      },
      loginClick(){
        if(!this.userName){
          this.usernamefocus();
          return;
        }
        if(this.loginType==0 && !this.password){
          this.passwordfocus();
          return;
        }
        if(this.loginType==1 && !this.verifyCode){
          this.verifyfocus();
          return;
        }
        store.dispatch('Login', {
          loginType: this.loginType,
          userName: this.userName.trim(),
          password: this.password,
          smsCode: this.verifyCode,
          registerFlag: "Y"
        }).then(() => {
          this.loginSuccess()
        })
      },
      loginSuccess() {
        store.dispatch('GetInfo').then(res => {
          this.reLaunch('/pages/home/user')
        })
      },
      registerClick() {
        this.navigateTo('/pages/user/register')
      },
      forgetClick() {
        // this.navigateTo('/pages/user/forget')
      },
      usernamefocus() {
        this.isFocus = "username";
      },
      passwordfocus() {
        this.isFocus = "password";
      },
      verifyfocus() {
        this.isFocus = "verify";
      }
    }
  }
</script>

<style scoped>
  .login{
    width: 750rpx;
    height: 100vh;
    background-color: #55aaff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 50rpx;
  }
  .login-logo{
    width: 650rpx;
    opacity: 0.9;
  }
  .login-logo-image{
    width: 600rpx;
    height: 160rpx;
  }
  .login-block{
    width: 630rpx;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    margin: 40rpx 0 150rpx 0;
    padding: 15rpx;
  }
  .login-type{
    margin: 20rpx;
    display: flex;
    justify-content: space-around;
  }
  .login-type-span{
    width: 280rpx;
    padding: 15rpx 0;
    font-size: 20px;
    border-radius: 10rpx;
    text-align: center;
    color: gray;
    background-color: #ebf7ff;
  }
  .login-type-span-alive{
    color: #fff;
    background-color: #55aaff;
  }
  .login-phone{
    display: flex;
    align-items: center;
    margin: 30rpx;
    padding: 20rpx 20rpx 0 0rpx;
  }
  .login-verify{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30rpx;
    padding-top: 20rpx;
  }

  .login-phone-image,
  .login-verify-image{
    padding: 10rpx;
    height: 40rpx;
    width: 40rpx;
  }
  .login-phone-input,
  .login-verify-input{
    padding: 10rpx;
    width: 100%;
  }

</style>
