<template>
  <div class="tw-h-screen tw-flex tw-justify-center tw-items-center">
    <div class="tw-flex" style="width: 860px; height: 558px">
      <div style="width: 400px" class="left-panel">
        <div class="tw-text-2xl">欢迎登录，<br />考试成绩综合分析系统</div>
        <div style="font-size: 12px">武汉启明泰和软件服务有限公司技术支持</div>
      </div>

      <div class="tw-bg-white" style="padding: 0 70px 0 90px">
        <div style="padding: 80px 0"><img class="qm-logo-img" /></div>

        <div style="width: 300px">
          <a-form-item>
            <a-input v-model:value="accountValue" placeholder="请输入用户名" />
          </a-form-item>
          <a-form-item>
            <a-input-password
              v-model:value="password"
              placeholder="请输入密码"
              @keypress.enter="login"
            />
          </a-form-item>

          <div class="tw-text-red-500 tw-pb-4">
            {{ errorInfo }}
          </div>

          <qm-button type="primary" @click="login">立即登录</qm-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { loginByUsername } from "@/api/loginPage";
import { useRouteQuery } from "@vueuse/router";
import { useRouter } from "vue-router";
import { useMainStore } from "@/store";
const store = useMainStore();

let accountValue = $ref("");
let password = $ref("");
let rootOrgId = $(useRouteQuery("rootOrgId"));
const router = useRouter();
if (!rootOrgId) {
  void router.push("/?rootOrgId=1");
}

let errorInfo = $ref("");

async function login() {
  try {
    const res = await loginByUsername({
      accountValue,
      password,
      rootOrgId: parseInt(rootOrgId?.toString() ?? "1"),
    });
    console.log(res);
    store.setUserInfo(res.data);
    if (rootOrgId === "1") {
      void router.push("/basic/rootOrg");
    } else {
      void router.push("/project/projectManagement");
    }
  } catch (error) {
    console.log(error);
    errorInfo = (<any>error).response.data.desc;
  }
}
</script>

<style scoped>
.left-panel {
  width: 400px;
  padding: 58px 100px 30px 60px;
  color: white;
  background-image: url(./left.png);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.qm-logo-img {
  content: url(@/assets/qm-logo.png);
  height: 120px;
}
</style>
