<template>
  <!-- 注册页 -->
  <div class="login-index">
      <div class="login-input box-sizing-border-box plr-50">
          <div class="align-items-center justify-content login-box ">
              <img class="logo-img mr-10" src="@/assets/img/logo.png" alt="">
              <div class="fw-400 fs-18">用户注册</div>
          </div>
          <input type="text" placeholder="输入邮箱号码">
          <div class="p-f">
            <input type="text" placeholder="输入验证码">
            <getCheckCode class="getCheckCode" :type="'retrieve'"></getCheckCode>
          </div>

          <input type="text" placeholder="输入邀请码">
          <div class="align-items-center justify-content-space-between mb-36">
            <div class="align-items-center hand-cursor" @click="toLogin()">
              <div class="fs-14 fc-70">已有账号， </div>
              <div class="fs-14 fc-12">去登录</div>
            </div>
          </div>
          <div class="button-login fs-14 fc-12 text-align-center hand-cursor" @click="toRegister()">注册</div>
      </div>
  </div>
</template>

<script>
  import getCheckCode from './module/getCheckCode.vue'
  import tools from "@/utils/tools";

  export default {
    components: {
      getCheckCode
    },
    data() {
      return {
        isAJAX:false,
      };
    },
    methods: {
      toLogin() {
        this.$router.push("/login");
      },

      toRegister() {
        if (this.fromData.password === '') {
          return tools.success('请输入密码');
        }
        login(this.loginForm).then((res) => {
          if (res.code === 1) {
            localStorage.setItem('userName',res.data.user.name)
            localStorage.setItem('token',res.data.token)
            getMenuIds().then((res)=>{
              if(res.code === 1){
                localStorage.setItem('ids',res.data)
                this.$router.push('/login')
              }else{
                this.$notify.error(res.msg)
              }
            })
          } else {
            this.$notify.error(res.msg)
          }
        })
      },
    },
  };
</script>

<style lang="scss" scoped>
  input {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid rgba(211, 212, 216, 1);
    background: rgba(255, 255, 255, 1);
    margin-bottom: 16px;
  }

  input::-webkit-input-placeholder {
    color: #666666;
  }

  input:focus {
    outline: none;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  .login-index{
    width: 100%;
    height: 100vh;
    background: url('@/assets/img/login-bg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    .login-input{
      width: 500px;
      height: 456px;
      opacity: 1;
      background: rgba(255, 255, 255, 0.6);
      margin: auto;
    }
    .login-box{
      margin: 35px auto 39px auto;
      .logo-img{
        width: 48px;
        height: 48px;
        opacity: 1;
        background: rgba(255, 255, 255, 1);
        border-radius: 50%;

      }
    }
    .button-login{
      width: 100%;
      height: 48px;
      line-height: 48px;
      opacity: 1;
      border-radius: 6px;
      background: #C7AB7B;
    }

    .p-f{
      position: relative;
      input{
        padding-right: 100px;
      }
      .getCheckCode{
        position: absolute;
        right: 15px;
        top: 17px;
      }
    }
  }
</style>
