<template>
  <div class="login">
    <div class="login_form">
      <p>Welcome to SNCTF</p>
      <el-tabs v-model="activeNames"  >
        <el-tab-pane label="登录" name="first">
          <el-form
            :model="loginForm"
            :rules="loginRules"
            ref="loginForm">
            <el-form-item label="" prop="username" class="elItem">
              <el-input
                  type="text"
                  autocomplete="off"
                  v-model="loginForm.username"
                  prefix-icon="User"

                  placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input
                  type="password"
                  autocomplete="off"
                  v-model="loginForm.password"
                  prefix-icon="Lock"
                  placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item class="btns">
              <el-button type="primary" @click="goToLogin">登录</el-button>
             <el-button @click="resetLoginForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="second">
<!--          引用注册组件-->
          <register></register>
        </el-tab-pane>

      </el-tabs>
    </div>
  </div>
</template>
<script>
import Register from "./register.vue";
import axios from "axios";
import { ElNotification } from 'element-plus';

export default {
  data(){
    return{
      loginForm:{
        username:'',
        password:'',
      },
      activeNames: 'first',
      loginRules:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      },

    }
  },
  methods:{
    goToLogin(){
      axios({
        method:'post',
        url:'/api/v1/login',
        headers:{
          'Content-Type':'application/json;charset=UTF-8'
        },
        data:{
          username:this.loginForm.username,
          password:this.loginForm.password
        }
      }).then(res=>{
        if(res.data.code===200){
          this.$router.push('/home')
          ElNotification({
            title: '登录成功',
            message: '欢迎回来',
            type: 'success',
            duration: 3000,
          });
          }else{
          ElNotification({
            title: '登录失败',
            message: '用户名或密码错误',
            type: 'error',
            duration: 3000,

          });
          }
      }).catch(err=>{
        ElNotification({
          title: '登录失败',
          message: '用户访问错误',
          type: 'error',
          duration: 3000,

        });
        console.log(err)
        })
    },
    resetLoginForm(){
      this.$refs.loginForm.resetFields();
    }
  },
  components: {Register}
}
</script>

<style scoped lang="less">
.login{
  width:100%;
  height:100vh;
  overflow: auto;
  position: relative;
  .login_form {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 78%;
    top: 40%;
    margin-left: -200px;
    margin-top: -150px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px #ddd;
    .btns {
      display: flex;
      justify-content: flex-end;
    }
  }
  p {
    font-size: 24px;
    text-align: center;
    font-weight: 600;
  }
}


</style>
