<template>
  <a-form
    ref="formRef"
    :show-label="false"
    :show-require-mark="false"
    size="large"
    :model="formInline"
    :rules="rules"
  >
    <a-form-item name="mobile">
      <a-input v-model:value="formInline.mobile" placeholder="请输入手机号码">
        <template #prefix>
          <MobileOutlined style="color: #808695; font-size: 18px" />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item name="code">
      <a-input
        @keyup.enter="handleSubmit"
        v-model:value.trim="formInline.code"
        placeholder="验证码"
      >
        <template #prefix>
          <SafetyCertificateOutlined style="color: #808695; font-size: 18px" />
        </template>
        <template #suffix>
          <a-button type="text" :disabled="isGetCode" @click="getCode">
            {{ codeMsg }}<span v-if="isGetCode">s</span>
          </a-button>
        </template>
      </a-input>
    </a-form-item>
    <a-form-item :show-label="false">
      <a-button class="w-full" type="primary" @click="handleSubmit" size="large" :loading="loading">
        登录
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import { message } from 'ant-design-vue';
  import { ResultEnum } from '@/enums/httpEnum';
  import { getInfoCaptcha } from '@/api/system/user';
  import { PageEnum } from '@/enums/pageEnum';
  import { MobileOutlined, SafetyCertificateOutlined } from '@ant-design/icons-vue';
  const captchaImg = ref('');
  // 动态加载滑块验证码组件

  /**
   * 定义表单接口
   */
  interface FormState {
    mobile: string;
    code: string;
    key: string;
  }

  /**
   * 定义参数
   */
  const formRef = ref();
  const loading = ref(false);
  const codeMsg: any = ref('获取验证码');
  const isGetCode = ref(false);
  const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;

  /**
   * 定义表单参数
   */
  const formInline = reactive({
    mobile: '',
    code: '',
    key: '',
  });

  /**
   * 定义验证规则
   */
  const rules = {
    mobile: { required: true, message: '请输入手机号码', trigger: 'blur' },
    code: { required: true, message: '请输入验证码', trigger: 'blur' },
  };

  /**
   * 获取验证码
   */
  function getCode() {
    if (!formInline.mobile) {
      formRef.value.validateFields('mobile');
      return;
    }
    codeMsg.value = 60;
    isGetCode.value = true;
    let time = setInterval(() => {
      codeMsg.value--;
      if (codeMsg.value <= 0) {
        clearInterval(time);
        codeMsg.value = '获取验证码';
        isGetCode.value = false;
      }
    }, 1000);
  }

  /**
   * 执行提交表单
   */
  const userStore = useUserStore();
  const router = useRouter();
  const route = useRoute();
  const handleSubmit = () => {
    if (!formRef.value) return;
    formRef.value.validate(async (valid) => {
      if (valid) {
        loading.value = true;

        const params: FormState = {
          mobile: formInline.mobile,
          code: formInline.code,
          key: formInline.key,
        };

        try {
          const { code, msg } = await userStore.login(params);
          if (code == ResultEnum.SUCCESS) {
            const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
            message.success('登录成功，即将进入系统');
            if (route.name === LOGIN_NAME) {
              router.replace('/');
            } else router.replace(toPath);
          } else {
            message.error(msg || '登录失败');
          }
        } finally {
          loading.value = false;
        }
      } else {
        message({
          message: '请填写完整信息',
          type: 'error',
        });
      }
    });
  };
</script>

<style lang="less" scoped>
  .forget {
    margin-bottom: 16px;
    margin-top: -10px;
  }
</style>
<style lang="less">
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color: transparent !important;
    background-image: none;
    transition: background-color 50000s ease-in-out 0s;
  }
</style>
