<template>
  <div class="whole">
    <!--<p class="top-title">机器人监控</p>-->
    <!-- 登录 -->
    <div class="login" v-show="islogin==1">
      <h2 class="title">用户登录</h2>
      <div class="content">
        <div class="groupcom">
          <i class="iicon user"></i>
          <input type="text" name="username" placeholder="请输入您的邮箱" class="usercom" v-model.trim="loginEmail">
        </div>
        <div class="groupcom inputpwd">
          <i class="iicon pwd"></i>
          <input type="password" placeholder="请输入密码" class="usercom" v-model.trim="loginPassword" @keyup.enter="Login">
        </div>
        <div class="ground">
          <span class="ground-right">
            <span @click="goShowPanel(2)" class="bluepoint">马上注册</span>
            &nbsp;
            <span @click="goShowPanel(3)" class="bluepoint">重置密码</span>
          </span>
          <input type="checkbox" name="记住用户密码" class="rember" v-model="isSaveLoginInfo">
          <span>记住密码</span>
        </div>
        <el-button type="primary" class="loginget" @click="Login">立刻登录</el-button>
      </div>
    </div>
    <!-- 注册 -->
    <div class="login" v-show="islogin==2">
      <h2 class="title">用户注册</h2>
      <div class="content">
        <div class="groupcom">
          <i class="iicon user"></i>
          <input type="text" name="username" placeholder="请输入您的邮箱" class="usercom" v-model.trim="regist_email">
        </div>
        <div class="groupcom inputpwd">
          <i class="iicon pwd"></i>
          <input type="password" placeholder="请输入密码(不少于6位)" class="usercom" v-model.trim="regist_password">
        </div>
        <div class="groupcom inputpwd">
          <i class="iicon pwd"></i>
          <input type="password" placeholder="请再次输入密码" class="usercom" v-model.trim="regist_rppassword">
        </div>
        <div class="inputyzm inputpwd">
          <i class="iicon pwd"></i>
          <input type="text" placeholder="请输入验证码" class="usercomyzm" v-model.trim="regist_yzm">
          <el-button type="primary"  class="getyzm" @click="getYZM('regist')" :disabled='!show'>
            <span v-show = "show">获取验证码</span>
            <span v-show = "!show" class="count">已发送{{count}} s</span>
          </el-button>
        </div>
        <div class="ground" style="margin-bottom:70px;">
          <span class="ground-right">
            <span>已有账号?</span>
            <span @click="goShowPanel(1)" class="bluepoint">马上登录</span>
          </span>
        </div>
        <el-button type="primary" class="loginget" @click="registered">立刻注册</el-button>
      </div>
    </div>
    <!-- 忘记密码 -->
    <div class="login" v-show="islogin==3">
      <h2 class="title">重置密码</h2>
      <div class="content">
        <div class="groupcom">
          <i class="iicon user"></i>
          <input type="text" name="username" placeholder="请输入您的邮箱" class="usercom" v-model.trim="forget_email">
        </div>
        <div class="inputyzm inputpwd">
          <i class="iicon pwd"></i>
          <input type="text" placeholder="请输入验证码" class="usercomyzm" v-model.trim="forget_yzm">
          <el-button type="primary"  class="getyzm" @click="getYZM('forgetpassword')" :disabled='!show'>
            <span v-show = "show">获取验证码</span>
            <span v-show = "!show" class="count">已发送{{count}} s</span>
          </el-button>
        </div>
        <div class="groupcom inputpwd">
          <i class="iicon pwd"></i>
          <input type="password" placeholder="请输入新密码(不少于6位)" class="usercom" v-model.trim="forget_password">
        </div>
        <div class="groupcom inputpwd">
          <i class="iicon pwd"></i>
          <input type="password" placeholder="请再次输入新密码" class="usercom" v-model.trim="forget_rppassword">
        </div>
        <div class="ground" style="margin-bottom:70px;">
          <span class="ground-right">
            <span>已有账号?</span>
            <span @click="goShowPanel(1)" class="bluepoint">马上登录</span>
          </span>
        </div>
        <el-button type="primary" class="loginget" @click="forgetpassword">重置密码</el-button>
      </div>
    </div>
  </div>
</template>
<script>
const regEmail = /^[a-z0-9]+([._\\-]*[a-z0-9])*@33.cn+$/;
const regEmail2 = /^[a-z0-9]+([._\\-]*[a-z0-9])*@disanbo.com+$/;
const regPwd =  /[a-zA-Z0-9_]{8,16}/;
const TIME_COUNT = 60;
import axios from 'axios';
import md5 from 'md5'
import ApiConfig from "../config/api-config";
export default {
  data(){
    return {
      show:true,
      count:'',
      timer:null,
      regist_email:'',//注册邮箱
      regist_password:'',//注册密码
      regist_rppassword:'',//确认注册密码
      regist_yzm:'',//注册验证码
      forget_email:'',//忘记密码邮箱
      forget_password:'',//新密码
      forget_rppassword:'',//确认新密码
      forget_yzm:'',//忘记密码验证码
      islogin:1,//1是登录，2是注册 3是忘记密码
      loginEmail: "",
      loginPassword: "",
      isSaveLoginInfo:true,//是否记住密码
    }
  },

  mounted(){
    //加载存储的数据
    this.loginEmail = localStorage["username"];
    this.loginPassword = localStorage["password"];
  },
  methods:{
    goShowPanel(num){//登录界面切换
      this.islogin=num;
      this.loginEmail = '';
      this.loginPassword = '';
      this.isSaveLoginInfo = '';
      this.show = true;
    },
    //获取验证码
    getYZM(type){
      const Email = type === 'regist' ? this.regist_email : this.forget_email;
      if(Email == '' || !(regEmail.test(Email) || regEmail2.test(Email))){
        this.$notify({
          title: '提示',
          message: "请输入正确的邮箱",
          type: 'error',
          duration:'2000',
        });
        return;
      }
      axios.post(ApiConfig.SendEmailVcode,{"user":Email}).then(res => {
        if(res.data.code === 200){//发送成功并且注册成功
          //获取验证码倒计时60s
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if(this.count > 0 && this.count <= TIME_COUNT){
              this.count--;
            }else{
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
          this.$notify({
            title: '提示',
            message: "验证码发送成功，请查收",
            type: 'success',
            duration:'2000',
          });
        }else{//不存在的33.cn的邮箱
            this.$notify({
            title: '提示',
            message: "验证码发送失败，请检查邮箱后再试",
            type: 'error',
            duration:'2000',
          });
        }
      })
      .catch(err=>{
        this.$notify({
          title: '提示',
          message: "验证码发送失败，请稍后再试",
          type: 'error',
          duration:'2000',
        });
      });
    },
    //注册
    registered(){
      const message = !this.regist_email ? '邮箱不能为空' :
        (!this.regist_password ? '密码不能为空' :
          (this.regist_password!==this.regist_rppassword ? '两次密码不一致，请重新输入后再试' :
            (!this.regist_yzm ? '验证码不能为空' : '')));
      if(message) {
        this.$notify({
          title: '提示',
          message: message,
          type: 'error',
          duration:'2000',
        });
        return
      }
      axios.post(ApiConfig.Register,{"user":this.regist_email,"password":md5(this.regist_password + md5(this.regist_email)),"emailvcode":this.regist_yzm}).then(res => {
        if(res.data.code === 200){
          this.$notify({
            title: '提示',
            message: "注册成功，请返回登录",
            type: 'success',
            duration:'2000',
          });

          this.loginEmail = this.regist_email;
          this.loginPassword = this.regist_password;
          this.isSaveLoginInfo = true;
          this.goShowPanel(1)
        }else{
          this.$notify({
            title: '提示',
            message: res.data.msg,
            type: 'error',
            duration:'2000',
          });
          return;
        }
      }).catch(err=>{
        this.$notify({
          title: '提示',
          message: "注册失败，请稍后再试",
          type: 'error',
          duration:'2000',
        });
      })
    },
    //登录
    Login(){
      if(this.loginEmail==''||this.loginPassword==''){
        this.$notify({
          title: '提示',
          message: "信息不完整，请确认后再试",
          type: 'error',
          duration:'2000',
        });
        return;
      }
      const password = localStorage["username"] === this.loginEmail && localStorage["password"] === this.loginPassword ? localStorage["password"] : md5(this.loginPassword + md5(this.loginEmail));
      axios.post(ApiConfig.Login,{"user":this.loginEmail, "password": password}).then(res => {
        if(res.data.code === 200){
          this.$notify({
            title: '提示',
            message: "登录成功",
            type: 'success',
            duration:'2000',
          });
          localStorage["password"] = this.isSaveLoginInfo ? password : "";
          localStorage["username"] = this.loginEmail;
          sessionStorage.setItem("isLogin",true);
          this.$router.push({
            path:'/monitor/home'
          })

        }else{
          this.$notify({
              title: '提示',
              message: res.data.msg,
              type: 'error',
              duration:'2000',
            });
          return;
        }
      })
      .catch(err=>{
        this.$notify({
          title: '提示',
          message: "登录失败，请稍后再试",
          type: 'error',
          duration:'2000',
        });
        //sessionStorage.setItem("login_success", 'hzyhbk');
        //this.$router.push({path:'/index'})
      })
    },
    //重置密码
    forgetpassword(){
      //console.log(this.regist_email)
      //console.log(this.regist_password)
      const message = !this.forget_email ? '邮箱不能为空' :
        (!this.forget_yzm ? '验证码不能为空' :
          (!this.forget_password ? '密码不能为空' :
            (this.forget_password!==this.forget_rppassword ? '两次密码不一致，请重新输入后再试' : '')));
      if(message){
        this.$notify({
          title: '提示',
          message: message,
          type: 'error',
          duration:'2000',
        });
        return;
      }
      if(this.forget_yzm==''){//且验证码为空
        this.$notify({
          title: '提示',
          message: "请输入验证码",
          type: 'error',
          duration:'2000',
        });
        return;
      }
      if(this.forget_password!=this.forget_rppassword){
        this.$notify({
          title: '提示',
          message: "两次密码不一致，请重新输入",
          type: 'error',
          duration:'2000',
        });
        return;
      }
      axios.post(ApiConfig.ResetPassword,{"user":this.forget_email,"password": md5(this.forget_password+md5(this.forget_email)),"emailvcode":this.forget_yzm}).then(res => {
        // console.log(res)
        if(res.data.code === 200){
          this.$notify({
            title: '提示',
            message: "重置密码成功，请返回登录",
            type: 'success',
            duration:'2000',
          });
          this.goShowPanel(1)
          //this.loginEmail = this.forget_email;
          //this.loginPassword = this.forget_password;
          //this.isSaveLoginInfo = true;
        }else{
          this.$notify({
            title: '提示',
            message: res.data.msg,
            type: 'error',
            duration:'2000',
          });
          return;
        }
      }).catch(err=>{
        this.$notify({
          title: '提示',
          message: "忘记密码失败，请稍后再试",
          type: 'error',
          duration:'2000',
        });
      })
    },
  },
  watch: {
    loginEmail(val) {
      this.loginPassword = val === localStorage["username"] ? localStorage["password"] : '';
    }
  }
}
</script>
<style scoped>
  .whole{
  min-width: 1120px;
  height: 100%;
  min-height: 700px;
  background: #7792A7;
  }
  .top-title{
    padding: 20px 0 0 24px;
    float: left;
    font-size: 34px;
    color: #fff;
  }
  .login{
    position: absolute;
    left: 50%;
    top: 400px;
    margin-left: -175px;
    margin-top: -220px;
    width: 349px;
    height: auto;
    background: #ffffff;
    /*background-color: #909399;*/
    padding: 29px 20px 48px;
  }
  .title{
    display: inline-block;
    font-size: 20px;
    width: 100%;
    text-align: center;
    border-bottom: 2px solid #e1e1e0;
    padding-bottom: 22px;
    color: #606266;
    font-weight: 600;
  }
  .content{
    padding-top: 37px;
  }
  .groupcom{
    height: 37px;
    text-align: center;
  }
  .iicon{
    width: 42px;
    height: 37px;
    display: inline-block;
    position: absolute;
  }
  .iconright{
    position: absolute;
    right: 36px;
    font-size: 35px;
    color: #67C23A;
  }
  .iconfalse{
    position: absolute;
    right: 36px;
    font-size: 35px;
    color: #F56C6C;
  }
  .user{
    background:#e1e1e0 url('../assets/img/username.png') no-repeat 14px center;
  }
  .pwd{
    background:#e1e1e0 url('../assets/img/password.png')no-repeat 14px center;
  }
  .usercom{
    padding-left: 49px;
    width: 276px;
    height: 37px;
    border: 1px solid #e1e1e0;
  }
  .usercomyzm{
    padding-left: 49px;
    width: 170px;
    height: 37px;
    border: 1px solid #e1e1e0;
  }
  .inputpwd{
    width: 276px;
    margin: 14px auto;
  }
  .ground{
    font-size: 13px;
    color: #333333;
    margin-bottom: 41px;
    margin-top: 34px;
    line-height: 19px;
    text-align: left;
  }
  .ground-right{
    float: right;
    padding-right: 15px;
  }
  .rember{
    height: 15px;
    width: 15px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 15px;
  }
  .loginget{
    display: block;
    width: 276px;
    margin: 0px auto;
    height: 37px;
    text-align: center;
    color: #ffffff;
  }
  .getyzm{
    display:inline-block;
    padding:0 15px;
    background: #49abf7;
    line-height:36px;
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
    width: 102px;
  }
  .bluepoint{
    color: #49abf7;
    cursor: pointer;
  }

</style>
