<template>
  <div class="form-container">
    <div class="title-box">
      <span class="span1">{{ $t('login.SignIn') }}</span>
    </div>
    <div class="Forgot-box" @click="findPwd">{{ $t('login.forgot') }}</div>
    <t-form
      class="login-form"
      ref="form"
      :data="formData"
      :rules="formRules"
      label-width="0"
      @submit="onSubmit"
    >
      <t-form-item name="email">
        <t-input
          autocomplte="on"
          name="username"
          v-model="formData.email"
          size="large"
          :placeholder="$t('login.placeholderEmail')"
        >
          <template #prefix-icon>
            <t-icon name="mail" />
          </template>
        </t-input>
      </t-form-item>
      <t-form-item name="password">
        <t-input
          v-model="formData.password"
          size="large"
          :type="showPsw ? 'text' : 'password'"
          clearable
          autocomplte="on"
          name="current-password"
          :placeholder="$t('login.placeholderPassword')"
        >
          <template #prefix-icon>
            <t-icon name="lock-on" />
          </template>
          <template #suffix-icon>
            <t-icon
              :name="showPsw ? 'browse' : 'browse-off'"
              @click="showPsw = !showPsw"
            />
          </template>
        </t-input>
      </t-form-item>
      <t-form-item name="submit">
        <t-button
          block
          size="large"
          type="submit"
          class="custom_button_back_border"
        >
          {{ $t('login.loginBtn') }}
        </t-button>
      </t-form-item>
      <div class="go-find">
        <div class="register">
          {{ $t('login.noAccount') }}
          <span class="link" @click="goRegister">{{
            $t('login.goRegister')
          }}</span>
        </div>
      </div>
    </t-form>
  </div>
</template>

<script setup lang="ts">
import { LoadingPlugin, MessagePlugin } from 'tdesign-vue-next';
import md5 from 'md5';
import request from '@/utils/request';

const emit = defineEmits(['registerSuccess', 'go']);
// 用户token
const userToken = useUserToken();
interface FormData {
  email: string;
  password?: string;
}
const formData = ref<FormData>({
  email: '',
  password: '',
});
const Cookie = useCookie('userCookie');
const formRules = computed(() => {
  let rules = {
    email: [
      { required: true, message: 'email required', type: 'error' },
      { email: true, message: 'email error', type: 'error' },
    ],
    password: [
      { required: true, message: 'password required', type: 'error' },
      // { min: 6, message: '至少需要6位', type: 'error' },
    ],
  };
  return rules;
});

const showPsw = ref(false);
const form = ref(null);
const router = useRouter();

const onSubmit = async ({ validateResult }) => {
  if (validateResult === true) {
    let params: FormData = {
      email: formData.value.email,
    };
    params.password = md5(formData.value.password);
    LoadingPlugin(true);
    let data: any;
    try {
      data = await request.post('/api/auth/login', params);
      userToken.value = data.data.access_token;
      // 再存到cookie中
      Cookie.value = data.data.access_token;
      LoadingPlugin(false);
      MessagePlugin.success('success');
      router.push({
        path: '/',
      });
    } catch (e) {
      LoadingPlugin(false);
      MessagePlugin.warning(data.msg ?? '登录失败');
    }
  }
};
const findPwd = () => {
  emit('go', 'reset');
};
const goRegister = () => {
  emit('go', 'register');
};
</script>
<style lang="less" scoped>
@import '@/style/flex.less';
.form-container {
  .title-box {
    width: 70%;
    .span1 {
      font-size: 38px;
      font-weight: bold;
      display: block;
    }
  }
  .Forgot-box {
    float: right;
    color: var(--td--main-btn-color-1);
    cursor: pointer;
  }
}
.login-form {
  margin-top: 32px;
}
.go-find {
  margin-top: 32px;
  .find {
    font-size: 14px;
    color: var(--td-text-color-secondary);
    line-height: 20px;
    cursor: pointer;
  }
  .register {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: var(--td-text-color-placeholder);
    line-height: 20px;
    .link {
      color: var(--td-brand-color);
      cursor: pointer;
    }
  }
}
</style>
