<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.password" style="width: 125px" show-password></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="loginUser.password" style="width: 105px;margin-left: 10px" show-password></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>
  <style scoped >
    /* @import '../assets/css/Login.css' */
    .base{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("../../assets/pictures/background.png");
        background-size: 100%;
    }

    .loginAndRegist
    {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        right:6%;
        top:35%;
        
        
    }
    .loginArea{
        background-color: rgba(255,255,255,0.8);
        opacity: 0.8;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        height: 400px;
        width: 400px;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
    }
    .registArea{
        opacity: 0.8;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        height: 400px;
        width: 400px;
        background-color: rgba(255,255,255,0.8);
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content:center ;
        align-items: center;
    }
    .showInfo{
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        position: absolute;
        height: 400px;
        width: 400px;
        z-index:2;
        top: 0;
        right: 0;
        background-image: url("../../assets/pictures/welcome.png");
        background-size: 90%;
    }
    .showInfo:hover{
        background-size: 100%;
        background-position: -50px -50px;
    }
    .title{
        width: 80%;
        flex:1;
        border-bottom: 1px solid #E44B9D;
        display: flex;
        align-items: center;
        color: #E44B9D;
        font-weight: bold;
        font-size: 24px;
        display: flex;
        justify-content: center;
    }
    #aaa{
        transition: 0.3s linear;
    }
    .pwdArea{
        width: 100%;
        flex:2;
        display: flex;
        flex-direction: column;
        color: #E44B9D;
        font-size: 20px;
        font-weight: bold;
    }
    .pwdArea input{
        height: 30px;
        border-radius:15px ;
        padding-left: 10px;
        font-size: 13px;
        border: 3px solid #EAF2FF;
        
        
    }
    .pwdArea input:focus{

        border: 2px solid #E44B9D;
    }
        .btnArea{
            flex:1;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .rigestTitle{
            width: 70%;
            flex: 1;
            color: #E44B9D;
            font-weight: bold;
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid #E44B9D;
        }
        .registForm{
            flex: 2;
            display: flex;
            flex-direction: column;
            color: #E44B9D;
            font-size: 20px;
            font-weight: bold;
        }
    
        .registForm input{
        outline: none;
        height: 30px;
        border-radius:13px ;
        padding-left: 10px;
        font-size: 12px;
        border: 1px solid gray;
        }
    .registForm input:focus{
        border: 2px solid #E44B9D;
    }
    #elselect:focus{
        border: 2px solid #E44B9D;
    }
        .registBtn{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
    
    </style>


<script>
    import 'animate.css';
    // eslint-disable-next-line no-unused-vars
    import {Axios as request} from "axios";
export default {

    name:'loginIndex',
    data(){
        return{
            //看看用不用转成用户对象
            loginUser:{
                name:"",
                password:""
            },

            admins:{},
            ////看看用不用转成用户对象
            regUser:{
                regUsername:'',
                regRePwd:'',
                regPwd:'',
                selectValue:"",
            },
            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
        },
        
         },
}


</script>