<template>
  <a-form
      ref="formRef"
      :model="loginParams"
      :rules="loginParamsRule"
      @finish="login"
      layout="vertical"
      size="large"
      class="login-form"
  >
    <a-form-item name="telephone">
      <a-input
          v-model:value="loginParams.telephone"
          placeholder="请输入账号/手机号"
          :max-length="64"
          allow-clear
      />
    </a-form-item>
    <a-form-item name="password">
      <a-input-password
          v-model:value="loginParams.password"
          placeholder="请输入密码"
          :max-length="32"
      />
    </a-form-item>
    <div class="remember-me">
      <a-checkbox disabled>
        记住我
      </a-checkbox>
    </div>
    <a-button
        class="btn"
        type="primary"
        html-type="submit"
    >立即登录
    </a-button>
  </a-form>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {FormInstance, message, notification} from "ant-design-vue";
import {Rule} from "ant-design-vue/es/form";
import {LoginParams} from "@/types/views/login.ts";
import api from "@/axios";
import {CLIENT_TYPE} from "@/config";
import rsaUtil from "@/utils/rsaUtil.ts";
import {TokenInfo} from "@/types/stores/userStore.ts";
import {useUserStore} from "@/stores/modules/userStore.ts";
import {useRouter} from "vue-router";

const userStore = useUserStore()
const router = useRouter()

const formRef = ref<FormInstance>(null!)
const loginParamsRule: Record<keyof LoginParams, Rule[]> = {
  telephone: [
    {required: true, message: '请输入手机号', trigger: 'change'},
    {len: 11, message: "长度不够", trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'change'},
    {min: 6, max: 20, message: '密码长度最小为6最长为20', trigger: 'blur'},
  ],
}
const loginParams = ref<LoginParams>({
  telephone: __APP_ENV.VITE_APP_ENV === "development" ? '15576404472' : '',
  password: __APP_ENV.VITE_APP_ENV === "development" ? '123456' : ''
});

/**
 * 登录
 */
const login = async () => {
  //校验表单
  await formRef.value.validate()
  //执行登录逻辑
  const resp = await api.post<TokenInfo>('/login', {
    clientType: CLIENT_TYPE,
    loginParams: {
      telephone: loginParams.value.telephone,
      password: rsaUtil.encryptStr(loginParams.value.password)
    }
  })
  //保存token
  userStore.saveTokenInfo(resp.data as TokenInfo)
  //跳转页面
  router.push("/index").then(() => {
    notification.success({
      message: '登录成功',
      duration: 2,
      description: '欢迎来到本系统!',
      placement: 'topRight'
    })
  })
}

</script>

<style lang="scss" scoped>
.login-form {
  box-sizing: border-box;
  padding: 0 5px;
  margin-top: 16px;

  :deep(.ant-input-group-addon) {
    padding: 0;
    overflow: hidden;
  }

  .ant-form-item {
    margin-bottom: 20px;
  }

  .remember-me {
    display: flex;
    justify-content: space-between;
  }

  .btn {
    border-radius: 4px;
    box-shadow: 0 0 0 1px #05f,
    0 2px 1px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    font-weight: 500;
    height: 40px;
    line-height: 22px;
    margin: 20px 0 12px;
    width: 100%;
  }
}
</style>
