<template>
  <div class="login login-box">
    <div class="login-theme">
      <h2>
        欢迎登录 <br />
        预约报名系统
      </h2>

      <p class="login-webinfo">
        <a href="http://www.qmth.com.cn" target="_blank"
          >Copyright © 2024 启明泰和</a
        >
        <!-- <br /> -->
        <!-- <a href="https://beian.miit.gov.cn/" target="_blank">
          启明泰和 鄂ICP备12000033号-9</a
        > -->
        <span v-if="appStore.version"> v{{ appStore.version }}</span>
      </p>
    </div>
    <div class="login-body" @keyup.enter="submit">
      <div class="login-title">
        <h1>输入信息</h1>
        <p>请输入账号与密码</p>
      </div>
      <div class="login-form">
        <el-form
          ref="formRef"
          size="large"
          :model="formData"
          :rules="rules"
          label-position="top"
        >
          <el-form-item prop="account">
            <el-input
              v-model.trim="formData.account"
              placeholder="请输入账号"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model.trim="formData.password"
              type="password"
              placeholder="请输入密码"
              show-password
              clearable
            >
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              :loading="loading"
              style="width: 100%"
              @click="submit"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

  <!-- ResetPwd -->
  <ResetPwd
    ref="resetPwdRef"
    @modified="resetPwdSuccess"
    @cancel="resetCancel"
  />
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import type { FormInstance, FormRules } from 'element-plus';
  import useLoading from '@/hooks/loading';
  import { login } from '@/api/user';
  import { useAppStore, useUserStore } from '@/store';
  import { DEFAULT_ROUTE_NAME } from '@/router/constants';

  import ResetPwd from './ResetPwd.vue';

  const router = useRouter();
  const appStore = useAppStore();
  const userStore = useUserStore();
  userStore.resetInfo();
  appStore.resetInfo();

  const resetPwdRef = ref();
  const formRef = ref<FormInstance>();
  const formData = reactive({
    account: '',
    password: '',
  });
  const rules: FormRules = {
    account: [
      {
        required: true,
        message: '请输入账号',
      },
    ],
    password: [
      {
        required: true,
        message: '请输入密码',
      },
    ],
  };

  function resetPwdSuccess() {
    router.push({
      name: DEFAULT_ROUTE_NAME,
    });
  }

  function resetCancel() {
    userStore.resetInfo();
  }

  /* submit */
  const { loading, setLoading } = useLoading();
  async function submit() {
    const err = await formRef.value?.validate();
    if (err) return;

    setLoading(true);
    const data = await login(formData).catch(() => {});
    setLoading(false);
    if (!data) return;

    userStore.setInfo(data);

    // 首次登录强制修改密码
    if (data.firstLogin) {
      resetPwdRef.value?.open();
      return;
    }

    router.push({
      name: DEFAULT_ROUTE_NAME,
    });
  }
</script>
