<template>
  <a-spin size="large" tip="正在登录中..." :spinning="state.loading">
    <div class="login-box">
      <div class="login-logo">
        <img src="/youjia.svg" width="45" />
        <a-typography-title style="margin-top: 18px" :level="1">有家相册</a-typography-title>
      </div>
      <a-form layout="horizontal" :model="state.LoginData" @finish="handleSubmit">
        <a-form-item name="UserMobile" :rules="[{ required: true, message: '请输入手机号!' }]">
          <a-input v-model:value="state.LoginData.UserMobile" size="large" placeholder="手机号">
            <template #prefix><user-outlined type="user" /></template>
          </a-input>
        </a-form-item>
        <a-form-item name="UserPassword" :rules="[{ required: true, message: '请输入密码!' }]">
          <a-input v-model:value="state.LoginData.UserPassword" size="large" type="password" placeholder="密码">
            <template #prefix><lock-outlined type="user" /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" size="large" block> 登录 </a-button>
        </a-form-item>

        <a-button type="dashed" @click.prevent="onRegister" size="large" style="width: 80px">
          注册
        </a-button>
        <a-button type="dashed" @click.prevent="onHome" size="large"
          style="width: 80px; margin-top: 16px; margin-left: 24px">
          首页
        </a-button>
      </a-form>
    </div>
  </a-spin>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import authService from "@/service/security/authService";
import { LoginData } from "@/data/auto/loginData";
import { LoginProfile } from "@/data/auto/loginProfile";
import { useLoginProfileStore } from "@/store/modules/loginProfile";

import { v4 as uuidv4 } from "uuid";
import { JSEncrypt } from "jsencrypt";
import CryptoJS from "crypto-js";

import i18n from "@/locales";

const { t } = i18n.global;
//const props = defineProps(['id'])

const router = useRouter();

const state = reactive({
  loading: false,
  LoginData: {
    UserMobile: "", //"props["id"]",
    UserPassword: "",
  },
});

const onRegister = () => {
  router.push({ path: "/register" });
};

const onHome = () => {
  router.push({ path: "/" });
};

const handleSubmit = async () => {
  try {
    state.loading = true;

    let data: LoginData = {
      UserName: "",
      AgentUserName: "",
      RsaUserPassword: "",
      UserMobile: state.LoginData.UserMobile,
      UserPassword: "",
      Guid: uuidv4(),
      Culture: "zh-cn",
    };

    let key = await authService.GetRsaPublicKey();

    let encrypt = new JSEncrypt();
    encrypt.setPublicKey(key);
    data.RsaUserPassword = encrypt
      .encrypt(data.Guid + CryptoJS.MD5(state.LoginData.UserPassword))
      .toString();

    let profile: LoginProfile = await authService.Login(data);

    const userLoginProfile = useLoginProfileStore();

    userLoginProfile.updateLoginProfile(profile);

    router.push({ path: "/dashboard" });
  } catch (error) {
  } finally {
    state.loading = false;
  }
};
</script>

<style lang="less" scoped>
.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding-top: 240px;
  background: url("@/assets/login.svg");

  .login-logo {
    display: flex;
    align-items: center;
    height: 48px;
    line-height: 48px;
    margin-bottom: 30px;
    font-size: 36px;

    .svg-icon {
      font-size: 48px;
    }
  }

  :deep(.ant-form) {
    width: 360px;

    .ant-col {
      width: 360px;
    }

    .ant-form-item-label {
      padding-right: 6px;
      padding-left: 6px;
    }
  }
}
</style>
