<!--
 * @FileDescription: 登录页面
 * @Date: 2023-08-15
 * @LastEditTime: 2023-10-08
-->
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useUserInfoStore, useMessage } from 'src/common/hooks';
import { isEmpty } from 'src/common/utils';

const router = useRouter();
const route = useRoute();
const userInfoStore = useUserInfoStore();
const { error } = useMessage();

const ruleRequired = [(val: any) => !isEmpty(val) || '必填'];

const loading = ref(false);
const isPwd = ref(true);
const state = reactive({
  formdata: {
    username: null,
    password: null,
  },
});
function onSubmit() {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    loginSuccess();
  }, 1000);
}
function loginSuccess() {
  const result = {
    id: 1,
    username: 'admin',
    is_admin: true,
  };
  if (state.formdata.username !== 'admin') return error('用户名错误');
  if (state.formdata.password !== 'admin') return error('密码错误');

  userInfoStore.setUserInfo(result);

  const redirect = (route.query.redirect || '/home') as string;
  router.push({
    path: redirect,
  });
}
</script>
<template>
  <div style="height: 100vh" class="login-page">
    <div class="container column">
      <div class="title-box">
        <div class="title-icon"></div>
      </div>
      <q-form @submit="onSubmit">
        <q-input
          v-model="state.formdata.username"
          label="用户名"
          rounded
          outlined
          no-error-icon
          label-color="primary"
          class="login-input"
          :rules="ruleRequired"
        >
          <template v-slot:append>
            <q-icon name="fa-solid fa-user" color="brown-6" />
          </template>
        </q-input>

        <q-input
          v-model="state.formdata.password"
          label="密码"
          rounded
          outlined
          no-error-icon
          label-color="primary"
          :type="isPwd ? 'password' : 'text'"
          class="q-mt-sm login-input"
          :rules="ruleRequired"
        >
          <template v-slot:append>
            <q-icon
              :name="isPwd ? 'fa-solid fa-eye-slash' : 'fa-solid fa-eye'"
              class="cursor-pointer"
              color="brown-6"
              @click="isPwd = !isPwd"
            />
          </template>
        </q-input>

        <div style="margin-top: 24px">
          <q-btn
            unelevated
            label="登录"
            type="submit"
            color="primary"
            class="full-width login-btn"
            text-color="brown-6"
            :loading="loading"
          >
            <template v-slot:loading>
              <q-spinner-facebook />
            </template>
          </q-btn>
        </div>
      </q-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('./imgs/login-bg.png');
  background-size: cover;
  background-position: center;

  .container {
    width: 420px;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

    border-radius: 10px;
    padding: 30px 34px;
    > .title-box {
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      > .title-icon {
        height: 84px;
        width: 84px;
        background: url('./imgs/login-icon.svg');
        background-size: cover;
        background-position: center;
      }
    }
  }
}
.login-btn {
  height: 56px;
  border-radius: 56px;
  font-size: 18px;
  letter-spacing: 2px;
}
</style>
