<script setup>
import { computed } from 'vue';
import { chinaRegions } from '@/data/china-regions';
import { specialtyCatalog, specialtyTypesFor } from '@/data/specialties';
const props = defineProps({ form: { type: Object, required: true }, schools: { type: Array, default: () => [] }, classes: { type: Array, default: () => [] } });
const specialtyTypes = computed(() => specialtyTypesFor(props.form.specialtyCategory));
const cities = computed(() => chinaRegions.find(item => item.code === props.form.provinceCode)?.cities || []);
const districts = computed(() => cities.value.find(item => item.code === props.form.cityCode)?.districts || []);
function resetSpecialtyType() { props.form.specialtyType = ''; }
function resetCity() { props.form.cityCode = ''; props.form.districtCode = ''; }
function resetDistrict() { props.form.districtCode = ''; }
</script>

<template>
  <div class="profile-fields">
    <h2>身份信息</h2>
    <div class="form-grid">
      <label><span>考生姓名 *</span><input v-model="form.name" required></label>
      <label><span>性别 *</span><select v-model="form.gender" required><option value="">请选择</option><option>男</option><option>女</option></select></label>
      <label><span>证件号码 *</span><input v-model="form.idNumber" required></label>
      <label><span>出生日期</span><input v-model="form.birthDate" type="date"></label>
      <label><span>籍贯 *</span><input v-model="form.nativePlace" required></label>
      <label><span>民族</span><input v-model="form.ethnicity"></label>
    </div>
    <h2>学校与班级</h2>
    <div class="form-grid">
      <label><span>就读学校 *</span><select v-model="form.schoolId" required @change="form.classId = ''"><option value="">请选择</option><option v-for="school in schools" :key="school.id" :value="school.id">{{ school.name }}</option></select></label>
      <label><span>班级 *</span><select v-model="form.classId" required><option value="">请选择</option><option v-for="item in classes" :key="item.id" :value="item.id">{{ item.name }}</option></select></label>
    </div>
    <h2>家庭与联系信息</h2>
    <div class="form-grid">
      <label><span>所在省份 *</span><select v-model="form.provinceCode" required @change="resetCity"><option value="">请选择</option><option v-for="item in chinaRegions" :key="item.code" :value="item.code">{{ item.name }}</option></select></label>
      <label><span>所在城市 *</span><select v-model="form.cityCode" required :disabled="!form.provinceCode" @change="resetDistrict"><option value="">请选择</option><option v-for="item in cities" :key="item.code" :value="item.code">{{ item.name }}</option></select></label>
      <label><span>所在区县 *</span><select v-model="form.districtCode" required :disabled="!form.cityCode"><option value="">请选择</option><option v-for="item in districts" :key="item.code" :value="item.code">{{ item.name }}</option></select></label>
      <label><span>手机号 *</span><input v-model="form.phone" required></label>
      <label><span>电子邮箱 *</span><input v-model="form.email" type="email" required></label>
      <label class="wide"><span>家庭住址 *</span><input v-model="form.address" required></label>
      <label><span>邮政编码</span><input v-model="form.postalCode"></label>
      <label><span>监护人姓名</span><input v-model="form.guardianName"></label>
      <label><span>监护人电话</span><input v-model="form.guardianPhone"></label>
      <label><span>紧急联系人</span><input v-model="form.emergencyContact"></label>
      <label><span>紧急联系电话</span><input v-model="form.emergencyPhone"></label>
    </div>
    <h2>招生资格</h2>
    <div class="form-grid">
      <label><span>特长生大类</span><select v-model="form.specialtyCategory" @change="resetSpecialtyType"><option value="">无特长资格</option><option v-for="item in specialtyCatalog" :key="item.code" :value="item.code">{{ item.name }}</option></select></label>
      <label><span>特长项目</span><select v-model="form.specialtyType" :disabled="!form.specialtyCategory"><option value="">请选择</option><option v-for="item in specialtyTypes" :key="item[0]" :value="item[0]">{{ item[1] }}</option></select></label>
      <label><span>特长证明编号</span><input v-model="form.specialtyCertificate"></label>
      <label class="wide"><span>政策资格说明</span><input v-model="form.policyEligibility"></label>
    </div>
  </div>
</template>
