<template>
  <div class="register-page">
    <div class="page-header">
      <el-button text @click="handleBack">← 返回</el-button>
      <h1>{{ pageTitle }}</h1>
    </div>

    <!-- 录入方式选择器 -->
    <div v-if="step <= 1 || inputMode !== 'form'" class="input-mode-selector">
      <div
        v-for="m in inputModes"
        :key="m.value"
        :class="['mode-card', inputMode === m.value && 'active']"
        @click="inputMode = m.value as 'form' | 'excel' | 'ocr' | 'pdf'; step = 1"
      >
        <img :src="m.iconSrc" class="mode-icon-img" />
        <span class="mode-label">{{ m.label }}</span>
        <span class="mode-desc">{{ m.desc }}</span>
      </div>
    </div>

    <!-- ============ 表单填写模式 ============ -->
    <template v-if="inputMode === 'form'">
      <!-- 步骤1：选择产品 -->
      <div v-if="step === 1" class="product-select-page">

        <!-- 常用产品快捷入口 -->
        <div class="quick-access">
          <div class="qa-label">常用产品</div>
          <div class="qa-chips">
            <div
              v-for="p in quickProducts"
              :key="p.type"
              class="qa-chip"
              :style="{ '--chip-color': p.color }"
              @click="selectProduct(p)"
            >
              <el-icon class="qa-icon"><component :is="iconMap[p.elIcon]" /></el-icon>
              <span class="qa-name">{{ p.shortName }}</span>
            </div>
          </div>
        </div>

        <!-- 四系列主布局 -->
        <div class="series-layout">
          <div
            v-for="cat in productCategories"
            :key="cat.key"
            class="series-col"
          >
            <!-- 系列大头卡 -->
            <div class="series-header" :style="{ background: cat.gradient }">
              <div class="sh-icon">{{ cat.icon }}</div>
              <div class="sh-info">
                <div class="sh-name">{{ cat.name }}</div>
                <div class="sh-count">{{ cat.products.length }} 个产品</div>
              </div>
            </div>
            <!-- 产品列表 -->
            <div class="series-products">
              <div
                v-for="p in cat.products"
                :key="p.type"
                class="sp-card"
                :style="{ '--accent': cat.accent }"
                @click="selectProduct(p)"
              >
                <div class="sp-top">
                  <el-icon class="sp-icon"><component :is="iconMap[p.elIcon]" /></el-icon>
                  <span class="sp-name">{{ p.name }}</span>
                </div>
                <div class="sp-desc">{{ p.desc }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 步骤2：填写申请单 -->
      <div v-if="step === 2">

        <!-- 患者搜索复用区 -->
        <div class="patient-search-bar">
          <div class="ps-label">
            <span class="ps-icon">👤</span>
            <span>患者档案</span>
          </div>
          <el-autocomplete
            v-model="patientSearchText"
            :fetch-suggestions="queryPatients"
            placeholder="输入患者姓名/手机号 — 已有档案自动带入历史信息"
            style="width: 380px"
            value-key="name"
            @select="onPatientSelected"
            clearable
            @clear="clearPatient"
          >
            <template #default="{ item }">
              <div class="patient-suggestion">
                <div class="ps-name">{{ item.name }}</div>
                <div class="ps-meta">
                  {{ item.hospitalName }} · 上次：{{ item.lastProductType }} {{ item.lastOrderDate }}
                  <el-tag size="small" type="info" style="margin-left:6px">{{ item.orderIds.length }}次检测</el-tag>
                </div>
              </div>
            </template>
            <template #suffix>
              <el-icon v-if="!selectedPatient" style="color:#aaa"><Search /></el-icon>
              <el-icon v-else style="color:#67c23a"><CircleCheckFilled /></el-icon>
            </template>
          </el-autocomplete>
          <el-tag v-if="selectedPatient" type="success" effect="light" size="large">
            ✓ 已关联患者档案，历史信息已带入
          </el-tag>
          <el-tag v-else type="info" effect="plain" size="large">
            新患者 · 提交后自动建档
          </el-tag>
        </div>

        <!-- 历史档案卡（关联后显示） -->
        <div v-if="selectedPatient" class="patient-history-card">
          <div class="phc-header">
            <span class="phc-name">{{ selectedPatient.name }}</span>
            <span class="phc-meta">{{ selectedPatient.hospitalName }} · {{ selectedPatient.phone }}</span>
            <el-tag size="small" type="warning" v-if="selectedPatient.orderIds.length > 1">
              {{ selectedPatient.orderIds.length }} 次检测记录
            </el-tag>
          </div>
          <div class="phc-body">
            <div v-if="selectedPatient.disease" class="phc-item">
              <span class="phc-key">遗传背景</span>
              <span class="phc-val">{{ selectedPatient.disease }} · {{ selectedPatient.gene }} · {{ selectedPatient.inheritMode }}</span>
            </div>
            <div v-if="selectedPatient.knownVariant" class="phc-item">
              <span class="phc-key">已知变异</span>
              <span class="phc-val phc-mono">{{ selectedPatient.knownVariant }}</span>
            </div>
            <div v-if="selectedPatient.femaleAge" class="phc-item">
              <span class="phc-key">年龄信息</span>
              <span class="phc-val">女方 {{ selectedPatient.femaleAge }} 岁<span v-if="selectedPatient.maleAge"> · 男方 {{ selectedPatient.maleAge }} 岁</span></span>
            </div>
            <div v-if="selectedPatient.hpoTerms?.length" class="phc-item">
              <span class="phc-key">HPO表型</span>
              <span class="phc-val"><el-tag v-for="t in selectedPatient.hpoTerms" :key="t" size="small" style="margin-right:4px">{{ t }}</el-tag></span>
            </div>
          </div>
          <div class="phc-hint">以上信息已自动填入表单，可根据本次情况修改</div>
        </div>

        <el-form ref="formRef" :model="form" label-width="120px" class="order-form">
          <!-- 通用信息 -->
          <div class="form-section">
            <div class="section-title">📋 基本信息</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="送检单位" prop="hospitalName" :rules="[{required:true,message:'请选择'}]">
                  <el-select v-model="form.hospitalName" filterable allow-create placeholder="选择或输入机构名称" style="width:100%">
                    <el-option v-for="h in hospitals" :key="h" :label="h" :value="h" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="送检医生" prop="submitter" :rules="[{required:true,message:'请填写'}]">
                  <el-input v-model="form.submitter" placeholder="医生姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="phone" :rules="[{required:true,message:'请填写'}]">
                  <el-input v-model="form.phone" placeholder="手机号码" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="送检日期" prop="submitDate" :rules="[{required:true,message:'请选择'}]">
                  <el-date-picker v-model="form.submitDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width:100%" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否加急">
                  <el-radio-group v-model="form.urgency">
                    <el-radio :label="false">否</el-radio>
                    <el-radio :label="true">是（加急）</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col v-if="form.urgency" :span="12">
                <el-form-item label="加急原因" :rules="[{required:true,message:'请填写'}]">
                  <el-input v-model="form.urgencyReason" placeholder="请说明加急原因" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="特殊需求">
                  <el-input v-model="form.specialNeeds" type="textarea" :rows="2" placeholder="如有特殊要求请在此说明" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 产品专属字段 -->
          <div class="form-section">
            <div class="section-title">🔬 检测信息（{{ selectedProduct?.name }}）</div>

            <!-- ===== 孕前系列 ===== -->
            <!-- ECS / ECS-Pro -->
            <template v-if="['ECS','ECS-Pro'].includes(selectedProduct?.type || '')">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="检测对象">
                    <el-radio-group v-model="form.ecsTarget">
                      <el-radio label="女方">女方</el-radio>
                      <el-radio label="男方">男方</el-radio>
                      <el-radio label="双方">双方</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="姓名" :rules="[{required:true,message:'请填写'}]">
                    <el-input v-model="form.patientName" placeholder="患者姓名" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="年龄">
                    <el-input-number v-model="form.femaleAge" :min="18" :max="60" style="width:100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="身份证号">
                    <el-input v-model="form.idCard" placeholder="18位身份证" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否孕前">
                    <el-radio-group v-model="form.isPregnant">
                      <el-radio label="孕前筛查">孕前筛查</el-radio>
                      <el-radio label="已怀孕">已怀孕（孕周：</el-radio>
                    </el-radio-group>
                    <el-input-number v-if="form.isPregnant === '已怀孕'" v-model="form.gestWeeks" :min="1" :max="42" size="small" style="width:80px;margin-left:4px" />
                    <span v-if="form.isPregnant === '已怀孕'" style="font-size:12px;color:#888">周）</span>
                  </el-form-item>
                </el-col>
                <el-col v-if="selectedProduct?.type === 'ECS-Pro'" :span="24">
                  <el-form-item label="检测范围">
                    <el-checkbox-group v-model="form.ecsPanels">
                      <el-checkbox label="SMA">脊髓性肌萎缩症(SMA)</el-checkbox>
                      <el-checkbox label="CF">囊性纤维化(CF)</el-checkbox>
                      <el-checkbox label="DMD">杜氏肌营养不良(DMD)</el-checkbox>
                      <el-checkbox label="全套168">全套168基因</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>

            <!-- AZF / Y-Poly -->
            <template v-if="['AZF','Y-Poly'].includes(selectedProduct?.type || '')">
              <el-row :gutter="20">
                <el-col :span="12"><el-form-item label="患者姓名" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.patientName" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="年龄"><el-input-number v-model="form.femaleAge" :min="18" :max="70" style="width:100%" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="婚后不育年限"><el-input-number v-model="form.infertileYears" :min="0" :max="20" style="width:100%" /></el-form-item></el-col>
                <el-col :span="12">
                  <el-form-item label="精液参数">
                    <el-row :gutter="8">
                      <el-col :span="12"><el-input v-model="form.spermConc" placeholder="精子浓度(10⁶/mL)" /></el-col>
                      <el-col :span="12"><el-input v-model="form.spermMotility" placeholder="前向运动率%" /></el-col>
                    </el-row>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="染色体核型">
                    <el-radio-group v-model="form.karyotype">
                      <el-radio label="未检查">未检查</el-radio>
                      <el-radio label="正常46,XY">正常46,XY</el-radio>
                      <el-radio label="异常">异常（请注明）</el-radio>
                    </el-radio-group>
                    <el-input v-if="form.karyotype === '异常'" v-model="form.karyotypeDetail" size="small" placeholder="核型描述" style="margin-top:6px" />
                  </el-form-item>
                </el-col>
                <el-col :span="12"><el-form-item label="既往检查结果"><el-input v-model="form.priorTest" placeholder="如：FSH、LH、睾酮等" /></el-form-item></el-col>
              </el-row>
            </template>

            <!-- ===== 胚胎植入前系列 ===== -->
            <!-- PGT-M -->
            <template v-if="selectedProduct?.type === 'PGT-M'">
              <el-row :gutter="20">
                <el-col :span="12"><el-form-item label="女方姓名" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.patientName" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="女方年龄"><el-input-number v-model="form.femaleAge" :min="18" :max="60" style="width:100%" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="男方年龄"><el-input-number v-model="form.maleAge" :min="18" :max="70" style="width:100%" /></el-form-item></el-col>
                <el-col :span="12"><el-form-item label="检测疾病" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.disease" placeholder="如：脊髓性肌萎缩症(SMA)" /></el-form-item></el-col>
                <el-col :span="12">
                  <el-form-item label="致病基因" :rules="[{required:true,message:'请填写'}]">
                    <el-input v-model="form.gene" placeholder="如：SMN1" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="基因状态">
                    <el-select v-model="form.geneStatus" style="width:100%">
                      <el-option label="新基因（需建立家系）" value="new" />
                      <el-option label="已有引物（复检）" value="existing" />
                      <el-option label="转录本更新" value="transcript" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col v-if="form.geneStatus === 'existing'" :span="12">
                  <el-form-item label="既往申请单号"><el-input v-model="form.priorOrderNo" placeholder="如：JB2025110001" /></el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="遗传模式">
                    <el-select v-model="form.inheritMode" style="width:100%">
                      <el-option label="常染色体隐性遗传" value="常染色体隐性遗传" />
                      <el-option label="常染色体显性遗传" value="常染色体显性遗传" />
                      <el-option label="X连锁隐性遗传" value="X连锁隐性遗传" />
                      <el-option label="X连锁显性遗传" value="X连锁显性遗传" />
                      <el-option label="线粒体遗传" value="线粒体遗传" />
                      <el-option label="多基因遗传" value="多基因遗传" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="已知变异">
                    <el-input v-model="form.knownVariant" placeholder="如：c.840+3G>T / del exon 7-8" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="子代情况">
                    <el-select v-model="form.childStatus" style="width:100%">
                      <el-option label="无患病子代" value="无" />
                      <el-option label="有患病子代（先证者在世）" value="有先证者在世" />
                      <el-option label="有患病子代（先证者已故）" value="有先证者已故" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="HPO表型术语">
                    <el-select v-model="form.hpoTerms" multiple filterable allow-create placeholder="输入HPO编号/疾病名" style="width:100%">
                      <el-option label="HP:0000118 表型异常" value="HP:0000118" />
                      <el-option label="HP:0001250 癫痫发作" value="HP:0001250" />
                      <el-option label="HP:0001263 发育迟缓" value="HP:0001263" />
                      <el-option label="HP:0000750 语言发育迟缓" value="HP:0000750" />
                      <el-option label="HP:0002011 肌张力减低" value="HP:0002011" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="妊娠方式">
                    <el-radio-group v-model="form.pregnancyMode">
                      <el-radio label="IVF">IVF</el-radio>
                      <el-radio label="FET">FET</el-radio>
                      <el-radio label="自然妊娠">自然妊娠</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="6"><el-form-item label="活检胚胎数"><el-input-number v-model="form.embryoCount" :min="1" :max="20" style="width:100%" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="IVF周期次数"><el-input-number v-model="form.ivfCycles" :min="1" :max="10" style="width:100%" /></el-form-item></el-col>
                <el-col :span="24">
                  <el-form-item label="检测项目">
                    <el-checkbox-group v-model="form.checkItems">
                      <el-checkbox label="PGT-M-snp">PGT-M（SNP单体型）</el-checkbox>
                      <el-checkbox label="PGT-SR-snp">PGT-SR（结构重排）</el-checkbox>
                      <el-checkbox label="PGT-A">PGT-A（联合染色体检测）</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>

            <!-- PGT-A / PGT-A-4M / PGT-MA -->
            <template v-if="['PGT-A','PGT-A-4M','PGT-MA'].includes(selectedProduct?.type || '')">
              <el-row :gutter="20">
                <el-col :span="12"><el-form-item label="女方姓名" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.patientName" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="女方年龄" :rules="[{required:true,message:'请填写'}]"><el-input-number v-model="form.femaleAge" :min="18" :max="60" style="width:100%" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="男方年龄"><el-input-number v-model="form.maleAge" :min="18" :max="70" style="width:100%" /></el-form-item></el-col>
                <el-col :span="12">
                  <el-form-item label="指征">
                    <el-checkbox-group v-model="form.indications">
                      <el-checkbox label="高龄">高龄（≥35岁）</el-checkbox>
                      <el-checkbox label="复发性流产">复发性流产</el-checkbox>
                      <el-checkbox label="反复种植失败">反复种植失败</el-checkbox>
                      <el-checkbox label="严重男性因素">严重男性因素</el-checkbox>
                      <el-checkbox label="前次染色体异常妊娠">前次染色体异常妊娠</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col :span="6"><el-form-item label="活检胚胎数"><el-input-number v-model="form.embryoCount" :min="1" :max="30" style="width:100%" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="活检日期"><el-date-picker v-model="form.biopsyDate" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item></el-col>
                <el-col v-if="selectedProduct?.type === 'PGT-MA'" :span="24">
                  <el-alert title="PGT-M+A联合：请同时填写以下单基因病信息" type="info" show-icon :closable="false" style="margin-bottom:12px" />
                  <el-row :gutter="20">
                    <el-col :span="12"><el-form-item label="检测疾病"><el-input v-model="form.disease" placeholder="单基因病名称" /></el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="致病基因"><el-input v-model="form.gene" /></el-form-item></el-col>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="检测芯片">
                    <el-radio-group v-model="form.chipType">
                      <el-radio label="1M">1M芯片（标准）</el-radio>
                      <el-radio label="4M">4M芯片（高分辨率，可检测5Mb以上片段）</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>

            <!-- PGT-SR -->
            <template v-if="selectedProduct?.type === 'PGT-SR'">
              <el-row :gutter="20">
                <el-col :span="12"><el-form-item label="女方姓名" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.patientName" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="女方年龄"><el-input-number v-model="form.femaleAge" :min="18" :max="60" style="width:100%" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="男方年龄"><el-input-number v-model="form.maleAge" :min="18" :max="70" style="width:100%" /></el-form-item></el-col>
                <el-col :span="12">
                  <el-form-item label="携带方">
                    <el-radio-group v-model="form.srCarrier">
                      <el-radio label="女方">女方</el-radio>
                      <el-radio label="男方">男方</el-radio>
                      <el-radio label="双方">双方</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12"><el-form-item label="染色体核型"><el-input v-model="form.karyotype" placeholder="如：46,XX,t(3;7)(p21;q22)" /></el-form-item></el-col>
                <el-col :span="12">
                  <el-form-item label="重排类型">
                    <el-select v-model="form.srType" style="width:100%">
                      <el-option label="相互易位" value="相互易位" />
                      <el-option label="罗伯逊易位" value="罗伯逊易位" />
                      <el-option label="倒位" value="倒位" />
                      <el-option label="其他" value="其他" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6"><el-form-item label="活检胚胎数"><el-input-number v-model="form.embryoCount" :min="1" :max="20" style="width:100%" /></el-form-item></el-col>
              </el-row>
            </template>

            <!-- PGT-HLA -->
            <template v-if="selectedProduct?.type === 'PGT-HLA'">
              <el-row :gutter="20">
                <el-col :span="12"><el-form-item label="女方姓名" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.patientName" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="女方年龄"><el-input-number v-model="form.femaleAge" :min="18" :max="60" style="width:100%" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="活检胚胎数"><el-input-number v-model="form.embryoCount" :min="1" :max="20" style="width:100%" /></el-form-item></el-col>
                <el-col :span="12"><el-form-item label="患病同胞姓名"><el-input v-model="form.siblingName" placeholder="需要配型的患病同胞" /></el-form-item></el-col>
                <el-col :span="12"><el-form-item label="同胞疾病"><el-input v-model="form.disease" placeholder="如：地中海贫血、范可尼贫血" /></el-form-item></el-col>
                <el-col :span="12"><el-form-item label="是否联合PGT-M"><el-radio-group v-model="form.withPGTM"><el-radio :label="true">是</el-radio><el-radio :label="false">否</el-radio></el-radio-group></el-form-item></el-col>
              </el-row>
            </template>

            <!-- Array-PGT -->
            <template v-if="selectedProduct?.type === 'Array-PGT'">
              <el-row :gutter="20">
                <el-col :span="12"><el-form-item label="女方姓名" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.patientName" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="女方年龄"><el-input-number v-model="form.femaleAge" :min="18" :max="60" style="width:100%" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="活检胚胎数"><el-input-number v-model="form.embryoCount" :min="1" :max="20" style="width:100%" /></el-form-item></el-col>
                <el-col :span="24">
                  <el-form-item label="检测平台">
                    <el-radio-group v-model="form.arrayPlatform">
                      <el-radio label="Illumina-GSA">Illumina GSA芯片</el-radio>
                      <el-radio label="Agilent">Agilent aCGH</el-radio>
                      <el-radio label="Affymetrix">Affymetrix SNP Array</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>

            <!-- ===== 产前系列 ===== -->
            <!-- NIPT / NIPT-Plus -->
            <template v-if="['NIPT','NIPT-Plus'].includes(selectedProduct?.type || '')">
              <el-row :gutter="20">
                <el-col :span="12"><el-form-item label="孕妇姓名" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.patientName" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="孕妇年龄"><el-input-number v-model="form.femaleAge" :min="16" :max="55" style="width:100%" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="孕周" :rules="[{required:true,message:'请填写'}]"><el-input-number v-model="form.gestWeeks" :min="12" :max="26" style="width:100%" /><span style="font-size:12px;color:#888;margin-left:4px">周</span></el-form-item></el-col>
                <el-col :span="12">
                  <el-form-item label="妊娠方式">
                    <el-radio-group v-model="form.conceptionMode">
                      <el-radio label="自然妊娠">自然妊娠</el-radio>
                      <el-radio label="IVF">辅助生殖</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="胎儿数目">
                    <el-radio-group v-model="form.fetusCount">
                      <el-radio :label="1">单胎</el-radio>
                      <el-radio :label="2">双胎</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="高危因素">
                    <el-checkbox-group v-model="form.riskFactors">
                      <el-checkbox label="高龄">高龄</el-checkbox>
                      <el-checkbox label="唐筛高风险">唐筛高风险</el-checkbox>
                      <el-checkbox label="超声异常">超声异常</el-checkbox>
                      <el-checkbox label="染色体病史">染色体病史</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="末次月经">
                    <el-date-picker v-model="form.lmpDate" type="date" value-format="YYYY-MM-DD" placeholder="末次月经日期" style="width:100%" />
                  </el-form-item>
                </el-col>
                <el-col v-if="selectedProduct?.type === 'NIPT-Plus'" :span="24">
                  <el-form-item label="NIPT-Plus检测范围">
                    <el-checkbox-group v-model="form.niptPlusScope">
                      <el-checkbox label="全染色体">全染色体（22+XY）</el-checkbox>
                      <el-checkbox label="微缺失">微缺失综合征</el-checkbox>
                      <el-checkbox label="单基因">单基因病（De Novo）</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>

            <!-- CNV-Prenatal / Karyotype -->
            <template v-if="['CNV-Prenatal','Karyotype'].includes(selectedProduct?.type || '')">
              <el-row :gutter="20">
                <el-col :span="12"><el-form-item label="孕妇姓名" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.patientName" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="孕妇年龄"><el-input-number v-model="form.femaleAge" :min="16" :max="55" style="width:100%" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="孕周"><el-input-number v-model="form.gestWeeks" :min="16" :max="28" style="width:100%" /></el-form-item></el-col>
                <el-col :span="12">
                  <el-form-item label="样本类型">
                    <el-radio-group v-model="form.prenatalSampleType">
                      <el-radio label="羊水">羊水（孕16-22周）</el-radio>
                      <el-radio label="绒毛">绒毛（孕10-14周）</el-radio>
                      <el-radio label="脐带血">脐带血</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="穿刺日期">
                    <el-date-picker v-model="form.punctureDate" type="date" value-format="YYYY-MM-DD" style="width:100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="24"><el-form-item label="穿刺指征"><el-input v-model="form.punctureReason" type="textarea" :rows="2" placeholder="B超提示/唐筛高风险/染色体病史等" /></el-form-item></el-col>
              </el-row>
            </template>

            <!-- WES-Prenatal / WGS-Prenatal / Array-CGH -->
            <template v-if="['WES-Prenatal','WGS-Prenatal','Array-CGH'].includes(selectedProduct?.type || '')">
              <el-row :gutter="20">
                <el-col :span="12"><el-form-item label="孕妇姓名" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.patientName" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="孕妇年龄"><el-input-number v-model="form.femaleAge" :min="16" :max="55" style="width:100%" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="孕周"><el-input-number v-model="form.gestWeeks" :min="16" :max="36" style="width:100%" /></el-form-item></el-col>
                <el-col :span="12">
                  <el-form-item label="胎儿样本">
                    <el-radio-group v-model="form.prenatalSampleType">
                      <el-radio label="羊水">羊水细胞</el-radio>
                      <el-radio label="绒毛">绒毛</el-radio>
                      <el-radio label="脐带血">脐带血</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否需要父母对照">
                    <el-radio-group v-model="form.withParents">
                      <el-radio :label="true">是（需要双亲外周血）</el-radio>
                      <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24"><el-form-item label="胎儿超声异常"><el-input v-model="form.fetalUS" type="textarea" :rows="2" placeholder="B超检查异常发现描述" /></el-form-item></el-col>
                <el-col :span="24"><el-form-item label="家族遗传史"><el-input v-model="form.familyHistory" type="textarea" :rows="2" placeholder="相关家族遗传疾病史" /></el-form-item></el-col>
              </el-row>
            </template>

            <!-- ===== 遗传诊断系列 ===== -->
            <!-- WES / WGS -->
            <template v-if="['WES','WGS'].includes(selectedProduct?.type || '')">
              <el-row :gutter="20">
                <el-col :span="12"><el-form-item label="先证者姓名" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.patientName" /></el-form-item></el-col>
                <el-col :span="6">
                  <el-form-item label="性别">
                    <el-radio-group v-model="form.gender">
                      <el-radio label="男">男</el-radio>
                      <el-radio label="女">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="6"><el-form-item label="年龄"><el-input-number v-model="form.femaleAge" :min="0" :max="100" style="width:100%" /></el-form-item></el-col>
                <el-col :span="12">
                  <el-form-item label="检测策略">
                    <el-select v-model="form.wesStrategy" style="width:100%">
                      <el-option label="先证者单人" value="solo" />
                      <el-option label="先证者+双亲（Trio）" value="trio" />
                      <el-option label="家系分析（Quad+）" value="family" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="测序深度">
                    <el-select v-model="form.seqDepth" style="width:100%">
                      <el-option label="100×（标准）" value="100x" />
                      <el-option label="150×（高深度）" value="150x" />
                      <el-option label="200×（超高深度）" value="200x" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24"><el-form-item label="临床表现"><el-input v-model="form.clinicalFeature" type="textarea" :rows="2" placeholder="主要临床症状和体征" /></el-form-item></el-col>
                <el-col :span="24"><el-form-item label="家族史"><el-input v-model="form.familyHistory" type="textarea" :rows="2" placeholder="家族遗传病史" /></el-form-item></el-col>
                <el-col :span="24">
                  <el-form-item label="HPO表型术语">
                    <el-select v-model="form.hpoTerms" multiple filterable allow-create placeholder="搜索并添加HPO术语" style="width:100%">
                      <el-option label="HP:0000118 表型异常" value="HP:0000118" />
                      <el-option label="HP:0001250 癫痫发作" value="HP:0001250" />
                      <el-option label="HP:0001263 发育迟缓" value="HP:0001263" />
                      <el-option label="HP:0000750 语言发育迟缓" value="HP:0000750" />
                      <el-option label="HP:0001324 肌无力" value="HP:0001324" />
                      <el-option label="HP:0002119 脑室扩大" value="HP:0002119" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>

            <!-- BRCA -->
            <template v-if="selectedProduct?.type === 'BRCA'">
              <el-row :gutter="20">
                <el-col :span="12"><el-form-item label="患者姓名" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.patientName" /></el-form-item></el-col>
                <el-col :span="6">
                  <el-form-item label="性别">
                    <el-radio-group v-model="form.gender">
                      <el-radio label="女">女</el-radio>
                      <el-radio label="男">男</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="6"><el-form-item label="年龄"><el-input-number v-model="form.femaleAge" :min="18" :max="90" style="width:100%" /></el-form-item></el-col>
                <el-col :span="12">
                  <el-form-item label="诊断情况">
                    <el-checkbox-group v-model="form.brcaDiagnosis">
                      <el-checkbox label="乳腺癌">乳腺癌</el-checkbox>
                      <el-checkbox label="卵巢癌">卵巢癌</el-checkbox>
                      <el-checkbox label="未发病（家族史）">未发病（家族史）</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="检测基因">
                    <el-checkbox-group v-model="form.brcaGenes">
                      <el-checkbox label="BRCA1">BRCA1</el-checkbox>
                      <el-checkbox label="BRCA2">BRCA2</el-checkbox>
                      <el-checkbox label="PALB2">PALB2</el-checkbox>
                      <el-checkbox label="ATM">ATM</el-checkbox>
                      <el-checkbox label="全套HRR">全套HRR基因</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24"><el-form-item label="家族癌症史"><el-input v-model="form.familyHistory" type="textarea" :rows="2" placeholder="家族中乳腺癌、卵巢癌等病史" /></el-form-item></el-col>
              </el-row>
            </template>

            <!-- Panel -->
            <template v-if="selectedProduct?.type === 'Panel'">
              <el-row :gutter="20">
                <el-col :span="12"><el-form-item label="患者姓名" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.patientName" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="年龄"><el-input-number v-model="form.femaleAge" :min="0" :max="100" style="width:100%" /></el-form-item></el-col>
                <el-col :span="6">
                  <el-form-item label="性别">
                    <el-radio-group v-model="form.gender"><el-radio label="男">男</el-radio><el-radio label="女">女</el-radio></el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="疾病方向">
                    <el-select v-model="form.panelCategory" filterable style="width:100%">
                      <el-option label="遗传性心肌病Panel" value="cardiomyopathy" />
                      <el-option label="遗传性耳聋Panel" value="hearing" />
                      <el-option label="遗传性眼病Panel" value="eye" />
                      <el-option label="遗传性神经肌肉病Panel" value="neuro" />
                      <el-option label="遗传性肾病Panel" value="kidney" />
                      <el-option label="遗传性骨骼病Panel" value="bone" />
                      <el-option label="遗传代谢病Panel" value="metabolism" />
                      <el-option label="免疫缺陷Panel" value="immunodeficiency" />
                      <el-option label="自定义Panel" value="custom" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24"><el-form-item label="临床表现"><el-input v-model="form.clinicalFeature" type="textarea" :rows="2" /></el-form-item></el-col>
              </el-row>
            </template>

            <!-- CNV-seq / CMA -->
            <template v-if="['CNV-seq','CMA'].includes(selectedProduct?.type || '')">
              <el-row :gutter="20">
                <el-col :span="12"><el-form-item label="患者姓名" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.patientName" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="年龄"><el-input-number v-model="form.femaleAge" :min="0" :max="100" style="width:100%" /></el-form-item></el-col>
                <el-col :span="6">
                  <el-form-item label="性别">
                    <el-radio-group v-model="form.gender"><el-radio label="男">男</el-radio><el-radio label="女">女</el-radio></el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24"><el-form-item label="临床表现"><el-input v-model="form.clinicalFeature" type="textarea" :rows="2" placeholder="主要表型：智力障碍/生长迟缓/多发畸形等" /></el-form-item></el-col>
                <el-col :span="24"><el-form-item label="既往核型结果"><el-input v-model="form.karyotype" placeholder="如已有核型分析结果请填写" /></el-form-item></el-col>
              </el-row>
            </template>

            <!-- Methylation -->
            <template v-if="selectedProduct?.type === 'Methylation'">
              <el-row :gutter="20">
                <el-col :span="12"><el-form-item label="患者姓名" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.patientName" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="年龄"><el-input-number v-model="form.femaleAge" :min="0" :max="100" style="width:100%" /></el-form-item></el-col>
                <el-col :span="12">
                  <el-form-item label="检测类型">
                    <el-select v-model="form.methylationType" style="width:100%">
                      <el-option label="Prader-Willi/Angelman综合征" value="PWS-AS" />
                      <el-option label="Silver-Russell综合征" value="SRS" />
                      <el-option label="Beckwith-Wiedemann综合征" value="BWS" />
                      <el-option label="全基因组甲基化" value="WGBS" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24"><el-form-item label="临床表现"><el-input v-model="form.clinicalFeature" type="textarea" :rows="2" /></el-form-item></el-col>
              </el-row>
            </template>

            <!-- GTV -->
            <template v-if="selectedProduct?.type === 'GTV'">
              <el-row :gutter="20">
                <el-col :span="12"><el-form-item label="患者姓名" :rules="[{required:true,message:'请填写'}]"><el-input v-model="form.patientName" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="年龄"><el-input-number v-model="form.femaleAge" :min="0" :max="100" style="width:100%" /></el-form-item></el-col>
                <el-col :span="6">
                  <el-form-item label="性别">
                    <el-radio-group v-model="form.gender"><el-radio label="男">男</el-radio><el-radio label="女">女</el-radio></el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12"><el-form-item label="致病基因"><el-input v-model="form.gene" placeholder="基因名" /></el-form-item></el-col>
                <el-col :span="12"><el-form-item label="已知变异位点"><el-input v-model="form.knownVariant" placeholder="如：c.840+3G>T / NM_000071.2:c.331C>T" /></el-form-item></el-col>
                <el-col :span="12"><el-form-item label="原申请单"><el-input v-model="form.priorOrderNo" placeholder="原始检测申请单号" /></el-form-item></el-col>
                <el-col :span="12">
                  <el-form-item label="验证对象">
                    <el-select v-model="form.gtvTarget" style="width:100%">
                      <el-option label="家系成员验证" value="family" />
                      <el-option label="治疗前后对比" value="treatment" />
                      <el-option label="独立验证" value="independent" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </div>

          <!-- 样本信息 -->
          <div class="form-section">
            <div class="section-title">🧬 样本信息</div>
            <div v-for="(sample, idx) in form.samples" :key="idx" class="sample-row">
              <div class="sample-num">样本 {{ idx + 1 }}</div>
              <el-row :gutter="10" style="flex:1">
                <el-col :span="4"><el-input v-model="sample.sampleNo" placeholder="样本编号" size="small" /></el-col>
                <el-col :span="5">
                  <el-select v-model="sample.sampleType" placeholder="样本类型" size="small" style="width:100%">
                    <el-option label="外周血" value="外周血" />
                    <el-option label="活检样本" value="活检样本" />
                    <el-option label="唾液" value="唾液" />
                    <el-option label="口腔拭子" value="口腔拭子" />
                    <el-option label="羊水" value="羊水" />
                    <el-option label="绒毛" value="绒毛" />
                    <el-option label="脐带血" value="脐带血" />
                    <el-option label="骨髓" value="骨髓" />
                    <el-option label="石蜡切片" value="石蜡切片" />
                  </el-select>
                </el-col>
                <el-col :span="5">
                  <el-select v-model="sample.relation" placeholder="亲缘关系" size="small" style="width:100%">
                    <el-option label="先证者/患者" value="先证者" />
                    <el-option label="女方" value="女方" />
                    <el-option label="男方" value="男方" />
                    <el-option v-for="n in 12" :key="n" :label="'胚胎'+n" :value="'胚胎'+n" />
                    <el-option label="父亲" value="父亲" />
                    <el-option label="母亲" value="母亲" />
                    <el-option label="同胞" value="同胞" />
                    <el-option label="胎儿" value="胎儿" />
                  </el-select>
                </el-col>
                <el-col :span="5"><el-input v-model="sample.barcode" placeholder="样本条码" size="small" /></el-col>
                <el-col :span="4">
                  <el-date-picker v-model="sample.samplingDate" type="date" value-format="YYYY-MM-DD" placeholder="采样日期" size="small" style="width:100%" />
                </el-col>
                <el-col :span="1">
                  <el-button size="small" type="danger" plain circle @click="removeSample(idx)" :disabled="form.samples.length <= 1">×</el-button>
                </el-col>
              </el-row>
            </div>
            <el-button size="small" @click="addSample" style="margin-top:8px">+ 添加样本</el-button>
          </div>

          <!-- 报告邮寄信息 -->
          <div class="form-section">
            <div class="section-title">📮 报告接收信息</div>
            <el-row :gutter="20">
              <el-col :span="12"><el-form-item label="报告接收人"><el-input v-model="form.reportRecipient" placeholder="姓名" /></el-form-item></el-col>
              <el-col :span="12"><el-form-item label="接收电话"><el-input v-model="form.reportPhone" placeholder="手机号码" /></el-form-item></el-col>
              <el-col :span="12"><el-form-item label="接收邮箱"><el-input v-model="form.reportEmail" placeholder="报告电子版发送邮箱" /></el-form-item></el-col>
              <el-col :span="12"><el-form-item label="纸质报告邮寄"><el-input v-model="form.reportAddress" placeholder="邮寄地址（如需纸质报告）" /></el-form-item></el-col>
            </el-row>
          </div>

          <!-- 底部操作 -->
          <div class="form-actions">
            <el-button @click="saveDraft">保存草稿</el-button>
            <el-button type="primary" @click="submitOrder" :loading="submitting">确认无误，提交申请单</el-button>
          </div>
        </el-form>
      </div>
    </template>

    <!-- ============ Excel导入模式 ============ -->
    <template v-if="inputMode === 'excel'">
      <div class="tab-card">
        <div class="excel-guide">
          <div class="guide-title">Excel批量导入申请单</div>
          <el-steps :active="excelStep" finish-status="success" simple style="margin-bottom:24px">
            <el-step title="下载模板" />
            <el-step title="填写数据" />
            <el-step title="上传验证" />
            <el-step title="确认提交" />
          </el-steps>

          <!-- Step 1 - 下载模板 -->
          <div v-if="excelStep === 0" class="excel-step">
            <div class="step-desc">请选择检测类型，下载对应Excel申请模板，按模板格式填写后上传。</div>
            <div class="template-list">
              <div v-for="tpl in excelTemplates" :key="tpl.type" class="template-item" @click="downloadTemplate(tpl)">
                <div class="tpl-icon">📋</div>
                <div class="tpl-info">
                  <div class="tpl-name">{{ tpl.name }}</div>
                  <div class="tpl-desc">{{ tpl.fields }}个字段 · {{ tpl.sampleDesc }}</div>
                </div>
                <el-button size="small" type="primary" plain>下载</el-button>
              </div>
            </div>
            <div class="step-actions">
              <el-button type="primary" @click="excelStep = 2">我已填好，去上传</el-button>
            </div>
          </div>

          <!-- Step 3 - 上传验证 -->
          <div v-if="excelStep === 2" class="excel-step">
            <el-upload
              class="excel-uploader"
              drag
              accept=".xlsx,.xls,.csv"
              :auto-upload="false"
              :on-change="handleExcelFile"
            >
              <div class="upload-icon">📂</div>
              <div class="upload-text">拖拽 Excel / CSV 文件到此处，或 <em>点击上传</em></div>
              <div class="upload-hint">支持 .xlsx / .xls / .csv 格式，文件大小不超过 10MB</div>
            </el-upload>

            <div v-if="excelPreview.length > 0" class="excel-preview">
              <div class="preview-header">
                <span class="preview-title">预览数据（共 {{ excelPreview.length }} 行）</span>
                <el-button size="small" text type="primary" @click="excelPreview = []">清除</el-button>
              </div>
              <el-table :data="excelPreview" border size="small" max-height="320">
                <el-table-column v-for="col in excelColumns" :key="col" :label="col" :prop="col" min-width="100" show-overflow-tooltip />
                <el-table-column label="验证" width="80">
                  <template #default="{ row }">
                    <el-tag v-if="row._valid" type="success" size="small">✓</el-tag>
                    <el-tooltip v-else :content="row._error" placement="top">
                      <el-tag type="danger" size="small">✗ 错误</el-tag>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
              <div class="preview-stats">
                <el-tag type="success">有效：{{ excelPreview.filter(r => r._valid).length }} 行</el-tag>
                <el-tag type="danger">错误：{{ excelPreview.filter(r => !r._valid).length }} 行</el-tag>
              </div>
            </div>

            <div class="step-actions">
              <el-button @click="excelStep = 0">返回重选模板</el-button>
              <el-button type="primary" :disabled="excelPreview.filter(r => r._valid).length === 0" @click="excelStep = 3">验证通过，下一步</el-button>
            </div>
          </div>

          <!-- Step 4 - 确认提交 -->
          <div v-if="excelStep === 3" class="excel-step">
            <el-result icon="success" :title="`即将批量提交 ${excelPreview.filter(r => r._valid).length} 条申请单`" sub-title="请确认以下信息后提交">
              <template #extra>
                <el-button type="primary" :loading="submitting" @click="submitExcelBatch">确认批量提交</el-button>
                <el-button @click="excelStep = 2">返回修改</el-button>
              </template>
            </el-result>
          </div>
        </div>
      </div>
    </template>

    <!-- ============ OCR图片识别模式 ============ -->
    <template v-if="inputMode === 'ocr'">
      <div class="tab-card">
        <div class="guide-title">图片智能识别 · 自动填写申请单</div>
        <div class="ocr-area">
          <el-upload
            class="ocr-uploader"
            drag
            accept="image/*"
            :auto-upload="false"
            :on-change="handleOCRImage"
          >
            <div class="upload-icon">📷</div>
            <div class="upload-text">上传申请单图片，AI自动识别并填写表单</div>
            <div class="upload-hint">支持 JPG / PNG / BMP，建议图片清晰度 ≥ 300dpi</div>
          </el-upload>

          <div v-if="ocrProcessing" class="ocr-processing">
            <el-icon class="spin"><Loading /></el-icon>
            <span>AI 正在识别文字，请稍候...</span>
          </div>

          <div v-if="ocrResult" class="ocr-result">
            <el-alert title="识别完成！已自动填入以下字段，请核对后提交" type="success" show-icon :closable="false" style="margin-bottom:16px" />
            <el-descriptions :column="2" border size="small">
              <el-descriptions-item v-for="(v, k) in ocrResult" :key="k" :label="String(k)">{{ v }}</el-descriptions-item>
            </el-descriptions>
            <div class="step-actions" style="margin-top:16px">
              <el-button @click="ocrResult = null">重新识别</el-button>
              <el-button type="primary" @click="applyOCRResult">使用识别结果，切换表单填写</el-button>
            </div>
          </div>
        </div>
      </div>
    </template>

    <!-- ============ PDF解析模式 ============ -->
    <template v-if="inputMode === 'pdf'">
      <div class="tab-card">
        <div class="guide-title">PDF申请单解析 · 自动提取字段</div>
        <div class="ocr-area">
          <el-upload
            class="ocr-uploader"
            drag
            accept=".pdf"
            :auto-upload="false"
            :on-change="handlePDFFile"
          >
            <div class="upload-icon">📄</div>
            <div class="upload-text">上传 PDF 格式的申请单，系统自动提取关键信息</div>
            <div class="upload-hint">支持文字可选取的 PDF，手写PDF请改用图片识别</div>
          </el-upload>

          <div v-if="pdfProcessing" class="ocr-processing">
            <el-icon class="spin"><Loading /></el-icon>
            <span>正在解析 PDF，提取字段中...</span>
          </div>

          <div v-if="pdfResult" class="ocr-result">
            <el-alert title="解析完成！请核对并确认以下提取的字段" type="success" show-icon :closable="false" style="margin-bottom:16px" />
            <el-descriptions :column="2" border size="small">
              <el-descriptions-item v-for="(v, k) in pdfResult" :key="k" :label="String(k)">{{ v }}</el-descriptions-item>
            </el-descriptions>
            <div class="step-actions" style="margin-top:16px">
              <el-button @click="pdfResult = null">重新上传</el-button>
              <el-button type="primary" @click="applyPDFResult">使用提取结果，切换表单填写</el-button>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { usePGXStore, type ProductType, type Patient } from '@/stores/pgx'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Search, ZoomIn, Minus, DataLine,
  Connection, Histogram, TrendCharts, Sort, Link, Flag, Grid,
  User, Star, View, DataAnalysis, Compass,
  Medal, Collection, Cpu, Aim, CircleCheck,
} from '@element-plus/icons-vue'

const iconMap: Record<string, unknown> = {
  Search, ZoomIn, Minus, DataLine,
  Connection, Histogram, TrendCharts, Sort, Link, Flag, Grid,
  User, Star, View, DataAnalysis, Compass,
  Medal, Collection, Cpu, Aim, CircleCheck,
}

const pgxStore = usePGXStore()
const router = useRouter()

const step = ref(1)
const submitting = ref(false)
const formRef = ref()
const inputMode = ref<'form' | 'excel' | 'ocr' | 'pdf'>('form')

// 患者搜索
const patientSearchText = ref('')
const selectedPatient = ref<Patient | null>(null)

function queryPatients(query: string, cb: (results: Patient[]) => void) {
  cb(pgxStore.searchPatients(query))
}

function onPatientSelected(patient: Patient | Record<string, any>) {
  patient = patient as Patient
  selectedPatient.value = patient
  // 自动填入患者档案中的所有已有信息
  form.value.patientName = patient.name
  form.value.phone = patient.phone || form.value.phone
  form.value.hospitalName = patient.hospitalName || form.value.hospitalName
  if (patient.femaleAge) form.value.femaleAge = patient.femaleAge
  if (patient.maleAge) form.value.maleAge = patient.maleAge
  if (patient.disease) form.value.disease = patient.disease
  if (patient.gene) form.value.gene = patient.gene
  if (patient.inheritMode) form.value.inheritMode = patient.inheritMode
  if (patient.knownVariant) form.value.knownVariant = patient.knownVariant
  if (patient.childStatus) form.value.childStatus = patient.childStatus
  if (patient.hpoTerms?.length) form.value.hpoTerms = [...patient.hpoTerms]
  ElMessage.success(`已关联「${patient.name}」的档案，历史信息已自动填入`)
}

function clearPatient() {
  selectedPatient.value = null
  patientSearchText.value = ''
}

const inputModes = [
  { value: 'form', iconSrc: '/bianji.svg', label: '表单填写', desc: '逐字段手动填写' },
  { value: 'excel', iconSrc: '/excel_icon.svg', label: 'Excel导入', desc: '批量上传表格数据' },
  { value: 'ocr', iconSrc: '/jpg_icon.svg', label: '图片识别', desc: '拍照/扫描自动识别' },
  { value: 'pdf', iconSrc: '/pdf_icon.svg', label: 'PDF解析', desc: '上传申请单PDF' },
]

const pageTitle = computed(() => {
  if (inputMode.value === 'excel') return '信息登记 · Excel批量导入'
  if (inputMode.value === 'ocr') return '信息登记 · 图片识别'
  if (inputMode.value === 'pdf') return '信息登记 · PDF解析'
  if (step.value === 1) return '信息登记 · 选择检测项目'
  return `信息登记 · 填写申请单（${selectedProduct.value?.name}）`
})

interface Product { type: ProductType; name: string; desc: string; icon: string }

const productCategories = [
  {
    key: 'preconception',
    name: '孕前系列',
    icon: '🧬',
    gradient: 'linear-gradient(135deg, #6DC02A 0%, #52A01E 100%)',
    accent: '#6DC02A',
    products: [
      { type: 'ECS' as ProductType, name: 'ECS-168 携带者筛查', shortName: 'ECS-168', desc: '168基因孕前携带者遗传病筛查', elIcon: 'Search', color: '#6DC02A' },
      { type: 'ECS-Pro' as ProductType, name: 'ECS-Pro 扩展筛查', shortName: 'ECS-Pro', desc: '扩展至400+隐性遗传病携带者筛查', elIcon: 'ZoomIn', color: '#6DC02A' },
      { type: 'AZF' as ProductType, name: 'Y染色体AZF微缺失', shortName: 'AZF', desc: '男性不育AZF区域缺失及精子发生基因', elIcon: 'Minus', color: '#6DC02A' },
      { type: 'Y-Poly' as ProductType, name: 'Y染色体多态性分析', shortName: 'Y多态', desc: 'Y染色体多态性及男性不育相关检测', elIcon: 'DataLine', color: '#6DC02A' },
    ]
  },
  {
    key: 'pgt',
    name: '胚胎植入前系列',
    icon: '🫀',
    gradient: 'linear-gradient(135deg, #00B5C8 0%, #0096A8 100%)',
    accent: '#00B5C8',
    products: [
      { type: 'PGT-M' as ProductType, name: 'PGT-M 单基因病', shortName: 'PGT-M', desc: '家系单体型分析，筛查单基因遗传病胚胎', elIcon: 'Connection', color: '#00B5C8' },
      { type: 'PGT-A' as ProductType, name: 'PGT-A 非整倍体 1M', shortName: 'PGT-A 1M', desc: '1M芯片，全染色体拷贝数分析', elIcon: 'Histogram', color: '#00B5C8' },
      { type: 'PGT-A-4M' as ProductType, name: 'PGT-A 非整倍体 4M', shortName: 'PGT-A 4M', desc: '4M芯片，高分辨率，检测5Mb+片段', elIcon: 'TrendCharts', color: '#00B5C8' },
      { type: 'PGT-SR' as ProductType, name: 'PGT-SR 染色体结构重排', shortName: 'PGT-SR', desc: '平衡易位/倒位携带者胚胎染色体筛查', elIcon: 'Sort', color: '#00B5C8' },
      { type: 'PGT-MA' as ProductType, name: 'PGT-M+A 联合检测', shortName: 'PGT-M+A', desc: '单基因病 + 非整倍体双重筛查', elIcon: 'Link', color: '#00B5C8' },
      { type: 'PGT-HLA' as ProductType, name: 'PGT-HLA 配型检测', shortName: 'PGT-HLA', desc: 'HLA配型，为患病同胞筛选相合供者', elIcon: 'Flag', color: '#00B5C8' },
      { type: 'Array-PGT' as ProductType, name: 'Array-PGT 微阵列', shortName: 'Array-PGT', desc: 'aCGH/SNP芯片胚胎染色体检测', elIcon: 'Grid', color: '#00B5C8' },
    ]
  },
  {
    key: 'prenatal',
    name: '产前系列',
    icon: '🤱',
    gradient: 'linear-gradient(135deg, #00A07D 0%, #007D5F 100%)',
    accent: '#00A07D',
    products: [
      { type: 'NIPT' as ProductType, name: 'NIPT 无创产前检测', shortName: 'NIPT', desc: '母血游离DNA检测21/18/13三体', elIcon: 'User', color: '#00A07D' },
      { type: 'NIPT-Plus' as ProductType, name: 'NIPT-Plus 全染色体', shortName: 'NIPT+', desc: '全染色体 + 微缺失综合征 + de novo单基因', elIcon: 'Star', color: '#00A07D' },
      { type: 'CNV-Prenatal' as ProductType, name: '产前CNV-seq', shortName: '产前CNV', desc: '羊水/绒毛拷贝数变异低深度测序', elIcon: 'TrendCharts', color: '#00A07D' },
      { type: 'Karyotype' as ProductType, name: '染色体核型分析', shortName: '核型', desc: '羊水/绒毛细胞培养G显带核型分析', elIcon: 'View', color: '#00A07D' },
      { type: 'WES-Prenatal' as ProductType, name: '产前WES', shortName: '产前WES', desc: '超声异常胎儿全外显子组诊断（Trio）', elIcon: 'DataAnalysis', color: '#00A07D' },
      { type: 'WGS-Prenatal' as ProductType, name: '产前WGS', shortName: '产前WGS', desc: '胎儿全基因组深度测序', elIcon: 'Compass', color: '#00A07D' },
      { type: 'Array-CGH' as ProductType, name: '产前Array-CGH', shortName: 'Array-CGH', desc: '微阵列比较基因组杂交，高分辨率CNV', elIcon: 'Grid', color: '#00A07D' },
    ]
  },
  {
    key: 'diagnosis',
    name: '遗传诊断系列',
    icon: '🏥',
    gradient: 'linear-gradient(135deg, #0088B0 0%, #006688 100%)',
    accent: '#0088B0',
    products: [
      { type: 'WES' as ProductType, name: '全外显子组 WES', shortName: 'WES', desc: '遗传病诊断金标准，支持Trio家系策略', elIcon: 'DataAnalysis', color: '#0088B0' },
      { type: 'WGS' as ProductType, name: '全基因组 WGS', shortName: 'WGS', desc: '全基因组覆盖，疑难罕见病深度解析', elIcon: 'Compass', color: '#0088B0' },
      { type: 'BRCA' as ProductType, name: '遗传性乳腺癌 BRCA', shortName: 'BRCA', desc: 'BRCA1/2及HRR通路全套基因检测', elIcon: 'Medal', color: '#0088B0' },
      { type: 'Panel' as ProductType, name: '遗传病基因 Panel', shortName: 'Panel', desc: '心肌病/耳聋/眼病等疾病专项Panel', elIcon: 'Collection', color: '#0088B0' },
      { type: 'CNV-seq' as ProductType, name: '拷贝数变异 CNV-seq', shortName: 'CNV-seq', desc: '全基因组CNV低深度测序检测', elIcon: 'TrendCharts', color: '#0088B0' },
      { type: 'CMA' as ProductType, name: '染色体微阵列 CMA', shortName: 'CMA', desc: '高分辨率微缺失/微重复芯片检测', elIcon: 'Cpu', color: '#0088B0' },
      { type: 'Methylation' as ProductType, name: '甲基化检测', shortName: '甲基化', desc: 'PWS/AS/BWS等印记基因甲基化分析', elIcon: 'Aim', color: '#0088B0' },
      { type: 'GTV' as ProductType, name: '已知变异验证 GTV', shortName: 'GTV', desc: '已知致病位点家系验证，快速周转', elIcon: 'CircleCheck', color: '#0088B0' },
    ]
  },
]

const quickProducts = [
  { type: 'PGT-M' as ProductType, shortName: 'PGT-M', elIcon: 'Connection', color: '#00B5C8', desc: '', name: 'PGT-M 单基因病' },
  { type: 'PGT-A' as ProductType, shortName: 'PGT-A', elIcon: 'Histogram', color: '#00B5C8', desc: '', name: 'PGT-A 非整倍体 1M' },
  { type: 'ECS' as ProductType, shortName: 'ECS-168', elIcon: 'Search', color: '#6DC02A', desc: '', name: 'ECS-168 携带者筛查' },
  { type: 'NIPT' as ProductType, shortName: 'NIPT', elIcon: 'User', color: '#00A07D', desc: '', name: 'NIPT 无创产前检测' },
  { type: 'WES' as ProductType, shortName: 'WES', elIcon: 'DataAnalysis', color: '#0088B0', desc: '', name: '全外显子组 WES' },
  { type: 'GTV' as ProductType, shortName: 'GTV验证', elIcon: 'CircleCheck', color: '#0088B0', desc: '', name: '已知变异验证 GTV' },
]

const selectedProduct = ref<Product | null>(null)

const hospitals = [
  '北京协和医院', '北京大学第一医院', '北京大学人民医院', '北京儿童医院',
  '上海妇产科医院', '复旦大学附属妇产科医院', '上海交通大学医学院附属仁济医院',
  '广州市妇女儿童医疗中心', '中山大学附属第一医院', '南方医科大学南方医院',
  '浙江大学医学院附属妇产科医院', '四川大学华西第二医院', '中国医学科学院肿瘤医院',
  '华中科技大学同济医学院附属同济医院', '湖南省妇幼保健院',
]

const form = ref({
  hospitalName: '',
  submitter: '',
  phone: '',
  submitDate: new Date().toISOString().split('T')[0],
  urgency: false,
  urgencyReason: '',
  specialNeeds: '',
  // 患者基本
  patientName: '',
  femaleAge: undefined as number | undefined,
  maleAge: undefined as number | undefined,
  gender: '女',
  idCard: '',
  // ECS
  ecsTarget: '女方',
  isPregnant: '孕前筛查',
  gestWeeks: undefined as number | undefined,
  ecsPanels: [] as string[],
  // AZF
  infertileYears: undefined as number | undefined,
  spermConc: '',
  spermMotility: '',
  karyotype: '未检查',
  karyotypeDetail: '',
  priorTest: '',
  // PGT-M
  disease: '',
  gene: '',
  geneStatus: 'new',
  priorOrderNo: '',
  inheritMode: '',
  knownVariant: '',
  childStatus: '无',
  hpoTerms: [] as string[],
  pregnancyMode: 'IVF',
  embryoCount: undefined as number | undefined,
  ivfCycles: 1,
  checkItems: [] as string[],
  // PGT-A
  indications: [] as string[],
  biopsyDate: '',
  chipType: '1M',
  // PGT-SR
  srCarrier: '女方',
  srType: '相互易位',
  // PGT-HLA
  siblingName: '',
  withPGTM: false,
  // Array-PGT
  arrayPlatform: 'Illumina-GSA',
  // NIPT
  conceptionMode: '自然妊娠',
  fetusCount: 1,
  riskFactors: [] as string[],
  lmpDate: '',
  niptPlusScope: [] as string[],
  // Prenatal
  prenatalSampleType: '羊水',
  punctureDate: '',
  punctureReason: '',
  fetalUS: '',
  withParents: false,
  // WES/WGS
  wesStrategy: 'trio',
  seqDepth: '100x',
  clinicalFeature: '',
  familyHistory: '',
  // BRCA
  brcaDiagnosis: [] as string[],
  brcaGenes: [] as string[],
  // Panel
  panelCategory: '',
  // CNV/CMA
  // Methylation
  methylationType: 'PWS-AS',
  // GTV
  gtvTarget: 'family',
  // 报告接收
  reportRecipient: '',
  reportPhone: '',
  reportEmail: '',
  reportAddress: '',
  // 样本
  samples: [{ sampleNo: '', sampleType: '外周血', relation: '', barcode: '', samplingDate: new Date().toISOString().split('T')[0] }],
})

function selectProduct(p: Product) {
  selectedProduct.value = p
  step.value = 2
  selectedPatient.value = null
  patientSearchText.value = ''
  // 根据产品类型预设样本关系
  if (p.type === 'PGT-M') {
    form.value.samples = [
      { sampleNo: '', sampleType: '外周血', relation: '女方', barcode: '', samplingDate: new Date().toISOString().split('T')[0] },
      { sampleNo: '', sampleType: '外周血', relation: '男方', barcode: '', samplingDate: new Date().toISOString().split('T')[0] },
    ]
  } else if (['PGT-A','PGT-A-4M','Array-PGT'].includes(p.type)) {
    form.value.samples = [
      { sampleNo: '', sampleType: '活检样本', relation: '胚胎1', barcode: '', samplingDate: new Date().toISOString().split('T')[0] },
    ]
  } else if (['NIPT','NIPT-Plus'].includes(p.type)) {
    form.value.samples = [
      { sampleNo: '', sampleType: '外周血', relation: '女方', barcode: '', samplingDate: new Date().toISOString().split('T')[0] },
    ]
  } else if (['CNV-Prenatal','Karyotype','WES-Prenatal'].includes(p.type)) {
    form.value.samples = [
      { sampleNo: '', sampleType: '羊水', relation: '胎儿', barcode: '', samplingDate: new Date().toISOString().split('T')[0] },
    ]
  }
}

function handleBack() {
  if (step.value === 2) {
    step.value = 1
    selectedProduct.value = null
  } else {
    router.push('/pgx/orders')
  }
}

function addSample() {
  form.value.samples.push({ sampleNo: '', sampleType: '', relation: '', barcode: '', samplingDate: new Date().toISOString().split('T')[0] })
}

function removeSample(idx: number) {
  form.value.samples.splice(idx, 1)
}

function buildOrderPayload(status: 'draft' | 'submitted') {
  return {
    orderNo: 'JB' + Date.now().toString().slice(-8),
    productType: selectedProduct.value!.type,
    patientName: form.value.patientName || '（草稿）',
    hospitalName: form.value.hospitalName,
    submitter: form.value.submitter,
    phone: form.value.phone,
    submitDate: form.value.submitDate || new Date().toISOString().split('T')[0],
    status,
    editable: status === 'draft',
    hasReport: false,
    failed: false,
    urgency: form.value.urgency,
    urgencyReason: form.value.urgencyReason,
    specialNeeds: form.value.specialNeeds,
    limsStatus: status === 'submitted' ? 'pushed' as const : 'pending' as const,
    samples: form.value.samples.filter(s => s.sampleNo || s.barcode),
    disease: form.value.disease,
    gene: form.value.gene,
    femaleAge: form.value.femaleAge,
    maleAge: form.value.maleAge,
    inheritMode: form.value.inheritMode,
    embryoCount: form.value.embryoCount,
    reportRecipient: form.value.reportRecipient,
    reportPhone: form.value.reportPhone,
    reportEmail: form.value.reportEmail,
    reportAddress: form.value.reportAddress,
  }
}

function saveDraft() {
  const order = pgxStore.addOrder(buildOrderPayload('draft'))
  // 草稿也建档，方便下次关联
  if (form.value.patientName) {
    pgxStore.upsertPatient({
      name: form.value.patientName,
      phone: form.value.phone,
      hospitalName: form.value.hospitalName,
      femaleAge: form.value.femaleAge,
      maleAge: form.value.maleAge,
      disease: form.value.disease,
      gene: form.value.gene,
      inheritMode: form.value.inheritMode,
      knownVariant: form.value.knownVariant,
      childStatus: form.value.childStatus,
      hpoTerms: form.value.hpoTerms,
      lastProductType: selectedProduct.value?.type,
    }, order.id)
  }
  ElMessage.success('草稿已保存，患者档案已同步')
  router.push('/pgx/orders')
}

async function submitOrder() {
  submitting.value = true
  await new Promise(r => setTimeout(r, 800))
  const order = pgxStore.addOrder(buildOrderPayload('submitted'))
  // 提交时自动建档/更新档案
  pgxStore.upsertPatient({
    name: form.value.patientName,
    phone: form.value.phone,
    hospitalName: form.value.hospitalName,
    femaleAge: form.value.femaleAge,
    maleAge: form.value.maleAge,
    disease: form.value.disease,
    gene: form.value.gene,
    inheritMode: form.value.inheritMode,
    knownVariant: form.value.knownVariant,
    childStatus: form.value.childStatus,
    hpoTerms: form.value.hpoTerms,
    lastProductType: selectedProduct.value?.type,
    lastOrderDate: form.value.submitDate,
  }, order.id)
  submitting.value = false
  ElMessage.success('申请单已提交，患者档案已同步建立')
  router.push('/pgx/orders')
}

// ===== Excel模式 =====
const excelStep = ref(0)
const excelPreview = ref<any[]>([])
const excelColumns = ref<string[]>([])

const excelTemplates = [
  { type: 'PGT-M', name: 'PGT-M单基因病申请模板', fields: 18, sampleDesc: '家系样本（夫妻+先证者+胚胎）' },
  { type: 'PGT-A', name: 'PGT-A染色体非整倍体模板', fields: 12, sampleDesc: '活检胚胎样本' },
  { type: 'ECS', name: 'ECS携带者筛查批量模板', fields: 10, sampleDesc: '外周血样本' },
  { type: 'NIPT', name: 'NIPT无创产检批量模板', fields: 14, sampleDesc: '孕妇外周血' },
  { type: 'WES', name: 'WES全外显子组申请模板', fields: 16, sampleDesc: 'Trio家系样本' },
  { type: 'BRCA', name: '遗传性乳腺癌BRCA模板', fields: 12, sampleDesc: '外周血' },
  { type: '通用', name: '通用申请单模板', fields: 20, sampleDesc: '所有样本类型' },
]

function downloadTemplate(tpl: any) {
  ElMessage.success(`正在下载「${tpl.name}」模板...（演示模式）`)
}

function handleExcelFile(file: any) {
  // 模拟Excel解析
  ElMessage.info('正在解析Excel文件...')
  setTimeout(() => {
    excelColumns.value = ['申请单号', '患者姓名', '送检单位', '检测项目', '女方年龄', '样本条码', '样本类型', '联系电话']
    excelPreview.value = [
      { '申请单号': 'JB-2026-0401', '患者姓名': '张某某', '送检单位': '北京协和医院', '检测项目': 'PGT-A', '女方年龄': 35, '样本条码': 'BC20260401001', '样本类型': '活检样本', '联系电话': '138****8001', _valid: true },
      { '申请单号': 'JB-2026-0402', '患者姓名': '李某某', '送检单位': '上海妇产科医院', '检测项目': 'PGT-M', '女方年龄': 32, '样本条码': 'BC20260401002', '样本类型': '外周血', '联系电话': '139****9002', _valid: true },
      { '申请单号': 'JB-2026-0403', '患者姓名': '王某某', '送检单位': '', '检测项目': 'ECS', '女方年龄': 28, '样本条码': '', '样本类型': '外周血', '联系电话': '', _valid: false, _error: '送检单位和样本条码不能为空' },
    ]
    ElMessage.success('解析完成，请检查数据')
  }, 1200)
}

async function submitExcelBatch() {
  submitting.value = true
  const valid = excelPreview.value.filter(r => r._valid)
  await new Promise(r => setTimeout(r, 1200))
  valid.forEach((row) => {
    pgxStore.addOrder({
      orderNo: row['申请单号'] || ('JB' + Date.now().toString().slice(-8)),
      productType: (row['检测项目'] as ProductType) || 'PGT-A',
      patientName: row['患者姓名'] || '',
      hospitalName: row['送检单位'] || '',
      submitter: '',
      phone: row['联系电话'] || '',
      submitDate: new Date().toISOString().split('T')[0],
      status: 'submitted',
      editable: false,
      hasReport: false,
      failed: false,
      urgency: false,
      limsStatus: 'pushed',
      samples: row['样本条码'] ? [{ id: Date.now().toString(), sampleNo: row['申请单号'] || '', sampleType: row['样本类型'] || '', relation: '', barcode: row['样本条码'] || '', samplingDate: new Date().toISOString().split('T')[0] }] : [],
      femaleAge: row['女方年龄'],
    })
  })
  submitting.value = false
  ElMessage.success(`批量提交成功：${valid.length} 条申请单已提交`)
  router.push('/pgx/orders')
}

// ===== OCR模式 =====
const ocrProcessing = ref(false)
const ocrResult = ref<Record<string,string> | null>(null)

function handleOCRImage(file: any) {
  ocrProcessing.value = true
  ocrResult.value = null
  setTimeout(() => {
    ocrProcessing.value = false
    ocrResult.value = {
      '送检单位': '北京协和医院生殖中心',
      '送检医生': '张医生',
      '患者姓名': '李某某',
      '女方年龄': '34岁',
      '检测项目': 'PGT-M（单基因病）',
      '检测疾病': '脊髓性肌萎缩症(SMA)',
      '致病基因': 'SMN1',
      '遗传模式': '常染色体隐性遗传',
      '活检胚胎数': '3个',
      '联系电话': '13800138001',
    }
  }, 2000)
}

function applyOCRResult() {
  if (ocrResult.value) {
    form.value.patientName = ocrResult.value['患者姓名'] || ''
    form.value.hospitalName = ocrResult.value['送检单位'] || ''
    form.value.submitter = ocrResult.value['送检医生'] || ''
    form.value.disease = ocrResult.value['检测疾病'] || ''
    form.value.gene = ocrResult.value['致病基因'] || ''
  }
  // 切换到表单模式并自动跳到PGT-M表单
  const pgtm = productCategories[1].products[0]!
  selectProduct(pgtm)
  inputMode.value = 'form'
  ElMessage.success('已将识别结果填入表单，请检查并补充剩余字段')
}

// ===== PDF模式 =====
const pdfProcessing = ref(false)
const pdfResult = ref<Record<string,string> | null>(null)

function handlePDFFile(file: any) {
  pdfProcessing.value = true
  pdfResult.value = null
  setTimeout(() => {
    pdfProcessing.value = false
    pdfResult.value = {
      '送检单位': '复旦大学附属妇产科医院',
      '送检日期': '2026-03-28',
      '患者姓名': '赵某某',
      '女方年龄': '29岁',
      '检测项目': 'ECS-168携带者筛查',
      '检测对象': '女方',
      '联系电话': '15900159003',
      '样本类型': '外周血',
      '样本条码': 'BC20260328001',
    }
  }, 1500)
}

function applyPDFResult() {
  if (pdfResult.value) {
    form.value.patientName = pdfResult.value['患者姓名'] || ''
    form.value.hospitalName = pdfResult.value['送检单位'] || ''
    form.value.submitDate = pdfResult.value['送检日期'] || form.value.submitDate
    form.value.phone = pdfResult.value['联系电话'] || ''
  }
  const ecs = productCategories[0].products[0]!
  selectProduct(ecs)
  inputMode.value = 'form'
  ElMessage.success('已将PDF提取结果填入表单，请检查并补充剩余字段')
}
</script>

<style scoped>
.register-page { padding: 24px; max-width: 1200px; }
.page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.page-header h1 { font-size: 18px; font-weight: 600; margin: 0; color: #1a1f2e; }

/* 患者搜索区 */
.patient-search-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: #f0f9ff;
  border: 1.5px solid #bae6fd;
  border-radius: 10px;
  margin-bottom: 16px;
}
.ps-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #0369a1;
  white-space: nowrap;
}
.ps-icon { font-size: 18px; }

.patient-suggestion { padding: 2px 0; }
.ps-name { font-size: 14px; font-weight: 600; color: #1a1f2e; }
.ps-meta { font-size: 12px; color: #888; margin-top: 2px; }

/* 历史档案卡 */
.patient-history-card {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-left: 4px solid #22c55e;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.phc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.phc-name { font-size: 16px; font-weight: 700; color: #15803d; }
.phc-meta { font-size: 13px; color: #555; }
.phc-body { display: flex; flex-direction: column; gap: 6px; }
.phc-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.phc-key {
  width: 72px;
  flex-shrink: 0;
  color: #888;
  font-size: 12px;
  padding-top: 2px;
}
.phc-val { color: #1a1f2e; flex: 1; }
.phc-mono { font-family: monospace; color: #0369a1; }
.phc-hint {
  margin-top: 10px;
  font-size: 12px;
  color: #16a34a;
}

/* 录入模式选择器 */
.input-mode-selector {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background: #f8faff;
  border-radius: 10px;
  border: 1px solid #e0ebff;
}
.mode-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border: 2px solid #e8ecf0;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s;
}
.mode-card:hover { border-color: #00B5C8; }
.mode-card.active { border-color: #00B5C8; background: #ecf5ff; }
.mode-icon { font-size: 24px; }
.mode-icon-img { width: 32px; height: 32px; object-fit: contain; }
.mode-label { font-size: 14px; font-weight: 600; color: #1a1f2e; }
.mode-desc { font-size: 12px; color: #888; }

/* 产品选择 */
.product-select-page { display: flex; flex-direction: column; gap: 20px; }

/* 常用产品快捷入口 */
.quick-access {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 10px;
  padding: 16px 20px;
}
.qa-label { font-size: 13px; color: #888; margin-bottom: 12px; font-weight: 500; }
.qa-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.qa-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--chip-color, #00B5C8);
  cursor: pointer;
  background: #fff;
  transition: all 0.18s;
  font-size: 13px;
  color: var(--chip-color, #00B5C8);
  font-weight: 500;
}
.qa-chip:hover { background: var(--chip-color, #00B5C8); color: #fff; }
.qa-icon { font-size: 15px; color: inherit; }
.qa-name { white-space: nowrap; }

/* 四系列主布局 */
.series-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.series-col { display: flex; flex-direction: column; gap: 0; border-radius: 10px; overflow: hidden; border: 1px solid #e8ecf0; }
.series-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  color: #fff;
}
.sh-icon { font-size: 22px; }
.sh-name { font-size: 14px; font-weight: 700; }
.sh-count { font-size: 12px; opacity: 0.8; margin-top: 2px; }
.series-products { display: flex; flex-direction: column; gap: 0; background: #fff; }
.sp-card {
  padding: 12px 16px;
  cursor: pointer;
  border-top: 1px solid #f0f2f5;
  transition: background 0.15s;
  border-left: 3px solid transparent;
}
.sp-card:hover {
  background: #f5f9ff;
  border-left-color: var(--accent, #00B5C8);
}
.sp-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sp-icon { font-size: 16px; color: var(--accent, #00B5C8); flex-shrink: 0; }
.sp-name { font-size: 13px; font-weight: 600; color: #1a1f2e; }
.sp-desc { font-size: 11px; color: #8896aa; line-height: 1.4; padding-left: 24px; }

/* 旧类名兼容 */
.product-category { margin-bottom: 24px; }
.category-title { font-size: 15px; font-weight: 600; color: #334155; margin-bottom: 12px; padding-left: 10px; border-left: 3px solid #00B5C8; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.product-card {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.product-card:hover { border-color: #00B5C8; box-shadow: 0 4px 12px rgba(64,158,255,0.15); transform: translateY(-2px); }
.product-icon { font-size: 28px; margin-bottom: 8px; }
.product-name { font-size: 13px; font-weight: 600; color: #1a1f2e; margin-bottom: 6px; }
.product-desc { font-size: 11px; color: #8896aa; line-height: 1.4; }

/* 表单区域 */
.order-form { background: #fff; border-radius: 10px; padding: 24px; }
.form-section { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #f0f2f5; }
.section-title { font-size: 15px; font-weight: 600; color: #334155; margin-bottom: 16px; padding-left: 10px; border-left: 3px solid #00B5C8; }

.sample-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px;
  background: #f8faff;
  border-radius: 8px;
  border: 1px solid #e8ecf0;
}
.sample-num { width: 48px; font-size: 12px; color: #888; flex-shrink: 0; }
.form-actions { display: flex; gap: 12px; justify-content: flex-end; padding-top: 16px; }

/* Excel / OCR / PDF通用 */
.tab-card { background: #fff; border-radius: 10px; padding: 24px; }
.guide-title { font-size: 16px; font-weight: 600; color: #1a1f2e; margin-bottom: 20px; }

.excel-step { margin-top: 8px; }
.step-desc { color: #666; font-size: 14px; margin-bottom: 16px; }
.template-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.template-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #e8ecf0;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.template-item:hover { border-color: #00B5C8; }
.tpl-icon { font-size: 24px; }
.tpl-info { flex: 1; }
.tpl-name { font-size: 14px; font-weight: 500; color: #1a1f2e; }
.tpl-desc { font-size: 12px; color: #888; margin-top: 2px; }

.excel-uploader, .ocr-uploader { width: 100%; margin-bottom: 16px; }
.excel-uploader :deep(.el-upload-dragger),
.ocr-uploader :deep(.el-upload-dragger) {
  width: 100%;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.upload-icon { font-size: 40px; }
.upload-text { font-size: 15px; color: #555; }
.upload-text em { color: #00B5C8; font-style: normal; }
.upload-hint { font-size: 12px; color: #aaa; }

.excel-preview { margin: 16px 0; }
.preview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.preview-title { font-size: 14px; font-weight: 500; color: #334155; }
.preview-stats { display: flex; gap: 8px; margin-top: 10px; }

.step-actions { display: flex; gap: 12px; margin-top: 16px; }

.ocr-area { max-width: 700px; }
.ocr-processing {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #00B5C8;
  font-size: 14px;
  margin: 16px 0;
}
.spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.ocr-result { margin-top: 8px; }
</style>