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

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

interface FormState {
  username: string;
  password: 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' }
};
const userStore = useUserStore();

const router = useRouter();
const route = useRoute();
async function getCode() {
  if (!formInline.mobile) {
    formRef.value.validateField('mobile')
    return
  }
  await sendSms({mobile:formInline.mobile})
  codeMsg.value = 60;
  isGetCode.value = true;
  let time = setInterval(() => {
    codeMsg.value--;
    if (codeMsg.value <= 0) {
      clearInterval(time);
      codeMsg.value = '获取验证码';
      isGetCode.value = false;
    }
  }, 1000);
}
const handleSubmit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true;

      const params: FormState = {
        username: formInline.username,
        password: formInline.password,
        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);
          ElMessage.success('登录成功，即将进入系统');
          if (route.name === LOGIN_NAME) {
            router.replace('/');
          } else router.replace(toPath);
        } else {
          ElMessage.error(msg || '登录失败');
        }
      } finally {
        loading.value = false;
      }
    } else {
      ElMessage({
        message: '请填写完整信息',
        type: 'error',
      });
    }
  });
};

const getCaptcha = async () => {
  let { key, captcha } = await getInfoCaptcha();
  formInline.key = key
  captchaImg.value = captcha
}

getCaptcha()

</script>

<style lang="scss" scoped>
.forget {
  margin-bottom: 16px;
  margin-top: -10px;
}
</style>
<style lang="scss">
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>
