<template>
    <div id="app">
      <div class="login-wrap">
        <div class="title">用户登录</div>
        <form class="login-form">
          <div class="form-item effect-7">
            <img class="input-icon" src="@/assets/img/icon-user.png" alt="">
            <span class="line"></span>
            <input type="text" placeholder="请输入用户名" v-model="loginForm.email" />
            <span class="focus-border">
                  <i></i>
            </span>
          </div>
          <div class="form-item effect-7">
            <img class="input-icon" src="@/assets/img/icon-pass.png" alt="">
            <span class="line"></span>
            <input type="password" placeholder="请输入密码" v-model="loginForm.password" />
            <span class="focus-border">
                  <i></i>
            </span>
          </div>
          <div class="code-wrap">
            <div class="form-item effect-7">
              <input type="text" placeholder="请输入验证码" v-model="loginForm.code" />
              <span class="focus-border">
                  <i></i>
            </span>
            </div>
            <img class="code-img" src="@/assets/img/code.png" alt="">
          </div>
          <div class="save-pass">
            <input type="checkbox" id="checkbox" v-model="savePass">
            <label for="checkbox">记住密码</label>
          </div>
          <div class="logn-btn" @click="handleLogin($event)">登录</div>
        </form>
      </div>
      <svg width="500" height="500" style="position: absolute;left: 240px;top: 260px;transform: skew(10deg,10deg)">
        <defs>
          <linearGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color: #00e5ff; stop-opacity: 0" />
            <stop offset="50%" style="stop-color: #64d6f3; stop-opacity: 0.6" />
            <stop offset="70%" style="stop-color: #00e5ff; stop-opacity: 0" />
            <stop offset="100%" style="stop-color: #fff; stop-opacity: 1" />
          </linearGradient>
        </defs>
        <circle cx="250" cy="250" r="200" stroke="url(#grad)" stroke-width="2" fill="none">
          <animateTransform attributeName="transform"
                            attributeType="XML"
                            type="rotate"
                            from="0 250 250"
                            to="360 250 250"
                            dur="2s"
                            repeatCount="indefinite" />
        </circle>
      </svg>
      <svg width="500" height="500" style="position: absolute;left: 240px;top: 260px;transform: skew(-10deg,174deg)">
        <defs>
          <linearGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color: #00e5ff; stop-opacity: 0" />
            <stop offset="50%" style="stop-color: #64d6f3; stop-opacity: 0.6" />
            <stop offset="70%" style="stop-color: #00e5ff; stop-opacity: 0" />
            <stop offset="100%" style="stop-color: #fff; stop-opacity: 1" />
          </linearGradient>
        </defs>
        <circle cx="250" cy="250" r="200" stroke="url(#grad)" stroke-width="2" fill="none">
          <animateTransform attributeName="transform"
                            attributeType="XML"
                            type="rotate"
                            from="0 250 250"
                            to="360 250 250"
                            dur="3s"
                            repeatCount="indefinite" />
        </circle>
      </svg>
      <Footer />
    </div>
  </template>
  
  <script>
  import Footer from '@/components/footer.vue';
  import starBG from '@/utils/starBG';
  import wordball from '@/utils/wordball';
  import line from '@/utils/line';
  export default {
    name: 'App',
    components: {
      Footer
    },
    data() {
      return {
        loginForm:{
          email: '',
          password: '',
          code:'',
        },
        savePass:false
      };
    },
    created(){
      
    },
    mounted(){
      
      starBG();//星空背景
      wordball();//球形文字
      line();//跳动线条
    },
    methods:{
      validateLoginForm() {
        if (!this.loginForm.email || !this.loginForm.password) {
          alert('邮箱和密码不能为空')
          console.log('邮箱和密码不能为空');
          return false;
        }
        if (!this.loginForm.code) {
          alert('请输入验证码')
          return false;
        }
      
        // 验证邮箱格式
        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailPattern.test(this.loginForm.email.trim())) {
          alert('邮箱格式不正确')
          console.log('邮箱格式不正确');
          return false;
        }
      
        // 其他自定义验证逻辑
        return true;
      },
      handleLogin(e){
        console.log('savePass',this.savePass);
        console.log('loginForm',this.loginForm);
        e.preventDefault();
        if (this.validateLoginForm()) {
          login({email:this.loginForm.email, password:this.loginForm.password}).then(res => {
            localStorage.setItem('token',res.token);
            handleGetMemberInfo();
            // console.log('登录成功',res);
          }).catch(err => {
            console.log('登录失败',err);
          });
        }
      }
    }
  }
  </script>
  
  <style lang="scss">
  @import '@/assets/css/login.scss';
  #app{
    position: relative;
    z-index: 101;
  }
  
  
  @keyframes spin {
    0% {
      transform:rotate(0deg);
      transform-origin: center;
    }	
    
    100% {
      transform:rotate(360deg);
      transform-origin: center;
    }
  }
  
  // 登录框
  .login-wrap{
    width: 500px;
    height: 520px;
    position: fixed;
    bottom:200px;
    right:160px;
    background:url(@/assets/img/login-wrap.png) no-repeat;
    background-size:100%;
    overflow: hidden;
    .title{
      text-align: center;
      padding-top: 65px;
      margin-bottom: 40px;
      font-size: 28px;
      line-height: 24px;
      color: #DEEDFF;
    }
    .login-form{
      width:370px;
      margin: 0 auto;
      .form-item{
        position: relative;
        border: 2px solid #3394FF;
        box-sizing:border-box;
        height:50px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .input-icon{
          margin-left: 10px;
        }
        .line{
          width: 1px;
          height: 17px;
          background-color: rgba(255,255,255,0.3);
          margin-left: 5px;
        }
        input{
          outline: none;
          border: 0;
          height: 100%;
          flex: 1;
          background: transparent;
          padding-left: 10px;
          color: #fff;
          font-size: 20px;
          box-sizing: border-box;
        }
      }
  
      .effect-7{transition: 0.4s;}
      .effect-7  .focus-border:before,
      .effect-7  .focus-border:after{content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 2px; background-color: #7cbaff; transition: 0.4s;}
      .effect-7  .focus-border:after{top: auto; bottom: 0;}
      .effect-7  .focus-border i:before,
      .effect-7 .focus-border i:after{content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 0; background-color: #7cbaff; transition: 0.6s;}
      .effect-7  .focus-border i:after{left: auto; right: 0;}
      .effect-7 input:focus ~ .focus-border:before,
      .effect-7 input:focus ~  .focus-border:after{left: 0; width: 100%; transition: 0.4s;}
      .effect-7 input:focus ~  .focus-border i:before,
      .effect-7 input:focus ~  .focus-border i:after{top: 0; height: 100%; transition: 0.6s;}
      
      .code-wrap{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .form-item{
          margin-bottom: 0;
          input{
            width:200px;
          }
        }
        .code-img{
          width:141px;
          height:50px;
          padding-left: 30px;
          cursor: pointer;
        }
      }
    }
    .save-pass{
      font-size: 16px;
      font-weight: 400;
      color: #3394FF;
      line-height: 16px;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      input{
        width: 16px;
        height: 16px;
      }
    }
    .logn-btn{
      height: 50px;
      line-height: 50px;
      background:url(@/assets/img/login-btn.png) no-repeat;
      text-align: center;
      font-size: 24px;
      font-weight: 500;
      color: #FFFFFF;
      letter-spacing: 3px;
      cursor: pointer;
    }
  }
  @media screen and (max-width: 516px){
    .login-wrap{
      right: 0;
      top: 100px;
      width: 100%;
    }
  }
  </style>
  