<script setup lang="ts">
import { reactive, toRaw } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter, useRoute } from 'vue-router';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { loginSMTP } from '@/api/auth';
import {
  loginSourceState,
  fnClickLoginBack,
} from '@/views/login/hooks/useLoginSource';
import { setAccessToken, setRefreshToken } from '@/plugins/auth-token';

const { t } = useI18n();
const router = useRouter();
const route = useRoute();

let state = reactive({
  /**表单属性 */
  from: {
    /**账号 */
    username: '',
    /**密码 */
    password: '',
    /**认证uid */
    uid: loginSourceState.selct.uid,
  },
  /**表单提交点击状态 */
  fromClick: false,
});

/**表单验证通过 */
function fnFinish() {
  state.fromClick = true;
  // 发送请求
  loginSMTP(toRaw(state.from))
    .then(res => {
      if (res.code === RESULT_CODE_SUCCESS) {
        message.success(t('views.login.loginSuccess'), 1);
        setAccessToken(res.data.accessToken, res.data.refreshExpiresIn);
        setRefreshToken(res.data.refreshToken, res.data.refreshExpiresIn);
        /**登录后重定向页面 */
        const redirectPath = route.query?.redirect || '/index';
        router.push({ path: redirectPath as string });
      } else {
        message.error(`${res.msg}`, 3);
      }
    })
    .finally(() => {
      state.fromClick = false;
    });
}
</script>

<template>
  <a-card :bordered="false" class="login-card">
    <div class="title">
      {{ loginSourceState.selct.name }}
    </div>

    <a-form :model="state.from" name="stateFrom" @finish="fnFinish">
      <a-form-item
        name="username"
        :rules="[
          {
            required: true,
            min: 2,
            max: 30,
            message: t('valid.userNamePlease'),
          },
        ]"
      >
        <a-input
          v-model:value="state.from.username"
          size="large"
          :placeholder="t('valid.userNameHit')"
          :maxlength="30"
        >
          <template #prefix>
            <UserOutlined class="prefix-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
        name="password"
        :rules="[
          {
            required: true,
            min: 5,
            max: 26,
            message: t('valid.passwordPlease'),
          },
        ]"
      >
        <a-input-password
          v-model:value="state.from.password"
          size="large"
          :placeholder="t('valid.passwordHit')"
          :maxlength="26"
        >
          <template #prefix>
            <LockOutlined class="prefix-icon" />
          </template>
        </a-input-password>
      </a-form-item>

      <a-button
        block
        type="primary"
        size="large"
        html-type="submit"
        :loading="state.fromClick"
      >
        {{ t('views.login.loginBtn') }}
      </a-button>

      <a-button
        block
        size="large"
        :disabled="state.fromClick"
        style="margin-top: 24px"
        @click="fnClickLoginBack"
      >
        {{ t('views.login.backBtn') }}
      </a-button>
    </a-form>
  </a-card>
</template>

<style lang="less" scoped>
.login-card {
  width: 368px;
  min-width: 260px;
  margin: 0 auto;
  margin-left: 60%;
  border-radius: 6px;

  & .title {
    text-align: left;
    margin-bottom: 18px;
    color: #141414;
    font-weight: 600;
    font-size: 18px;
  }
  & .prefix-icon {
    color: #8c8c8c;
    font-size: 16px;
  }
}

[data-theme='dark'] .login-card {
  & .title {
    color: #999;
  }
}

@media (max-width: 992px) {
  .login-card {
    margin: 0 auto;
  }
}
</style>
