<template>
  <div class="login">
    <a-row>
      <a-col :span="12"></a-col>
      <a-col :span="12">
        <a-form
          ref="formRef"
          class="loginItem"
          :model="formState"
          name="login"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <h1>Hello</h1>
          <h2>您好，欢迎来到我的世界</h2>
          <a-form-item
            name="phoneNumber"
            :rules="[{ required: true, message: '请输入您的电话号码!' }]"
          >
            <a-input
              placeholder="请输入您的电话号码"
              v-model:value="formState.phoneNumber"
            >
              <template #prefix>
                <UserOutlined class="site-form-item-icon" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
            name="password"
            :rules="[{ required: true, message: '请输入您的密码!' }]"
          >
            <a-input-password
              placeholder="请输入您的密码"
              v-model:value="formState.password"
            >
              <template #prefix>
                <LockOutlined class="site-form-item-icon" />
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item name="remember">
            <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
          </a-form-item>
          <a-form-item>
            <a-button
              style="width: 100%"
              type="primary"
              :loading="loading"
              html-type="submit"
              >登录</a-button
            >
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
  </div>
</template>
<!--  -->
<script setup lang="ts">
// import api from "@/axios";
import { ref, computed, reactive } from "vue";
import aesUtil from "@/utils/aesUtil";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { useUserStore } from "@/stores/modules/userStore";
import { encryptStr } from "@/utils/aesUtil";
import { useRoute, useRouter } from "vue-router";
import { message } from "ant-design-vue";
import api from "@/axios";
const userStore = useUserStore();
const formRef = ref();
const loading = ref(false);
interface FormState {
  phoneNumber: string;
  password: string;
  remember: boolean;
}
const formState = reactive<FormState>({
  phoneNumber: "15576404472",
  password: "123456",
  remember: true,
});
// 路由对象
const $route = useRoute();
// 获取路由器
const $router = useRouter();
const onFinish = () => {
  userStore.tokenList('Ghdfef13156513256413565')
  let redirect: any = $route.query.redirect
  $router.push({ path: redirect || "/login" })
  message.success("成功登录")
  // loading.value = true;
  // const encryptedText = encryptStr(formState.password);
  // api
  //   .post("/login/management", {
  //     phoneNumber: formState.phoneNumber,
  //     password: encryptedText,
  //   })
  //   .then((res) => {
  //     if (res.code === 200) {
  //       userStore.setTokenInfo(res.data as tokenInfo);
  //       let redirect: any = $route.query.redirect;
  //       $router.push({ path: redirect || "/login" });
  //       message.success("成功登录");
  //     }
  //     loading.value = false;
  //   });
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
</script>
<style lang="scss">
@import "./login.scss";
</style>
