<!--
  Description: 登录组件，登录界面的登录输入框
  Author: BaiQi
  Created Date: 2024-6-28
-->
<template>
  <div class="login-style">
    <div class="box-vessel">
      <div class="vessel-title">
        {{ isCode ? '邮箱登录' : '账号登录' }}
      </div>
      <el-form
          :model="data"
          :rules="rules"
          ref="form"
          label-width="0"
      >
        <el-form-item :prop="isCode ? 'email' : 'officialNumber'">
          <el-input
              v-model="data.officialNumber"
              :placeholder="isCode ? '请输入邮箱' : '请输入账号'"
          />
        </el-form-item>
        <el-form-item :prop="isCode ? 'code' : 'password'">
          <template v-if="isCode">
            <el-input
                v-model="data.code"
                placeholder="请输入验证码"
            >
              <template #suffix>
                <el-button type="text" @click="sendLoginVerifyCode" :disabled="isStart">
                  {{ isStart ? countdown : '获取验证码' }}
                </el-button>
              </template>
            </el-input>
          </template>
          <template v-else>
            <el-input
                v-model="data.password"
                placeholder="请输入密码"
                show-password
            />
          </template>
        </el-form-item>
        <div class="forget" @click="toPasswordChange">忘记密码？</div>
        <el-form-item>
          <el-button class="login-button" @click="handleLogin(form)">用户登录</el-button>
        </el-form-item>
        <div class="sign" @click="onClickSign">注册账号</div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, defineProps } from 'vue';
  import { useStore } from '@/store';
  import useApis from '@/apis';
  import router from "@/router";
  import { useCountdown } from '@/hooks/useCountdown';
  import "./index.scss"
  import { ElMessage, type FormInstance, type FormRules } from 'element-plus';


  interface LoginProps {
    // 是否是手机号登录
    isCode?: boolean
    // 获取验证码
    onCode?: () => void
    // 提交
    onSubmit?: (data: { password: string, username: string }) => void
  }

  const props = defineProps({
    isCode: {
      type: Boolean,
      default: false,
    },
    onCode: {
      type: Function,
      default: null,
    },
    onSubmit: {
      type: Function,
      default: null,
    },
  });

  const store = useStore();
  const apis = useApis();
  const { start, isStart, countdown } = useCountdown();

  const data = reactive({
    officialNumber: '',
    password: '',
    code: '',
  });

  const form = ref<FormInstance>()
  const rules = reactive({
    officialNumber: [
      { required: true, message: props.isCode ? '邮箱不能为空' : '账号不能为空', trigger: 'blur' },
    ],
    password: [
      { required: true, message: props.isCode ? '验证码不能为空' : '密码不能为空', trigger: 'blur' },
    ],
  });
 
  const sendLoginVerifyCode = () => {
    start();
    props.onCode?.();
    
    apis.sendLoginVerifyCode(data.officialNumber)
    .then((res: any) => {
      if (res.data.code === 200) {
        ElMessage({message: '验证码发送成功，请前往您的邮箱查看', type: 'success'})
      } else {
        ElMessage({message: '验证码发送失败',type: 'error'})
        console.log(res.data.msg)
      }
    })
    .catch((err: any) => {
      ElMessage({message: '验证码发送失败',type: 'error'})
      console.log(err)
    })
    .finally(() => {});
  };

  let assignmentId = ref(1)
  const handleLogin = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        if(!props.isCode) {
          login()
        } else {
          loginByEmail()
        }
      } else {
        ElMessage({message: '请将信息填写完整',type: 'warning'})
      }
    })
  };

  const login = () => {
    apis.login({
      officialNumber: data.officialNumber,
      password: data.password
    }).then((_res:any) => {
      const data = _res.data.data
      if (_res.data.code === 200) {
        store.setUser(data);
        store.setToken(data?.token)
        localStorage.setItem('Authorization', data?.token);
        localStorage.setItem('User', JSON.stringify(data));
        router.push(`/home`).then(() => {
          window.location.reload();
        });
      } else if(_res.data.code === 400){
        ElMessage({message: '用户名或密码错误', type: 'error'})
      }
    }).catch((_err:any) => {
      ElMessage({message: '网络错误', type: 'error'})
      console.log("登陆失败", _err)
    })    
  }

  const loginByEmail = () => {
    apis.loginByEmail({
      officialEmail: data.officialNumber,
      verifyCode: data.code
    }).then((_res:any) => {
      const data = _res.data.data
      if (_res.data.code === 200) {
        store.setUser(data);
        store.setToken(data?.token)
        localStorage.setItem('Authorization', data?.token);
        localStorage.setItem('User', JSON.stringify(data));
        router.push(`/home`).then(() => {
          window.location.reload();
        });
      } else if(_res.data.code === 400){
        ElMessage({message: '邮箱或验证码错误' + _res.data.msg, type: 'error'})
      }
    }).catch((_err:any) => {
      ElMessage({message: '网络错误', type: 'error'})
      console.log("登陆失败", _err)
    })    
  } 

  const onClickSign = () => {
    router.push('/register');
  };

  const toPasswordChange = () => {
    router.push('/passwordChange');
  }

</script>

<script lang="ts">
export default {
  name: "Login"
}
</script>
