<template>
  <div class="user-card">
    <UserHeader />
    <UserText :user-text="userText" @back="handleBack" />
    <UserTabs v-model="activeTab" :hide-tab="hideTab" :tab-list="tabList" />

    <el-form class="user-form" ref="forgotPasswordFormRef" :model="forgotPasswordForm" :rules="forgotPasswordRules">
      <Transition name="form-switch" mode="out-in">
        <el-form-item v-if="activeTab === 'email'" key="form-email-item" prop="email">
          <el-input v-model="forgotPasswordForm.email" placeholder="请输入邮箱" clearable size="large" />
        </el-form-item>

        <el-form-item class="phone-item" prop="phone" v-else-if="activeTab === 'phone'" key="form-phone-item">
          <el-select v-model="forgotPasswordForm.countryCode" :teleported="false" value-key="code" placeholder="国家"
            size="large">
            <el-option v-for="item in countryOptions" :key="item.code" :label="item.code" :value="item.code">
              <div class="country-option">
                <span class="country-name">{{ item.name }}</span>
                <span class="country-code">{{ item.code }}</span>
              </div>
            </el-option>
          </el-select>
          <el-input v-model="forgotPasswordForm.phone" placeholder="请输入手机号" clearable size="large" />
        </el-form-item>
        <UserCaptcha v-model="forgotPasswordForm.code" v-else-if="activeTab === 'code'" key="form-code-item"
          @sendCode="handleSendCode" :show-send-button="showSendButton" :send-state="sendState" />
        <div v-else-if="activeTab === 'password'" key="form-password-group">
          <el-form-item prop="password">
            <el-input v-model="forgotPasswordForm.password" placeholder="请输入新密码" type="password" show-password clearable
              size="large" />
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input v-model="forgotPasswordForm.confirmPassword" placeholder="请确认新密码" type="password" show-password
              clearable size="large" />
          </el-form-item>
        </div>
      </Transition>
      <div class="forgot-next">
        <div :class="{ active: activeTab === 'email' || activeTab === 'phone' }"></div>
        <div :class="{ active: activeTab === 'code' }"></div>
        <div :class="{ active: activeTab === 'password' }"></div>
      </div>
      <el-form-item class="form-submit">
        <el-button type="primary" @click="handleForgotPassword">{{ activeTab === 'password' ? '去登录' : '继续'
          }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
// type类型
import type { FormInstance, FormRules } from 'element-plus'
// 组件
import UserHeader from './components/Header.vue'
import UserText from './components/Text.vue'
import UserTabs from './components/Tabs.vue'
import UserCaptcha from './components/Captcha.vue'

//公共方法/store/配置文件
import { useUserStore } from '@/stores/modules/user'
import { setStorage, getStorage, removeStorage } from '@/utils/storage'
import { md5Encrypt } from '@/utils/crypto'
import { sendCaptcha, initCaptchaState, clearCaptchaTimer } from '@/utils/sendCaptcha'

//用户校验规则
import { countryOptions } from '@/views/user/config/mock'
import { passwordRules, emailRules, phoneRules, codeRules } from './config/rules'

//用户store和router实例
const userStore = useUserStore()
const router = useRouter()

//userText 实例
const userText = ref({
  backText: '返回',
  title: '恢复密码',
  text: '请输入您注册时使用的邮箱或手机号',
  account: '',

})

//tabs实例
const tabList = ref([
  { label: '邮箱', name: 'email' },
  { label: '手机', name: 'phone' },
])
const activeTab = ref<string>('email')
const hideTab = ref<boolean>(false)

// 表单实例
const forgotPasswordFormRef = ref<FormInstance>()
const forgotPasswordForm = ref({
  email: '',
  countryCode: '+86',
  phone: '',
  password: '',
  confirmPassword: '',
  code: ''
})
const forgotPasswordRules = ref<FormRules>({
  email: emailRules().email,
  phone: phoneRules(forgotPasswordForm.value).phone,
  password: passwordRules(forgotPasswordForm.value).password,
  confirmPassword: passwordRules(forgotPasswordForm.value).confirmPassword,
  code: codeRules().code
})

// 验证码实例
const showSendButton = ref<boolean>(true)
const sendState = ref<object>({
  isCounting: false,
  countdown: 0,
})
//初始化验证码倒计时状态
const emailCaptchaState = initCaptchaState('email'); // 邮箱专属
const phoneCaptchaState = initCaptchaState('phone'); // 手机专属
// 邮箱验证码状态
const { isCounting: emailIsCounting, countdown: emailCountdown } = emailCaptchaState
// 手机验证码状态
const { isCounting: phoneIsCounting, countdown: phoneCountdown } = phoneCaptchaState

//方法


// 统一更新sendState的方法
const updateSendState = (type: string) => {
  if (type === 'email') {
    sendState.value = {
      isCounting: emailIsCounting,
      countdown: emailCountdown
    }
  } else {
    sendState.value = {
      isCounting: phoneIsCounting,
      countdown: phoneCountdown
    }
  }
}

// 监听activeTab变化，同步sendState
watch(activeTab, (newTab) => {
  if (newTab === 'email' || newTab === 'phone') {
    // 切换回邮箱/手机页时，重置sendState
    sendState.value = { isCounting: false, countdown: 0 }
  } else if (newTab === 'code') {
    // 切换到验证码页时，根据当前存储的类型更新状态
    const currentType: string = getStorage('forgotType', 'session') || 'email'
    updateSendState(currentType)
  }
})

// 定义发送验证码接口
const sendCodeApi = async () => {
  // 发送验证码参数
  const sendParams = {
    email: forgotPasswordForm.value.email,
    mobile: forgotPasswordForm.value.phone,
    reg_type: getStorage('forgotType', 'session') === 'email' ? 1 : 2,
    type:'transfer_code'
  }
  return userStore.sendCode(sendParams)
}

//发送验证码
const handleSendCode = async () => {
  // 第二步：确定类型、接收方、对应的倒计时状态和发送函数
  const type: string = getStorage('forgotType', 'session') || 'email'

  const receiver = type === 'phone' ? forgotPasswordForm.value.phone : forgotPasswordForm.value.email;
  const currentCaptchaState = type === 'phone' ? phoneCaptchaState : emailCaptchaState;
  // 第三步：调用封装的发送函数（传正确的函数，而非字符串）
  await sendCaptcha(
    type,
    receiver,
    currentCaptchaState, // 只更新当前类型的倒计时状态
    () => sendCodeApi() // 传入返回Promise的函数
  );

  //把状态同步给子组件
  updateSendState(type)
}

// 返回上一页
const handleBack = () => {
  // 从密码页返回 → 验证码页
  if (activeTab.value === 'password') {
    activeTab.value = 'code'
    userText.value = {
      ...userText.value,
      title: '双重验证',
      text: '请输入发送的验证码',
      account: getStorage('forgot', 'session') || ''
    }
    // 清空密码字段
    forgotPasswordForm.value.password = ''
    forgotPasswordForm.value.confirmPassword = ''
    forgotPasswordFormRef.value?.clearValidate(['password', 'confirmPassword'])
  }

  // 从验证码页返回 → 邮箱/手机页
  else if (activeTab.value === 'code') {
    const getForgotType: string = getStorage('forgotType', 'session') || 'email'
    activeTab.value = getForgotType
    hideTab.value = false
    userText.value = {
      ...userText.value,
      title: '恢复密码',
      text: '请输入您注册时使用的邮箱或手机号',
      account: ''
    }
    // 清空验证码字段
    forgotPasswordForm.value.code = ''
    forgotPasswordFormRef.value?.clearValidate(['code'])
  }

  // 从邮箱/手机页返回 → 重置为初始状态
  else {
    activeTab.value = 'email'
    forgotPasswordForm.value.email = ''
    forgotPasswordForm.value.phone = ''
    forgotPasswordFormRef.value?.clearValidate(['email', 'phone'])
    router.push('/user/login')
  }
}

//重置密码
const handleForgotPassword = async () => {
  if (!forgotPasswordFormRef.value) return

  try {
    const currentTab = activeTab.value;
    const getForgotType: string = getStorage('forgotType', 'session') || 'email'
    // 步骤1：校验邮箱/手机号 → 切换到验证码页
    if (currentTab === 'email' || currentTab === 'phone') {
      // 校验当前字段
      await forgotPasswordFormRef.value.validateField(currentTab)
      // 存储账号类型和值
      setStorage('forgotType', currentTab, 'session')
      setStorage('forgot', currentTab === 'email' ? forgotPasswordForm.value.email : forgotPasswordForm.value.phone, 'session')
      // 更新状态
      hideTab.value = true
      activeTab.value = 'code'
      userText.value = {
        ...userText.value,
        title: '双重验证',
        text: '请输入发送的验证码',
        account: currentTab === 'email' ? forgotPasswordForm.value.email : forgotPasswordForm.value.phone
      }
      updateSendState(getForgotType)
    }

    // 步骤2：校验验证码 → 切换到密码页
    else if (currentTab === 'code') {
      // 校验验证码
      await forgotPasswordFormRef.value.validateField(currentTab)
      // 更新状态
      activeTab.value = 'password'
      userText.value = {
        ...userText.value,
        title: '设置新密码',
        text: '请设置您的新登录密码',
        account: getStorage('forgot', 'session') || ''
      }
    }

    // 步骤3：校验密码 → 重置密码
    else if (currentTab === 'password') {
      // 校验密码+确认密码
      await forgotPasswordFormRef.value.validateField(['password', 'confirmPassword'])

      // 重置密码参数
      const getForgotType = getStorage('forgotType', 'session') || 'email'
      const forgotParams = {
        mobile: forgotPasswordForm.value.phone,
        email: forgotPasswordForm.value.email,
        reg_type: getForgotType === 'email' ? 1 : 2,
        code: forgotPasswordForm.value.code,
        login_password1: md5Encrypt(forgotPasswordForm.value.password),
        login_password2: md5Encrypt(forgotPasswordForm.value.confirmPassword),
      }

      // 调用重置密码接口
      await userStore.forgotPassword(forgotParams)

      // 清空存储和表单
      removeStorage('forgotType', 'session')
      removeStorage('forgot', 'session')
      forgotPasswordForm.value = {
        email: '',
        countryCode: '+86',
        phone: '',
        password: '',
        confirmPassword: '',
        code: ''
      }
    }
  } catch (error) {
    console.error('表单提交失败：', error)
  }
}
// 4. 组件卸载时清除定时器（关键：防止内存泄漏）
onUnmounted(() => {
  clearCaptchaTimer(emailCaptchaState);
  clearCaptchaTimer(phoneCaptchaState);
});
</script>

<style lang="scss" scoped>
.user-form {
  .phone-item {
    :deep(.el-form-item__content) {
      flex-wrap: nowrap;
    }
  }

  .forgot-next {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
    margin-top: 60px;

    div {
      position: relative;
      height: 4px;
      width: 40px;
      background: rgb(209 213 219 / var(--tw-bg-opacity, 1));
      border-radius: 999px;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0;
        background-color: var(--el-color-primary);
        transition: all 0.3s ease-out;
        border-radius: 999px;
      }

      &:nth-child(2) {
        margin: 0 10px;
      }
    }

    .active {
      &::before {
        width: 100%;
      }
    }
  }
}
</style>
