<template>
  <div class="custom-login">
    <div class="custom-login-title">登录</div>
    <t-form
      ref="form"
      class="custom-login-form"
      :data="formData"
      :rules="FORM_RULES"
      :colon="true"
      :label-width="0"
      @reset="onReset"
      @submit="onSubmit"
    >
      <t-form-item name="account">
        <t-input
          v-model="formData.account"
          clearable
          placeholder="请输入账户名"
        >
          <template #prefix-icon>
            <desktop-icon />
          </template>
        </t-input>
      </t-form-item>

      <t-form-item name="password">
        <t-input
          v-model="formData.password"
          type="password"
          clearable
          placeholder="请输入密码"
        >
          <template #prefix-icon>
            <lock-on-icon />
          </template>
        </t-input>
      </t-form-item>

      <t-form-item>
        <t-button theme="primary" type="submit" block>登录</t-button>
      </t-form-item>
    </t-form>
    <Animation
      v-show="loading"
      poistion="fixed"
      background="rgba(200,200,200,0.2)"
    ></Animation>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
import {
  MessagePlugin,
  Form as TForm,
  FormItem as TFormItem,
  Input as TInput,
  Button as TButton,
  FormRule,
} from 'tdesign-vue-next';
import { DesktopIcon, LockOnIcon } from 'tdesign-icons-vue-next';
import { UserLogin } from '@/utils/api/userApi';
import { useStore } from 'vuex';
import Animation from '@/components/Animation.vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const store = useStore();
const loading = ref(false);
const formData = reactive({
  account: '',
  password: '',
});
const FORM_RULES = computed(() => {
  return {
    account: [
      { required: true, message: '账号不能为空', type: 'error' },
    ] as FormRule[],
    password: [
      { required: true, message: '密码不能为空', type: 'error' },
    ] as FormRule[],
  };
});
const onReset = () => {
  MessagePlugin.success('重置成功');
};

const onSubmit = async ({ validateResult, firstError }: any) => {
  if (validateResult === true) {
    try {
      loading.value = true;
      let res: any = await UserLogin({
        email: formData.account,
        password: formData.password,
      });
      if (res.code == 0) {
        MessagePlugin.success('登录成功');
        store.commit('user/setToken', {
          token: res.data.access_token,
          time: res.data.expires_in,
        });
        router.replace({
          path: '/',
        });
      }
      loading.value = false;
    } catch (e) {
      console.log(e);
      loading.value = false;
    }
  } else {
    MessagePlugin.closeAll();
    MessagePlugin.warning(firstError);
  }
};
</script>

<style lang="less">
@import '@/style/flex.less';
.custom-login {
  width: 400px;
  margin: 0 auto;
  .dj();
  flex-direction: column;
  .custom-login-title {
    font-weight: 500;
    font-size: 50px;
    color: #000000;
    text-align: center;
  }
  .custom-login-form {
    margin-top: 40px;
  }
}
</style>
