<template>
    <div class="login-style">
      <div class="box-vessel">

        <div class="vessel-title">重置密码</div>

        <el-form label-position="right" label-width="0" :rules="rules" :model="passwordChangeDTO" ref="formRef" :size="formSize">

          <!--邮箱-->
          <el-form-item prop="officialEmail">
            <el-input v-model="passwordChangeDTO.officialEmail" placeholder="请输入邮箱"></el-input>
          </el-form-item>

          <!--密码-->
          <el-form-item prop="password1">
            <el-input v-model="passwordChangeDTO.password1" placeholder="请输入新密码" show-password></el-input>
          </el-form-item>

          <!--再次输入密码-->
          <el-form-item prop="password2">
            <el-input v-model="passwordChangeDTO.password2" placeholder="请再次输入密码" show-password></el-input>
          </el-form-item>

          <!--输入验证码-->
            <el-form-item prop="verifyCode">
              <el-input v-model="passwordChangeDTO.verifyCode" placeholder="输入验证码">
                <template #suffix>
                  <el-button type="text" @click="sendPasswordChangeVerifyCode" :disabled="isStart">
                    {{ isStart ? countdown : '获取验证码' }}
                  </el-button>
                </template>
              </el-input>
            </el-form-item>

          <div style="display: flex; justify-content: center; align-items: center;">
            <el-button @click="changePassword(formRef)" class="login-button">重置密码</el-button>
          </div>

          <!-- 返回登录页面，下划线灰色小字 -->
          <div style="display: flex; justify-content: center; align-items: center; margin-top: 10px;">
            <router-link to="/login" style="color: #8e8e8e; text-decoration: underline;">记得密码? 前往登录</router-link>
          </div>

        </el-form>

      </div>

    </div>



  </template>

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

  const { start, isStart, countdown } = useCountdown();

  const apis = useApis()

  type PasswordChangeDTO = {
    officialEmail: "",
    password1: "",
    password2: "",
    verifyCode: ""
  }
  let passwordChangeDTO = reactive<PasswordChangeDTO>({} as PasswordChangeDTO)


  const formSize = ref<ComponentSize>('default')
  const formRef = ref<FormInstance>()
  const rules = reactive<FormRules<PasswordChangeDTO>>({
    officialEmail: [
      {
        required: true,
        message: "邮箱不能为空",
        trigger: 'blur'
      }
    ],
    password1: [
      {
        required: true,
        message: "请输入密码",
        trigger: 'blur'
      }
    ],
    password2: [
      {
        required: true,
        message: "请再次输入密码",
        trigger: 'blur'
      }
    ],
    verifyCode: [
      {
        required: true,
        message: "验证码不能为空",
        trigger: 'blur'
      }
    ]
  })



  const changePassword = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        if(passwordChangeDTO.password1 != passwordChangeDTO.password2) {
          ElMessage({message: '两次输入密码不一致', type: 'error'})
          return
        }
        let data = {
          officialEmail: passwordChangeDTO.officialEmail,
          password: passwordChangeDTO.password1,
          verifyCode: passwordChangeDTO.verifyCode
        }
        apis.updatePassword(data).then((res: any) => {
          if (res.data.code === 200) {
            ElMessage({message: '密码修改成功',type: 'success'})
            router.push(`/login`);
          } else {
            ElMessage({message: '密码修改失败' + res.data.msg, type: 'error'})
          }
        }).catch((err: any) => {
          ElMessage({message: '网络错误',type: 'error'})
          console.log(err)
        }).finally(() => {});
      } else {
        ElMessage({message: '请将信息填写完整',type: 'warning'})
      }
    })
  }

  const sendPasswordChangeVerifyCode = () => {
    start();

    apis.sendPasswordChangeVerifyCode(passwordChangeDTO.officialEmail)
    .then((res: any) => {
      if (res.data.code === 200) {
        ElMessage({message: '验证码发送成功，请前往您的邮箱查看',type: 'success'})
      } else {
        ElMessage({message: '验证码发送失败' + res.data.msg, type: 'error'})
      }
    })
    .catch((err: any) => {
      ElMessage({message: '验证码发送失败',type: 'error'})
      console.log(err)
    })
    .finally(() => {});
  }
  </script>

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