<template>
  <div>
    <div v-loading="loading_login" class="card" style="margin-top: 10px">
      <NGradientText f-c-c size="18" style="padding: 10px" type="warning">登录账号</NGradientText>
      <div class="card-line"></div>
      <NForm
        ref="formRef"
        :model="fromdata"
        :rules="rules"
        label-align="right"
        label-placement="left"
        label-width="auto"
        style="padding: 24px 10px 10px">
        <NFormItem label="账号" path="userName">
          <NInput v-model:value="fromdata.userName" placeholder="请输入手机号/车牌号" />
        </NFormItem>
        <NFormItem label="密码" path="passWold">
          <NInput v-model:value="fromdata.passWold" placeholder="请输入密码" type="password" />
        </NFormItem>
        <NFormItem label="验证码" path="captcha">
          <div style="display: flex; width: 100%">
            <NInput
              v-model:value="fromdata.captcha"
              placeholder="请输入验证码"
              style="flex-grow: 1; border-bottom-right-radius: 0; border-top-right-radius: 0" />
            <img
              :src="cpaimg"
              b-r
              height="34"
              style="border-bottom-right-radius: 3px; border-top-right-radius: 3px"
              width="85"
              @click="captchas" />
          </div>
        </NFormItem>
        <NFormItem label=" ">
          <NCheckbox v-model:checked="userStore.userDataRemberData.renb">记住我</NCheckbox>
        </NFormItem>
      </NForm>
      <div f-c-c>
        <NText style="padding-right: 5px">我还没有账号</NText>
        <RouterLink to="/user/register">前往注册</RouterLink>
      </div>
      <div class="card-line" style="margin-top: 24px"></div>
      <div style="padding: 10px">
        <NButton secondary strong style="width: 100%" type="info" @click="regis">登录</NButton>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { type FormInst, type FormItemRule } from 'naive-ui';
import { onMounted, reactive, ref } from 'vue';
import message from '@/utils/message.ts';
import { captcha, login } from '@/apis/auth';
import { UserStore } from '@/plugins';
import UseApiLoading from '@/utils/UseApiLoading.ts';

const formRef = ref<FormInst | null>(null);
const cpaimg = ref('');

const userStore = UserStore();

const fromdata = reactive({
  passWold: '',
  userName: '',
  captcha: '',
  uuid: '',
});

onMounted(() => {
  if (userStore.userDataRemberData.renb) {
    fromdata.userName = userStore.userDataRemberData.user;
    fromdata.passWold = userStore.userDataRemberData.pass;
  }
  captchas();
});

const [[loading_login], logins] = UseApiLoading(login);

const regis = () => {
  formRef.value?.validate((errors: any) => {
    if (!errors) {
      logins(fromdata)
        .then((a) => {
          userStore.ishaslogin = true;
          userStore.token = a.json().Data;
          if (userStore.userDataRemberData.renb) {
            userStore.userDataRemberData.user = fromdata.userName;
            userStore.userDataRemberData.pass = fromdata.passWold;
          }
          window.location.replace('/');
        })
        .catch(() => {
          captchas();
          fromdata.captcha = '';
        });
    } else {
      message.error('请确认 填写信息是否正确');
    }
  });
};
const captchas = () => {
  captcha().then((a) => {
    fromdata.uuid = a.json().Data.uuid;
    cpaimg.value = a.json().Data.captcha;
  });
};

const rules = {
  userName: {
    key: 'userName',
    required: true,
    message: '请输入用户名',
    trigger: ['input'],
  },
  passWold: {
    key: 'passWold',
    required: true,
    message: '请输入密码',
    trigger: ['input'],
  },
  captcha: {
    key: 'captcha',
    required: true,
    message: '验证码格式不正确 4位数字',
    trigger: ['input'],
    validator(rule: FormItemRule, value: string) {
      const a = RegExp('^\\d{4}$').test(value);
      console.log(a);
      return a;
    },
  },
};
</script>
<style lang="scss" scoped></style>
