<template>
  <div class="page-container">
    <div class="page-wrapper">
      <!-- 头部导航 -->
      <div class="header-bar">
        <div class="header-logo">
          <el-icon><Collection /></el-icon>
          <span>培训报名系统</span>
        </div>

      </div>

      <!-- 表单卡片 -->
      <div class="custom-card">
        <div class="page-header" style="margin-top: 0;">
          <h1 class="page-title">填写报名信息</h1>
          <p class="page-subtitle">请填写以下报名信息，带 <span style="color:#f56c6c">*</span> 为必填项</p>
        </div>

        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-position="top"
          size="large"
        >
          <!-- 基本信息 -->
          <div class="form-section">
            <div class="form-section-title">基本信息</div>
            <div class="form-row">
              <div class="form-item">
                <el-form-item label="姓名" prop="name">
                  <el-input
                    v-model="formData.name"
                    placeholder="请输入您的姓名"
                    clearable
                  >
                    <template #prefix><el-icon><User /></el-icon></template>
                  </el-input>
                </el-form-item>
              </div>
              <div class="form-item">
                <el-form-item label="职务/职称" prop="title">
                  <el-select
                    v-model="formData.title"
                    placeholder="请选择职务/职称"
                    style="width: 100%"
                  >
                    <el-option label="教授" value="教授" />
                    <el-option label="副教授" value="副教授" />
                    <el-option label="讲师" value="讲师" />
                    <el-option label="工程师" value="工程师" />
                    <el-option label="其他" value="其他" />
                  </el-select>
                </el-form-item>
              </div>
            </div>

            <div class="form-row">
              <div class="form-item">
                <el-form-item label="所在单位" prop="organization">
                  <el-input
                    v-model="formData.organization"
                    placeholder="请输入学校/企业全称"
                    clearable
                  >
                    <template #prefix><el-icon><OfficeBuilding /></el-icon></template>
                  </el-input>
                </el-form-item>
              </div>
              <div class="form-item">
                <el-form-item label="所在部门" prop="department">
                  <el-input
                    v-model="formData.department"
                    placeholder="请输入院系/部门名称"
                    clearable
                  >
                    <template #prefix><el-icon><Grid /></el-icon></template>
                  </el-input>
                </el-form-item>
              </div>
            </div>
            <div class="form-row">
              <div class="form-item">
                <el-form-item label="推荐人" prop="referrer">
                  <el-input
                    v-model="formData.referrer"
                    placeholder="请输入推荐人的姓名"
                    clearable
                  >
                    <template #prefix><el-icon><User /></el-icon></template>
                  </el-input>
                </el-form-item>
              </div>
              <div class="form-item">
                <el-form-item label="推荐人单位" prop="referrerCompany">
                  <el-input
                    v-model="formData.referrerCompany"
                    placeholder="请输入推荐人单位"
                    clearable
                  >
                    <template #prefix><el-icon><OfficeBuilding /></el-icon></template>
                  </el-input>
                </el-form-item>
              </div>
            </div>
          </div>

          <!-- 联系信息 -->
          <div class="form-section">
            <div class="form-section-title">联系信息</div>
            <div class="form-row">
              <div class="form-item">
                <el-form-item label="手机号码" prop="phone">
                  <el-input
                    v-model="formData.phone"
                    placeholder="请输入手机号码"
                    clearable
                    maxlength="11"
                  >
                    <template #prefix><el-icon><Phone /></el-icon></template>
                  </el-input>
                </el-form-item>
              </div>
              <div class="form-item">
                <el-form-item label="电子邮箱" prop="email">
                  <el-input
                    v-model="formData.email"
                    placeholder="请输入电子邮箱"
                    clearable
                  >
                    <template #prefix><el-icon><Message /></el-icon></template>
                  </el-input>
                </el-form-item>
              </div>
              <!-- <div class="form-item">
                <el-form-item label="短信验证码" prop="smsCode">
                  <el-input
                    v-model="formData.smsCode"
                    placeholder="请输入验证码"
                    clearable
                    maxlength="6"
                    style="width: 100%"
                  >
                    <template #append>
                      <el-button
                        @click="sendSmsCodeFun"
                        :disabled="smsCountdown > 0"
                        style="min-width: 100px;"
                      >
                        {{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>
              </div> -->
            </div>

            <div class="form-row">
              <div class="form-item">
                <el-form-item label="身份证号" prop="idCard">
                  <el-input
                    v-model="formData.idCard"
                    placeholder="请输入身份证号码"
                    clearable
                    maxlength="18"
                  >
                    <template #prefix><el-icon><Postcard /></el-icon></template>
                  </el-input>
                </el-form-item>
              </div>
            </div>
          </div>

          <!-- 培训信息 -->
          <div class="form-section">
            <div class="form-section-title">培训信息</div>
            <div class="form-row">
              <div class="form-item">
                <el-form-item label="报名期次" prop="periodId">
          <el-radio-group v-model="formData.periodId">
            <el-radio-button
              v-for="item in sessionOptions"
              :key="item.id"
              :value="item.id"
              :disabled="item.status === 'inactive'"
            >
              {{ formatPeriodLabel(item.periodName, item.startDate, item.endDate) }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
              </div>
            </div>

            <div class="form-row">
              <div class="form-item">
                <el-form-item label="培训费用">
                  <div class="price-tag">
                    <span class="price-amount">¥2680</span>
                    <span class="price-unit">/人</span>
                  </div>
                </el-form-item>
              </div>
            </div>

            <div class="form-row">
              <div class="form-item" style="flex: 100%;">
                <el-form-item label="备注说明" prop="remark">
                  <el-input
                    v-model="formData.remark"
                    type="textarea"
                    :rows="3"
                    placeholder="饮食禁忌、特殊需求等"
                    maxlength="200"
                    show-word-limit
                  />
                </el-form-item>
              </div>
            </div>
          </div>

          <!-- 提交按钮 -->
          <div class="form-section" style="text-align: center;">
            <el-button type="primary" size="large" class="btn-primary" @click="submitForm" :loading="submitLoading" :disabled="submitLoading" style="width: 100%; max-width: 300px;">
              <el-icon><Position /></el-icon>
              <span style="margin-left: 8px;">提交报名</span>
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { submitRegistration, sendSmsCode, getSessionList } from '../../api/registration'
import { formatPeriodLabel } from '../../utils/format'

const router = useRouter()
const formRef = ref(null)
const sessionOptions = ref([])
const smsCountdown = ref(0)
const submitLoading = ref(false)
let smsTimer = null

// 加载期次列表
const loadSessionOptions = async () => {
  try {
    const res = await getSessionList({ pageNum: 1, pageSize: 9999 })
    const list = Array.isArray(res.data) ? res.data : (res.data.records || [])
    sessionOptions.value = list
  } catch (e) {
    console.error('加载期次失败', e)
  }
}

// 表单数据
const formData = reactive({
  name: '',
  organization: '',
  department: '',
  title: '',
  referrer:'',
  referrerCompany:'',
  phone: '',
  smsCode: '',
  email: '',
  idCard: '',
  periodId: '',
  remark: ''
})

// 校验规则
const validatePhone = (rule, value, callback) => {
  const phoneReg = /^1[3-9]\d{9}$/
  if (!value) {
    callback(new Error('请输入手机号码'))
  } else if (!phoneReg.test(value)) {
    callback(new Error('请输入正确的手机号码'))
  } else {
    callback()
  }
}

const validateSmsCode = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入短信验证码'))
  } else if (!/^\d{6}$/.test(value)) {
    callback(new Error('验证码为6位数字'))
  } else {
    callback()
  }
}

const validateEmail = (rule, value, callback) => {
  const emailReg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/
  if (!value) {
    callback(new Error('请输入电子邮箱'))
  } else if (!emailReg.test(value)) {
    callback(new Error('请输入正确的邮箱地址'))
  } else {
    callback()
  }
}

const validateIdCard = (rule, value, callback) => {
  const idCardReg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/
  if (!value) {
    callback(new Error('请输入身份证号码'))
  } else if (!idCardReg.test(value)) {
    callback(new Error('请输入正确的身份证号码'))
  } else {
    callback()
  }
}

const formRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度为2-20个字符', trigger: 'blur' }
  ],
  referrer: [
    { required: true, message: '请输入推荐人姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度为2-20个字符', trigger: 'blur' }
  ],
  referrerCompany:[
    { required: true, message: '请输入推荐人单位', trigger: 'blur' }
  ],
  organization: [
    { required: true, message: '请输入所在单位', trigger: 'blur' }
  ],
  title: [
    { required: true, message: '请选择职务/职称', trigger: 'change' }
  ],
  phone: [
    { required: true, validator: validatePhone, trigger: 'blur' }
  ],
  smsCode: [
    { required: true, validator: validateSmsCode, trigger: 'blur' }
  ],
  email: [
    { required: true, validator: validateEmail, trigger: 'blur' }
  ],
  idCard: [
    { required: true, validator: validateIdCard, trigger: 'blur' }
  ],
  periodId: [
    { required: true, message: '请选择报名期次', trigger: 'change' }
  ]
}

// 发送验证码
const sendSmsCodeFun = async () => {
  if (!formData.phone) {
    ElMessage.warning('请先输入手机号码')
    return
  }
  const phoneReg = /^1[3-9]\d{9}$/
  if (!phoneReg.test(formData.phone)) {
    ElMessage.error('请输入正确的手机号码')
    return
  }

  try {
    await sendSmsCode(formData.phone)
    ElMessage.success('验证码已发送，请注意查收')
    smsCountdown.value = 60
    smsTimer = setInterval(() => {
      smsCountdown.value--
      if (smsCountdown.value <= 0) {
        clearInterval(smsTimer)
      }
    }, 1000)
  } catch (e) {
    console.error('发送验证码失败', e)
  }
}

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return

  await formRef.value.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true
      try {
        const res = await submitRegistration({
          company: formData.organization,
          department: formData.department,
          email: formData.email,
          smsCode: formData.smsCode,
          fee: 2680,
          idCard: formData.idCard,
          name: formData.name,
          referrer: formData.referrer,
          referrerCompany: formData.referrerCompany,
          periodId: formData.periodId,
          phone: formData.phone,
          remark: formData.remark,
          title: formData.title
        })

        ElMessage.success('报名信息提交成功！即将跳转至支付页面...')

        // 跳转到支付页面
        setTimeout(() => {
          router.push({
            path: '/client/payment',
            query: {
              bmId: res.data.bmId,
              name: res.data.name,
              referrer: res.data.referrer,
              referrerCompany: res.data.referrerCompany,
              company: res.data.company,
              periodId: formData.periodId
            }
          })
        }, 1000)
      } catch (e) {
        console.error('提交失败', e)
      } finally {
        submitLoading.value = false
      }
    } else {
      ElMessage.error('请检查表单填写是否正确')
      return false
    }
  })
}

// 初始化加载期次
onMounted(() => {
  loadSessionOptions()
})
</script>

<style scoped>

:deep(.el-radio-group) {
  gap: 10px;
}

:deep(.el-form-item__content){
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  
  .form-item {
    width: 100%;
  }
}
</style>
