<script setup>
import {defineOptions, onMounted, ref} from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

defineOptions({name: 'Login'});

const servers = ref([])
const account = ref('')
const password = ref('')
const agree = ref(false)
const srvId = ref('')

async function handleLogin() {
  if (!agree.value) return ElMessage.error('请勾选同意用户协议')
  const {data} = await request.post('/api/login', {
    username: account,
    password
  })
  sessionStorage.setItem("CQ-TOKEN", data.token)
}

async function getServers() {
  const {data} = await request.get('/api/server/list')
  servers.value = data
}

function protectProtocol() {
  const agree = document.getElementById('agree')
  const agreeBtn = document.querySelector('#agree .agree_btn')
  agree.addEventListener('click', function () {
    agreeBtn.classList.toggle('agree_btn_checked')
  })
}

onMounted(() => {
  getServers()
})
</script>

<template>
  <div class="login wrapper pagebg">
    <div class="loginBox flex column p-8 gap-8" id="account-login">
      <b class="title mb-20">神临苍月</b>
      <input class="w100" type="text" id="account" v-model="account" placeholder="请输入账号" @keyup="v=>account=v.replace(/[\W]/g, '')" autocomplete="off"/>
      <input class="w100" type="password" id="password" v-model="password" placeholder="请输入密码"/>
      <el-select id="serverId" v-model="srvId" style="border: none; display: none; margin-bottom: 10px;">
        <option value="0">请选择区服</option>
        <option v-for="item in servers" :value="item.id">{{ item.name }}区</option>
      </el-select>
      <div id="agree" class="agree flex gap-4">
        <el-checkbox v-model="agree"/>
        我已阅读并同意 <a @click="protectProtocol">用户协议及隐私协议</a>
      </div>
      <div class="button pointer w100 py-8" @click="handleLogin">登 录</div>
      <div style="display:flex;justify-content:center;gap:8px;font-size:12px">
        <div style="display:flex;align-items:center;flex-direction:column;gap:4px;cursor:pointer" id="linuxdoConnect">
          <img src="/img/linuxdo_logo.png" style="width:60px;height:60px" alt="Linux.Do登录"/>
          <div>Linux.do</div>
        </div>
      </div>
      <div class="forget_password">
        <a href="javascript:void(0);" id="forgetPassword" data-type="2">忘记密码?</a>
        <a href="javascript:void(0);" class="pull-right" id="switchBtn" data-type="1">注册</a>
      </div>
    </div>
    <div id="bg" class="gamebg"/>
  </div>
</template>

<style lang="scss" scoped>
.login {
  position: relative;
  background-image: url("/img/login_bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  height: 100vh;

  .loginBox {
    position: absolute;
    width: 300px;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(4px);

    & > .title {
      font-size: 28px
    }

    .button {
      background: rgb(245, 189, 16);
      text-align: center;
      letter-spacing: 8px;
      border-radius: 8px;
      cursor: pointer;

      &:hover {
        opacity: .8
      }
    }

    .agree_btn {
      width: 16px;
    }

    & > input {
      height: 32px;
    }
  }
}

</style>
