<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"
      @submit="onSubmit"
    >
      <t-form-item name="account">
        <div class="form-item-box">
          <div class="label">请输入用户名或邮箱</div>
          <CustomInput
            placeholder=""
            :needSelect="true"
            :selectList="rememberList.list"
            v-model="formData.account"
            @submitAccount="submitAccount"
            align="left"
          ></CustomInput>
        </div>
      </t-form-item>
      <t-form-item name="password">
        <div class="form-item-box">
          <div class="label">请输入密码</div>
          <CustomInput
            placeholder=""
            type="password"
            v-model="formData.password"
            align="left"
          ></CustomInput>
        </div>
      </t-form-item>
      <t-form-item>
        <t-checkbox class="remember-password-box" v-model="remember"
          >记住密码</t-checkbox
        >
      </t-form-item>
      <t-form-item>
        <CustomButton type="submit" width="423px">登录</CustomButton>
      </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 CustomInput from '@/components/custom/input/index.vue';
import CustomButton from '@/components/custom/resetbutton.vue';
import { setRememberList, getRememberList } from '@/utils/remember';
import { computed, onMounted, reactive, ref } from 'vue';
import {
  MessagePlugin,
  Form as TForm,
  FormItem as TFormItem,
  FormRule,
  Checkbox as TCheckbox,
} from 'tdesign-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 remember = ref(false);
const rememberList = reactive({
  list: [],
});
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 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,
        });
        // 获取用户信息
        store.dispatch('user/UserInfo');
        router.replace({
          path: '/',
        });
        // 记住密码
        if (remember.value) {
          // 保存账号密码
          setRememberList(
            {
              account: formData.account,
              password: formData.password,
            },
            'email'
          );
        }
      }
      loading.value = false;
    } catch (e) {
      console.log(e);
      loading.value = false;
    }
  } else {
    MessagePlugin.closeAll();
    MessagePlugin.warning(firstError);
  }
};
//
const submitAccount = (item: any) => {
  formData.account = item.account;
  formData.password = item.password;
};
onMounted(() => {
  // 获取本地邮箱账号
  rememberList.list = getRememberList('email');
});
</script>

<style lang="less">
@import '@/style/flex.less';
@import '@/style/variables.less';
.custom-login {
  width: 400px;
  margin: 0 auto;
  .dj();
  flex-direction: column;
  .custom-login-title {
    font-weight: 700;
    font-size: @font-size-40;
    text-align: center;
    color: #ffffff;
  }
  .custom-login-form {
    margin-top: 40px;
    .t-form__item {
      .t-form__controls-content {
        display: inline-block;
      }
      .form-item-box {
        .label {
          font-weight: 400;
          font-size: @font-size-16;
          color: #ffffff;
          padding-bottom: 12px;
        }
        .custom-input-global {
          width: 423px;
          .cust-input {
            color: white;
          }
        }
      }
      .remember-password-box {
        .t-checkbox__input {
          background: transparent;
          border: 1px solid #848e9c;
          border-radius: 0;
        }
        .t-checkbox__label {
          color: white;
          font-weight: 300;
          font-size: @font-size-12;
        }
      }
      .t-is-checked {
        .t-checkbox__input {
          background: #00f9f9;
          border-color: transparent;
          &::after {
            border-color: black;
          }
        }
      }
    }
  }
}
</style>
