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

    <el-form class="user-form" ref="registerFormRef" :model="registerForm" :rules="registerRules">
      <Transition name="form-switch" mode="out-in">
        <el-form-item
          class="captcha-item"
          v-if="activeTab === 'email'"
          key="form-email-item"
          prop="email"
        >
          <el-input v-model="registerForm.email" placeholder="请输入邮箱" clearable size="large" />
          <el-button
            type="primary"
            class="captcha-btn"
            @click="handleSendCode"
            :disabled="emailIsCounting"
            >{{ emailIsCounting ? `${emailCountdown}s后重新获取` : '发送验证码' }}</el-button
          >
        </el-form-item>

        <el-form-item
          class="phone-item captcha-item"
          prop="phone"
          v-else-if="activeTab === 'phone'"
          key="form-phone-item"
        >
          <el-select
            v-model="registerForm.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="registerForm.phone"
            placeholder="请输入手机号"
            clearable
            size="large"
          />
          <el-button
            type="primary"
            class="captcha-btn"
            @click="handleSendCode"
            :disabled="phoneIsCounting"
            >{{ phoneIsCounting ? `${phoneCountdown}s后重新获取` : '发送验证码' }}</el-button
          >
        </el-form-item>
      </Transition>

      <UserCaptcha v-model="registerForm.code" />
      <el-form-item
        label="设置密码(6-12位密码，包含特殊符号以及大小写)"
        label-position="top"
        prop="password"
      >
        <el-input
          placeholder="请输入密码"
          clearable
          show-password
          size="large"
          type="password"
          v-model="registerForm.password"
        />
      </el-form-item>
      <el-form-item label="邀请链接/邀请码(选填)" label-position="top" prop="inviteCode">
        <el-input
          placeholder="请输入邀请链接/邀请码"
          clearable
          size="large"
          type="text"
          v-model="registerForm.inviteCode"
        />
      </el-form-item>
      <el-form-item>
        <el-checkbox label="同意注册协议"
          >我已阅读并同意 隐私条例、 退款政策、 AML＆CTF政策、<br />
          执行政策 和 网站条款和条件</el-checkbox
        >
      </el-form-item>
      <el-form-item class="form-submit">
        <el-button type="primary" class="form-btn" @click="handleRegister" :loading="buttonLoading">注册</el-button>
      </el-form-item>
      <router-link to="/user/login" class="to-login">已有账号？立即登录</router-link>
    </el-form>
  </div>
</template>

<script setup lang="ts">

defineOptions({
  name: 'Register'
})
// 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 { md5Encrypt } from '@/utils/crypto'
import { sendCaptcha, initCaptchaState, clearCaptchaTimer } from '@/utils/sendCaptcha'
import { useButtonLoading } from '@/composables/useLoading'

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

//store实例
const userStore = useUserStore()
const route = useRoute()

// 按钮 loading
const { buttonLoading, startButtonLoading, stopButtonLoading } = useButtonLoading()

// UserText 实例
const userText = ref({
  backText: '',
  title: '注册',
  text: '',
})

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

// 注册表单实例
const registerFormRef = ref<FormInstance>()
const registerForm = ref<any>({
  email: '',
  countryCode: '+86',
  phone: '',
  password: '',
  code: '',
  inviteCode: '',
})
const registerRules = ref<FormRules>({
  email: emailRules().email,
  phone: phoneRules(registerForm.value).phone,
  password: passwordRules(registerForm.value).password,
  code: codeRules().code,
})

//初始化验证码倒计时状态（添加页面前缀隔离不同页面的倒计时状态）
const emailCaptchaState = initCaptchaState('email', 60, 'register_email') // 邮箱专属
const phoneCaptchaState = initCaptchaState('phone', 60, 'register_phone') // 手机专属
// 邮箱验证码状态
const { isCounting: emailIsCounting, countdown: emailCountdown } = emailCaptchaState
// 手机验证码状态
const { isCounting: phoneIsCounting, countdown: phoneCountdown } = phoneCaptchaState

//方法

// 定义发送验证码接口
const sendCodeApi = async () => {
  // 发送验证码参数
  const sendParams = {
    email: registerForm.value.email,
    mobile: registerForm.value.countryCode + registerForm.value.phone,
    mobile_area: registerForm.value.countryCode,
    type: 'reg_code',
  }
  return userStore.sendCode(sendParams)
}
//发送验证码
const handleSendCode = async () => {
  if (!registerFormRef.value) return
  try {
    await registerFormRef.value.validateField(activeTab.value)
  } catch (error) {
    console.error('字段校验失败：', error)
    return
  }

  // 确定类型、接收方、对应的倒计时状态和发送函数
  const type: string = activeTab.value === 'phone' ? 'phone' : 'email'
  const receiver =
    type === 'phone'
      ? registerForm.value.countryCode + registerForm.value.phone
      : registerForm.value.email
  const currentCaptchaState = type === 'phone' ? phoneCaptchaState : emailCaptchaState
  const sendFunc = type === 'phone' ? 'sendPhoneCaptcha' : 'sendEmailCaptcha'
  console.log('registerForm.countryCode', registerForm.value.countryCode)
  // 调用封装的发送函数（传正确的函数，而非字符串）
  await sendCaptcha(
    type,
    receiver,
    currentCaptchaState, // 只更新当前类型的倒计时状态
    () => sendCodeApi(), // 传入返回Promise的函数
  )
}

//注册
const handleRegister = async () => {
  if (!registerFormRef.value) return
  try {
    // 提交时再次验证（显示错误提示）
    await registerFormRef.value.validate()
    // 开启 loading
    startButtonLoading()
    try {
      // 注册参数
      const registerParams = {
        email: registerForm.value.email,
        mobile_area: registerForm.value.countryCode,
        mobile: registerForm.value.countryCode + registerForm.value.phone,
        reg_type: activeTab.value === 'email' ? 1 : 2,
        invite_code: registerForm.value.inviteCode,
        code: registerForm.value.code,
        password: registerForm.value.password,
      }

      // 注册逻辑
      await userStore.register(registerParams)
    } finally {
      // 关闭 loading
      stopButtonLoading()
    }
  } catch (error) {
    console.error('表单校验失败：', error)
  }
}
// 组件卸载时清除定时器（关键：防止内存泄漏）
onUnmounted(() => {
  clearCaptchaTimer(emailCaptchaState)
  clearCaptchaTimer(phoneCaptchaState)
})

onMounted(() => {
  registerForm.value.inviteCode = route.query.invite_code || ''
})
</script>

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

    :deep(.el-select-dropdown__item) {
      padding: 0 16px 0 16px;
    }

    .el-select {
      width: 180px !important;
    }
  }

  .to-login {
    display: flex;
    justify-content: center;
    text-decoration: none;
    color: #409eff;
    margin-top: 24px;
  }
}
</style>
