<template>
    <div class="base">
      <!-- 注册登录界面 -->
     <div  class="loginAndRegist">
          <!--登录表单-->
          <div  class="loginArea">
              <transition
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__fadeInUp"
                      leave-active-class="animate__zoomOut"
                      appear
              >
              <!-- 标语 -->
              <div v-show="isShow" class="title">
                  登录
              </div>
              </transition>
              <transition
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__fadeInUp"
                      leave-active-class="animate__zoomOut"
                      appear
              >
              <!-- 密码框和用户名框 -->
              <div v-show="isShow" class="pwdArea">
                 <div style="flex: 1;justify-content: center;display: flex;align-items: center">
                  用&nbsp;&nbsp;&nbsp;户&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;&nbsp;&nbsp;
                     <el-input class="username" v-model="loginUser.name" style="width: 185px;"  placeholder="请输入用户名"></el-input>
                 </div>
                  <div style="flex: 1;justify-content: center;display: flex;align-items: center">
                      密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;&nbsp;
                      <el-input placeholder="请输入密码"  v-model="loginUser.password" style="width: 185px" show-password></el-input>
                  </div>
                  <div style="flex: 1;justify-content: center;display: flex;align-items: center">
                      验&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;&nbsp;
                      <el-input placeholder="请输入验证码"  v-model="loginUser.code" style="width: 125px" ></el-input>
                      <img src="../../assets/pictures/yanzheng.png" style="width: 60px" alt="假验证码" />
                    
                  </div>
              </div>
              </transition>
              <transition
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__fadeInUp"
                      leave-active-class="animate__zoomOut"
                      appear
              >
              <!-- 登录注册按钮 -->
              <div v-show="isShow" class="btnArea">
                  <el-button 
                  type="success" 
                  round 
                  style="background-color: #E44B9D; letter-spacing: 5px; height: 40px; width: 100px; font-size: 14px;" 
                  @click="UserLogin">
                  登录
              </el-button>
              </div>
              </transition>
          </div>
          <!-- 注册表单 -->
          <div class="registArea">
              <transition
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__fadeInUp"
                      leave-active-class="animate__zoomOut"
                      appear
              >
              <!--  注册表头-->
              <div v-show="!isShow" class="rigestTitle">
                  注册
              </div>
              </transition>
              <transition
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__fadeInUp"
                      leave-active-class="animate__zoomOut"
                      appear
              >
  <!--            注册表单-->
              <div  v-show="!isShow" class="registForm">
                  <div style="flex: 1;display: flex;justify-content: center;align-items: center">
                      用&nbsp;&nbsp;&nbsp;户&nbsp;&nbsp;&nbsp;名:
                      <el-input
                              placeholder="请输入用户名"
                              v-model="regUser.regUsername"
                              style="width: 165px;margin-left: 10px"
                              clearable
                      >
                      </el-input>
                  </div>
                  <div style="flex: 1;display: flex;justify-content: center;align-items: center">
                      密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:
                      <el-input placeholder="请输入密码" style="width: 165px;margin-left: 10px" v-model="regUser.regPwd" show-password></el-input>
                  </div>
                  <div style="flex: 1;display: flex;justify-content: center;align-items: center;">
                      确&nbsp;认&nbsp;密&nbsp;码:
                      <el-input placeholder="请再次输入密码" style="width: 165px;margin-left: 10px" v-model="regUser.regRePwd" show-password></el-input>
                  </div>
                  <div style="flex: 1;display: flex;align-items: center">
                    验&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;码:
                    <el-input placeholder="请输入验证码"  v-model="regUser.code" style="width: 105px;margin-left: 10px"></el-input>
                    <img src="../../assets/pictures/yanzheng.png" style="width: 60px;" alt="假验证码" />
                  </div>
              </div>
              </transition>
              <transition
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__fadeInUp"
                      leave-active-class="animate__zoomOut"
                      appear
              >
  <!--            注册按钮-->
              <div  v-show="!isShow" class="registBtn">
                  <el-button type="success" round style="background-color: #E44B9D;letter-spacing: 5px ;height: 40px; width: 100px; font-size: 14px" @click="userRegister">注册</el-button>
              </div>
              </transition>
          </div>
          <!-- 信息展示界面 -->
           <div id="aaa" class="showInfo"
                :style="{
               borderTopRightRadius:styleObj.bordertoprightradius,
               borderBottomRightRadius:styleObj.borderbottomrightradius,
               borderTopLeftRadius:styleObj.bordertopleftradius,
               borderBottomLeftRadius:styleObj.borderbottomleftradius,
               right:styleObj.rightDis
              }"
                ref="showInfoView">
  
               <transition
                       name="animate__animated animate__bounce"
                       enter-active-class="animate__fadeInUp"
                       leave-active-class="animate__zoomOut"
                       appear
               >
              <!-- 没有用户输入用户名或者找不到用户名的时候 -->
              <div v-show="isShow" style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
               <!-- 欢迎语 -->
                   <div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #E44B9D;font-weight: bold">
                   欢迎你加入恋爱森林！
                   </div>
              <!-- 欢迎图片 -->
                   <div style="flex: 2">
                       <el-button type="success"  style="background-color:#E44B9D;border: 1px solid #ffffff; height: 40px; width: 180px; font-size: 14px" round @click="changeToRegiest">还没有账户？点击注册</el-button>
                   </div>
             </div>
               </transition>
             <!-- 用户输入用户名时展示头像以及姓名 -->
  <!--           <div>-->
  
  <!--           </div>-->
               <transition
                       name="animate__animated animate__bounce"
                       enter-active-class="animate__fadeInUp"
                       leave-active-class="animate__zoomOut"
                       appear
               >
             <!-- 用户注册的时候展示信息 -->
             <div v-show="!isShow" style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
                 <!-- 欢迎语 -->
                 <div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #E44B9D;font-weight: bold">
                     欢迎注册
                 </div>
                 <!-- 欢迎图片 -->
                 <div style="flex: 2">
                     <el-button type="success"  style="background-color:#E44B9D;border: 1px solid #ffffff;height: 40px; width: 180px; font-size: 14px" round @click="changeToLogin">已有账户？点击登录</el-button>
                 </div>
             </div>
               </transition>
          </div>
     </div>
     
    </div>
</template>

<script>
// import 'animate.css';
// eslint-disable-next-line no-unused-vars
import {Axios as request} from "axios";
import axios from '@/utils/axiosConfig';
import {setToken,getToken,setUserId,getUserId} from '@/token/auth'
export default {
    name:'loginIndex',
    data(){
        return{
            //看看用不用转成用户对象
            loginUser:{
                name:"",
                password:"",
                code:'',
            },

            admins:{},
            ////看看用不用转成用户对象
            regUser:{
                regUsername:'',
                regRePwd:'',
                regPwd:'',
                code:'',
            },
            styleObj:{
                bordertoprightradius:'15px',
                borderbottomrightradius: '15px',
                bordertopleftradius:'0px',
                borderbottomleftradius:'0px',
                rightDis:'0px'
            },
            isShow:true
        }
    },
    methods:{
        changeToRegiest(){
            this.styleObj.bordertoprightradius= '0px'
            this.styleObj.borderbottomrightradius='0px'
            this.styleObj.bordertopleftradius='15px'
            this.styleObj.borderbottomleftradius='15px'
            this.styleObj.rightDis='50%'
            this.isShow = !this.isShow
        },
        changeToLogin(){
            this.styleObj.bordertoprightradius= '15px'
            this.styleObj.borderbottomrightradius='15px'
            this.styleObj.bordertopleftradius='0px'
            this.styleObj.borderbottomleftradius='0px'
            this.styleObj.rightDis='0px'
            this.isShow = !this.isShow
        },
        async UserLogin() {
            // this.$router.push('/main');
            if(this.loginUser.code === 'Yj98') {
                try {
                    const response = await axios.post('/auth/login', {
                        username: this.loginUser.name,
                        password: this.loginUser.password
                    })
                    console.log('登录成功', response)
                    // 假设token在响应的data字段中
                    // !!存疑！!
                    const token = response.jwt;
                    const userId = response.userId
                    // console.log(token)
                    // 存储token
                    setToken(token);
                    setUserId(userId)
                    console.log( 'token是：' + getToken() + '\n' + '拿到的userId是：' + getUserId() )
                    // 登录成功后的操作，比如跳转到主页
                    this.$router.push('/main');
                } catch (error) {
                    // 处理登录错误
                    console.error('登录错误:', error);
                }
            }else{
                alert("验证码错误")
            }
        },
        async userRegister() {
            if (this.regUser.regPwd !== this.regUser.regRePwd) {
                alert('两次输入的密码不一致');
                return;
            }
            if (this.regUser.code !== 'Yj98') {
                alert('验证码错误')
            }
            try {
            // 这里调用后端注册接口
            const response = await axios.post('', null, {
                params:{
                    username: this.regUser.regUsername,
                    password: this.regUser.regPwd,
                }
            });
                // 处理注册成功逻辑
                alert('注册成功');
                console.log('注册成功', response);
            } catch (error) {
                // 处理注册失败逻辑
                console.error('注册失败', error);
            }
        }
         },
}


</script>

<style scoped>
@import url('../../assets/css/login/login.css');
</style>