<template>
  <!-- 报名表单区域 -->
    <div class="border-b border-br pb-5">
      <span class="text-2xl font-medium">新生报名</span>
    </div>
    <el-card class="!border-none mb-4" shadow="never">
      <div class="lg:flex gap-6">
        <!-- 基本信息表单 -->
        <el-card class="!border-none flex-1" shadow="never">
          <el-form
            layout="vertical"
            :model="studentData.baseInfo"
            class="mt-4"
          >
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <el-form-item label="学生姓名">
                <el-input
                  v-model="studentData.baseInfo.name"
                  placeholder="请输入姓名"
                                  />
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group
                  v-model="studentData.baseInfo.gender"
                                  >
                  <el-radio :label="0">男</el-radio>
                  <el-radio :label="1">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="身份证号">
                <el-input
                  v-model="studentData.baseInfo.idCard"
                  placeholder="请输入18位身份证号"
                                  />
              </el-form-item>
              <el-form-item label="出生日期">
                <el-date-picker
                  v-model="studentData.baseInfo.birthday"
                  type="datetime"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  placeholder="请输入出生日期"
                                  />
              </el-form-item>
              <el-form-item label="联系方式">
                <el-input
                  v-model="studentData.baseInfo.phone"
                  placeholder="请输入手机号码"
                                  />
              </el-form-item>
              <el-form-item label="电子邮箱">
                <el-input
                  v-model="studentData.baseInfo.email"
                  placeholder="请输入电子邮箱"
                                  />
              </el-form-item>
              <el-form-item label="籍贯">
                <el-input
                  v-model="studentData.baseInfo.nativePlace"
                  placeholder="请输入籍贯"
                                  />
              </el-form-item>
              <el-form-item label="民族">
                <el-input
                  v-model="studentData.baseInfo.nationality"
                  placeholder="请输入民族"
                                  />
              </el-form-item>
              <el-form-item label="政治面貌">
                <el-select
                  v-model="studentData.baseInfo.politicalStatus"
                  clearable
                                  >
                  <el-option label="群众" :value="0" />
                  <el-option label="团员" :value="1" />
                  <el-option label="党员" :value="2" />
                  <el-option label="其他" :value="3" />
                </el-select>
              </el-form-item>
              <el-form-item label="毕业年份">
                <el-input-number
                  v-model="studentData.baseInfo.graduationYear"
                  placeholder="请输入毕业年份"
                                  />
              </el-form-item>
              <el-form-item label="毕业院校">
                <el-input
                  v-model="studentData.baseInfo.previousSchool"
                  placeholder="请输入毕业院校"
                                  />
              </el-form-item>
              <el-form-item label="学校类型">
                <el-select
                  v-model="studentData.baseInfo.schoolType"
                  clearable
                                  >
                  <el-option label="普通高中" :value="1" />
                  <el-option label="职业高中" :value="2" />
                  <el-option label="中专" :value="3" />
                  <el-option label="大专" :value="4" />
                  <el-option label="本科" :value="5" />
                  <el-option label="其他" :value="6" />
                </el-select>
              </el-form-item>
              <el-form-item
                label="家庭住址"
                class="md:col-span-2"
              >
                <el-input
                  v-model="studentData.baseInfo.homeAddress"
                  placeholder="请输入详细家庭住址"
                  type="textarea"
                  :rows="3"
                                  />
              </el-form-item>
              <el-form-item label="紧急联系人">
                <el-input
                  v-model="studentData.baseInfo.emergencyContact"
                  placeholder="请输入紧急联系人姓名"
                                  />
              </el-form-item>
              <el-form-item label="紧急联系电话">
                <el-input
                  v-model="studentData.baseInfo.emergencyPhone"
                  placeholder="请输入紧急联系人电话"
                                  />
              </el-form-item>
              <el-form-item label="与紧急联系人关系">
                <el-input
                  v-model="studentData.baseInfo.relationship"
                  placeholder="请输入与紧急联系人的关系"
                                  />
              </el-form-item>
            </div>
          </el-form>
        </el-card>
      </div>
    </el-card>
    <!-- 提交按钮 -->
    <el-card class="!border-none mb-4 flex-1" shadow="never">
      <div  class="mt-6">
        <el-button
          class="ml-4"
          type="primary"
          block
          @click="handleConfirmSubmit"
        >
          提交报名
        </el-button>
      </div>
    </el-card>
</template>


<script lang="ts" setup>
import { reactive } from 'vue'
import { ElButton, ElMessage, ElForm, ElFormItem, ElInput } from 'element-plus'
import {
  submitEnrollmentInfo
} from '@/api/enrollment'

// 学生信息数据
const studentData = reactive({
  baseInfo: {
    name: '',
    gender: 0,
    idCard: '',
    birthday: '',
    nationality: '',
    phone: '',
    email: '',
    homeAddress: '',
    nativePlace: '',
    invitationCode: '',
    politicalStatus: 0,
    previousSchool: '',
    schoolType: '',
    graduationYear: 2025,
    emergencyContact: '',
    emergencyPhone: '',
    relationship: ''
  }
})

// 确认提交
const handleConfirmSubmit = async () => {
  try {
    // 提交前校验身份证号
    if (!/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(studentData.baseInfo.idCard)) {
      ElMessage.warning('请输入有效的18位身份证号')
      return
    }
    await submitEnrollmentInfo(studentData.baseInfo)
    ElMessage.success('报名提交成功')
  } catch (error) {
    ElMessage.error('报名提交失败，请稍后重试')
    console.error('提交报名信息失败：', error)
  }
}

</script>
<style lang="scss" scoped>
.el-dialog__body {
  padding: 20px;
}
.el-form-item {
  margin-bottom: 20px;
}
.el-tabs {
  margin-bottom: 20px;
}
</style>
