<template>
<div style="height:100%">
  
      <div class="c-app mainPage"  v-loading="loading">

        <div class=" loginBox" v-if="login">
          <div class="inputArea">
            
            <h3 class="inputHeader">用户登录 <span class="logtext">LOGIN</span></h3> 
            
            <el-input
              placeholder="用户名"
              v-model="userName"
              clearable
              style="margin-bottom:43px">
            </el-input>
            <el-input placeholder="密码" v-model="password" show-password style="">
            </el-input>
            <span style="float:right;margin-top:5px">
              <p style="cursor:pointer" @click="goReg()">去注册</p>
            </span>

            <CButton block style="margin-top:66px;backgroundColor:#44C9D1;color:white;height:46px" @click="loginNow">登录</CButton>
          </div>
        </div>

        <!-- //注册 -->
        <div v-if="!login" class="rBox">
          <div class="inputArea">
            <h3 class="inputHeader">用户注册 <span class="logtext">REGISTER</span></h3> 
            <el-input
              placeholder="用户名"
              v-model="r_uname"
              label=""
              clearable
              style="margin-bottom:33px">
            </el-input>
            <!-- <span>忘记密码？</span> -->
            <el-input label="" placeholder="手机号" v-model="r_tel" style="margin-bottom:33px"></el-input>

            <el-input label="" placeholder="密码" v-model="r_pwd" show-password style="margin-bottom:30px">
            </el-input>
            <span style="margin-right:10px">请选择身份</span>
            <el-select v-model="r_identity" placeholder="请选择身份" @change="changeIdentity">
              <el-option
                v-for="item in idList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <br>
            <br>
                <CButton  style="backgroundColor:#44C9D1;color:white;height:36px;float:right" @click="registeNow()">注册</CButton>
                <p  style="float:right;height:36px;line-height:36px;cursor:pointer;margin-right:10px" @click="goReg()">已有账号？去登录</p>

          </div>

          
        </div>

       <span style="color:white">{{this.$global.tagging}}<span class="ml-1">&copy; {{new Date().getFullYear()}} </span></span>
      </div>
      
    

  <!-- </CWrapper> -->
</div>
</template>

<script>
import { login,registe } from "../../api/user";
import { MessageBox, Message } from 'element-ui'
import TheFooter from '../../containers/TheFooter'

export default {
  name: 'Login',
  components: {

    TheFooter
  },
  data(){
    return{
      userName:'',
      password:'',
      loading:false,
      login:true,
      r_uname:"",
      r_tel:"",
      r_pwd:"",
      r_identity:2,
      idList:[
        {
          value: 1,
          label: '测试管理员'
        },
        {
          value: 2,
          label: '测试工程师'
        }
      ],
    }
  },
  mounted(){
    this.meituan();
  },
  methods:{
    meituan(){
      var input="aaaaaaaaaabbbbbb"
      var res=''
      var maxTime=0
      var map=new Map()
      for(let p=6;p<input.length;p++){
          map.clear()
          var flag=false
          for(let i=0;i<input.length-p+1;i++){
              var tmp=input.substr(i,i+p)
              var result=map.get(tmp)==undefined ? 0 :map.get(tmp);
              map.set(tmp,result+1)
              if(map.get(tmp)>=maxTime){
                  maxTime=map.get(tmp)
                  res=tmp
                  console.log(res+'出现了'+maxTime+"次")
                  flag=true
              }
          }
          if(flag){
              break
          }
      }
    },

    changeSideBar(){
      this.$router.push('/')
    },
    loginNow(){
      this.loading =true;
      let formdata = new FormData();
      formdata.append('username',this.userName);
      formdata.append('password',this.password);


      login(formdata).then(res=>{
        if (res.status==40001) {
          this.$message.danger('请勿重复登录！');
          this.loading = false;
          return;
        }
        localStorage.setItem('identity',res.identify);
        // this.$store.commit('set', ['identity',res.identify])

        localStorage.setItem('accessToken',res.token)
        localStorage.setItem('userName',res.username)
        localStorage.setItem('userId',res.userid)

        // console.log("登录结果",res);
        // console.log(this.$store.state);
        this.loading =false;
        this.$router.push('/dashboard')
      })
      this.loading =false;
    },
    registeNow(){
      // console.log("正在注册");
      let fd =new FormData();
      fd.append("username",this.r_uname);
      fd.append("tel",this.r_tel);
      fd.append("password",this.r_pwd);
      fd.append("name","");
      fd.append("identify",this.r_identity);
      registe(fd).then(res=>{
        // console.log(res);
        if (res=="创建成功") {
          Message({
            message: "创建成功，请登录",
            type: 'success',
            duration: 3 * 1000
          })
          setTimeout(() => {
            this.login=true
          }, 1500);
          
        }

      })
    },
    goReg(){
      this.r_uname="";
      this.r_tel="";
      this.r_pwd="";
      this.login=!this.login;
    },
    registeUser(){
      
    },
    changeIdentity(){
      console.log(this.r_identity);
    }
  }
}
</script>

<style scoped>
.mainPage{
    background: url("../../../public/img/avatars/loginPic.png") no-repeat;
    background-attachment: fixed;
    background-size:cover;
    /* margin: 3px; */
}
.loginBox{
    height: 30%;
    width: 30%;
    margin-left: 50%;
    margin-top: 260px;
    min-width: 400px;
    min-height: 400px;
    /* left: 48%;
    top: 30%; */
    /* left: 50%; */
    background-color: rgb(252, 252, 252);
    position: fixed;
}
.rBox{
    /* height: 35%; */
    width: 30%;
    margin-left: 50%;
    margin-top: 200px;
    min-width: 400px;
    min-height: 400px;
    /* left: 48%;
    top: 30%; */
    /* left: 50%; */
    background-color: rgb(252, 252, 252);
    position: fixed;
}
/* .mmm{
    min-width: 1200px;
} */
.inputArea{
  margin: 50px 50px;
}
.inputHeader{

  font-size: 27px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #444444;
  margin-bottom: 42px;
}
.logtext{
width: 50px;
height: 13px;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #A9A9B5;
}
.loginBtn{
  width: 349px;
  height: 46px;
  background: #19A97B;
}
</style>