<template>
  <div class="order-detail" v-if="order">
    <div class="page-header">
      <el-button text @click="$router.back()">← 返回</el-button>
      <h1>申请单详情</h1>
      <div class="header-tags">
        <el-tag :type="statusType(order.status)" effect="light">{{ statusLabel(order.status) }}</el-tag>
        <el-tag v-if="order.urgency" type="danger" effect="dark">加急</el-tag>
        <el-tag :style="{ color: limsColor(order.limsStatus) }" effect="plain">LIMS: {{ limsLabel(order.limsStatus) }}</el-tag>
      </div>
    </div>

    <el-tabs v-model="activeTab">
      <!-- 基本信息 -->
      <el-tab-pane label="基本信息" name="info">
        <div class="tab-content">
          <div class="info-grid">
            <div class="info-item"><label>申请单编号</label><span class="value primary">{{ order.orderNo }}</span></div>
            <div class="info-item"><label>检测项目</label><span><el-tag size="small">{{ order.productType }}</el-tag></span></div>
            <div class="info-item"><label>患者姓名</label><span>{{ order.patientName }}</span></div>
            <div class="info-item"><label>送检单位</label><span>{{ order.hospitalName }}</span></div>
            <div class="info-item"><label>送检人</label><span>{{ order.submitter }}</span></div>
            <div class="info-item"><label>联系电话</label><span>{{ order.phone }}</span></div>
            <div class="info-item"><label>提交日期</label><span>{{ order.submitDate }}</span></div>
            <div v-if="order.urgency" class="info-item"><label>加急原因</label><span class="warn">{{ order.urgencyReason }}</span></div>
            <div v-if="order.disease" class="info-item"><label>检测疾病</label><span>{{ order.disease }}</span></div>
            <div v-if="order.gene" class="info-item"><label>致病基因</label><span>{{ order.gene }}</span></div>
            <div v-if="order.inheritMode" class="info-item"><label>遗传模式</label><span>{{ order.inheritMode }}</span></div>
            <div v-if="order.femaleAge" class="info-item"><label>女方年龄</label><span>{{ order.femaleAge }}岁</span></div>
            <div v-if="order.maleAge" class="info-item"><label>男方年龄</label><span>{{ order.maleAge }}岁</span></div>
            <div v-if="order.embryoCount" class="info-item"><label>活检胚胎数</label><span>{{ order.embryoCount }}个</span></div>
            <div v-if="order.failReason" class="info-item full"><label>异常原因</label><span class="error">{{ order.failReason }}</span></div>
          </div>

          <!-- 状态时间线 -->
          <div class="timeline-section">
            <div class="section-title">流程状态</div>
            <el-steps :active="stepIndex" finish-status="success" align-center>
              <el-step title="草稿" icon="Edit" />
              <el-step title="已提交" icon="Upload" />
              <el-step title="接收审核" icon="Check" />
              <el-step title="检测中" icon="Loading" />
              <el-step :title="order.failed ? '检测异常' : '已出报告'" :icon="order.failed ? 'Warning' : 'DocumentChecked'" :status="order.failed ? 'error' : undefined" />
            </el-steps>
          </div>

          <!-- checkPointer 操作 -->
          <div v-if="pgxStore.currentRole === 'checkPointer'" class="action-bar">
            <el-button v-if="order.status === 'submitted'" type="primary" @click="confirmReceive">确认接收样本</el-button>
            <el-button v-if="order.status === 'received'" type="primary" @click="startTesting">开始检测</el-button>
            <el-button v-if="['received','testing'].includes(order.status) && !order.failed" type="danger" plain @click="markFailed">标记检测异常</el-button>
          </div>
        </div>
      </el-tab-pane>

      <!-- 样本信息 -->
      <el-tab-pane label="样本信息" name="samples">
        <div class="tab-content">
          <div class="section-header">
            <span>共 {{ order.samples.length }} 个样本</span>
            <el-button v-if="pgxStore.currentRole === 'checkPointer'" size="small" type="primary" @click="showDetectionDialog = true">快速录入检测信息</el-button>
          </div>
          <el-table :data="order.samples" border>
            <el-table-column label="样本编号" prop="sampleNo" width="130" />
            <el-table-column label="样本类型" prop="sampleType" width="100" />
            <el-table-column label="亲缘关系" prop="relation" width="100" />
            <el-table-column label="样本条码" prop="barcode" width="150" />
            <el-table-column label="采样日期" prop="samplingDate" width="110" />
            <el-table-column label="检测平台" prop="detectionPlatform" width="110">
              <template #default="{ row }">
                <span>{{ row.detectionPlatform || '—' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="Q30 (%)">
              <template #default="{ row }">
                <el-progress v-if="row.q30" :percentage="row.q30" :color="row.q30 >= 85 ? '#52c41a' : '#ff4d4f'" :show-text="true" />
                <span v-else>—</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 报告列表 -->
      <el-tab-pane label="报告列表" name="reports">
        <div class="tab-content">
          <div class="section-header">
            <span>报告文件</span>
            <el-button v-if="pgxStore.currentRole === 'checkPointer'" size="small" type="primary" @click="showUploadDialog = true">上传报告</el-button>
          </div>

          <div v-if="!order.reportFiles?.length" class="empty-tip">暂无报告</div>
          <div v-else class="report-list">
            <div v-for="f in order.reportFiles" :key="f.id" class="report-item">
              <div class="report-icon">📄</div>
              <div class="report-info">
                <div class="report-name">{{ f.name }}</div>
                <div class="report-meta">{{ f.date }} · {{ f.source || '实验室上传' }} · <el-tag size="small" :type="f.reviewStatus === 'approved' ? 'success' : 'warning'" effect="light">{{ f.reviewStatus === 'approved' ? '已签发' : '待审核' }}</el-tag></div>
                <div v-if="f.emailSent" class="report-sent">📧 已发送邮件</div>
                <div v-if="f.archivedPath" class="report-archived">📁 已归档: {{ f.archivedPath }}</div>
              </div>
              <div class="report-actions">
                <el-button size="small" type="primary" plain @click="ElMessage.success('报告下载中...')">下载</el-button>
                <el-button v-if="pgxStore.currentRole === 'checkPointer'" size="small" type="danger" plain @click="deleteReport(f.id)">删除</el-button>
              </div>
            </div>
          </div>

          <!-- 报告邮寄地址 -->
          <div class="mail-section">
            <div class="section-title">报告邮寄地址</div>
            <el-form :model="mailForm" label-width="90px" size="small">
              <el-row :gutter="16">
                <el-col :span="8"><el-form-item label="收件人"><el-input v-model="mailForm.recipient" /></el-form-item></el-col>
                <el-col :span="8"><el-form-item label="联系电话"><el-input v-model="mailForm.phone" /></el-form-item></el-col>
                <el-col :span="8"><el-form-item label="邮箱"><el-input v-model="mailForm.email" /></el-form-item></el-col>
                <el-col :span="24"><el-form-item label="邮寄地址"><el-input v-model="mailForm.address" /></el-form-item></el-col>
              </el-row>
              <el-button size="small" type="primary" @click="saveMailInfo">保存邮寄信息</el-button>
            </el-form>
          </div>
        </div>
      </el-tab-pane>

      <!-- 原始单据 -->
      <el-tab-pane label="原始单据" name="docs">
        <div class="tab-content">
          <div class="section-header">
            <span>原始单据</span>
            <el-button size="small" @click="showDocDialog = true">补充单据</el-button>
          </div>
          <div class="doc-grid">
            <div v-for="doc in mockDocs" :key="doc.id" class="doc-card">
              <div class="doc-img" @click="previewDoc(doc)">
                <img :src="doc.thumb" :alt="doc.name" />
                <div class="doc-overlay">
                  <span>🔍 查看</span>
                </div>
              </div>
              <div class="doc-footer">
                <span class="doc-name">{{ doc.name }}</span>
                <div class="doc-ops">
                  <span @click="rotateDoc(doc)">↻</span>
                  <span @click="deleteDoc(doc)">🗑</span>
                </div>
              </div>
              <el-tag size="small" effect="light">{{ doc.category }}</el-tag>
            </div>
            <div class="doc-add" @click="showDocDialog = true">
              <span>+</span>
              <span>上传单据</span>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <!-- 补充样本 -->
      <el-tab-pane v-if="!order.editable && order.status !== 'draft'" label="补充样本" name="supplement">
        <div class="tab-content">
          <el-alert title="在已提交的申请单中追加补充样本" type="info" :closable="false" style="margin-bottom:16px" />
          <div class="supplement-samples">
            <div v-for="(s, idx) in suppSamples" :key="idx" class="sample-row">
              <span class="sample-num">补充样本 {{ idx + 1 }}</span>
              <el-input v-model="s.sampleNo" placeholder="样本编号" size="small" style="width:120px" />
              <el-select v-model="s.sampleType" placeholder="类型" size="small" style="width:110px">
                <el-option label="外周血" value="外周血" />
                <el-option label="活检样本" value="活检样本" />
              </el-select>
              <el-input v-model="s.barcode" placeholder="条码" size="small" style="width:140px" />
              <el-button size="small" type="danger" plain @click="suppSamples.splice(idx,1)">移除</el-button>
            </div>
            <el-button size="small" @click="suppSamples.push({sampleNo:'',sampleType:'',barcode:''})">+ 添加补充样本</el-button>
          </div>
          <div style="margin-top:16px; display:flex; gap:10px">
            <el-button type="primary" @click="submitSupplement">确认无误，提交补充样本</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 检测信息录入弹窗 -->
    <el-dialog v-model="showDetectionDialog" title="快速录入检测信息" width="600px">
      <el-form label-width="120px" size="small">
        <el-form-item label="检测地点">
          <el-select v-model="detForm.location" style="width:100%">
            <el-option label="北京实验室" value="北京" />
            <el-option label="上海实验室" value="上海" />
          </el-select>
        </el-form-item>
        <el-form-item label="检测平台">
          <el-radio-group v-model="detForm.platform">
            <el-radio label="Illumina">Illumina</el-radio>
            <el-radio label="LIFE">LIFE</el-radio>
            <el-radio label="Genolab">Genolab</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文库构建日期"><el-date-picker v-model="detForm.libraryDate" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item>
        <el-form-item label="文库浓度(ng/µL)"><el-input-number v-model="detForm.libraryConc" :precision="2" style="width:100%" /></el-form-item>
        <el-form-item label="试剂盒批号"><el-input v-model="detForm.kitLot" /></el-form-item>
        <el-form-item label="测序日期"><el-date-picker v-model="detForm.seqDate" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item>
        <el-form-item label="测序仪序列号"><el-input v-model="detForm.seqSN" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDetectionDialog = false">取消</el-button>
        <el-button type="primary" @click="saveDetection">保存</el-button>
      </template>
    </el-dialog>

    <!-- 上传报告弹窗 -->
    <el-dialog v-model="showUploadDialog" title="上传检测报告" width="500px">
      <el-form label-width="100px" size="small">
        <el-form-item label="报告文件">
          <el-upload action="#" :auto-upload="false" :limit="1" accept=".pdf">
            <el-button size="small">选择PDF文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="报告来源"><el-input v-model="uploadForm.source" placeholder="如：生信分析平台" /></el-form-item>
        <el-form-item label="生成日期"><el-date-picker v-model="uploadForm.date" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showUploadDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmUpload">确认上传</el-button>
      </template>
    </el-dialog>

    <!-- 补充单据弹窗 -->
    <el-dialog v-model="showDocDialog" title="补充上传单据" width="500px">
      <el-form label-width="90px" size="small">
        <el-form-item label="单据分类">
          <el-select v-model="docForm.category" 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-form-item label="图片名称"><el-input v-model="docForm.name" /></el-form-item>
        <el-form-item label="上传图片">
          <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="5">
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDocDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmDoc">保存单据</el-button>
      </template>
    </el-dialog>
  </div>

  <div v-else class="not-found">
    <el-empty description="申请单不存在" />
    <el-button @click="$router.push('/pgx/orders')">返回列表</el-button>
  </div>
</template>

<script setup lang="ts">
import { usePGXStore } from '@/stores/pgx'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

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

const order = computed(() => pgxStore.getOrderById(route.params.id as string))
const activeTab = ref('info')

const stepIndex = computed(() => {
  const map: Record<string, number> = { draft: 0, submitted: 1, received: 2, testing: 3, reported: 4, failed: 4 }
  return map[order.value?.status || 'draft']
})

function statusLabel(s: string) {
  return { draft:'草稿', submitted:'已提交', received:'接收审核', testing:'检测中', reported:'已出报告', failed:'检测异常' }[s] || s
}
function statusType(s: string): any {
  return { draft:'info', submitted:'warning', received:'', testing:'primary', reported:'success', failed:'danger' }[s] || ''
}
function limsLabel(s: string) {
  return { pending:'待推送', pushed:'已推送', failed:'推送异常' }[s] || s
}
function limsColor(s: string) {
  return { pending:'#aaa', pushed:'#52c41a', failed:'#ff4d4f' }[s] || '#aaa'
}

// 邮寄信息
const mailForm = ref({
  recipient: order.value?.reportRecipient || '',
  phone: order.value?.reportPhone || '',
  email: order.value?.reportEmail || '',
  address: order.value?.reportAddress || '',
})

function saveMailInfo() {
  pgxStore.updateOrder(order.value!.id, {
    reportRecipient: mailForm.value.recipient,
    reportPhone: mailForm.value.phone,
    reportEmail: mailForm.value.email,
    reportAddress: mailForm.value.address,
  })
  ElMessage.success('邮寄信息已保存')
}

// Mock 单据
const mockDocs = ref([
  { id: 'd1', name: '申请单原件', category: '申请单', thumb: 'https://placehold.co/120x160/eef2ff/4338ca?text=申请单', rotation: 0 },
  { id: 'd2', name: '家系图', category: '家系图', thumb: 'https://placehold.co/120x160/fef3c7/d97706?text=家系图', rotation: 0 },
])

function previewDoc(doc: any) {
  ElMessage.info(`查看文件：${doc.name}`)
}
function rotateDoc(doc: any) {
  doc.rotation = (doc.rotation + 90) % 360
  ElMessage.success('已旋转90°')
}
async function deleteDoc(doc: any) {
  await ElMessageBox.confirm(`确定删除「${doc.name}」吗？`, '删除确认', { type: 'warning' })
  const idx = mockDocs.value.findIndex(d => d.id === doc.id)
  if (idx !== -1) mockDocs.value.splice(idx, 1)
  ElMessage.success('已删除')
}

// 检测信息
const showDetectionDialog = ref(false)
const detForm = ref({ location: '北京', platform: 'Illumina', libraryDate: '', libraryConc: 0, kitLot: '', seqDate: '', seqSN: '' })
function saveDetection() {
  showDetectionDialog.value = false
  ElMessage.success('检测信息已录入')
}

// 上传报告
const showUploadDialog = ref(false)
const uploadForm = ref({ source: '生信分析平台', date: new Date().toISOString().split('T')[0] })
function confirmUpload() {
  pgxStore.addReportFile(order.value!.id, {
    id: 'r' + Date.now(),
    name: `${order.value!.productType}报告_${order.value!.patientName}.pdf`,
    url: '#',
    date: uploadForm.value.date,
    source: uploadForm.value.source,
    reviewStatus: 'pending',
  })
  showUploadDialog.value = false
  ElMessage.success('报告已上传，申请单状态已更新为「已出报告」')
}

async function deleteReport(reportId: string) {
  await ElMessageBox.confirm('确定删除本条报告吗？', '删除确认', { type: 'warning' })
  const order2 = order.value!
  const files = (order2.reportFiles || []).filter(f => f.id !== reportId)
  pgxStore.updateOrder(order2.id, { reportFiles: files, hasReport: files.length > 0 })
  ElMessage.success('已删除')
}

// 补充单据
const showDocDialog = ref(false)
const docForm = ref({ category: '申请单', name: '' })
function confirmDoc() {
  mockDocs.value.push({ id: 'd' + Date.now(), name: docForm.value.name || '新单据', category: docForm.value.category, thumb: 'https://placehold.co/120x160/f0fdf4/16a34a?text=新单据', rotation: 0 })
  showDocDialog.value = false
  ElMessage.success('单据已保存')
}

// 补充样本
const suppSamples = ref([{ sampleNo: '', sampleType: '', barcode: '' }])
function submitSupplement() {
  ElMessage.success('补充样本已提交，等待实验室审核（第2批）')
}

// 状态操作
async function confirmReceive() {
  await ElMessageBox.confirm('确认已收到样本并核对一致？', '确认接收')
  pgxStore.receiveOrder(order.value!.id)
  ElMessage.success('已确认接收，申请单状态已更新')
}
async function startTesting() {
  pgxStore.updateOrder(order.value!.id, { status: 'testing' })
  ElMessage.success('已开始检测')
}
async function markFailed() {
  const { value: reason } = await ElMessageBox.prompt('请填写异常原因', '标记检测异常', { inputPlaceholder: '请详细描述异常情况', confirmButtonText: '确认标记', cancelButtonText: '取消' })
  pgxStore.updateOrder(order.value!.id, { failed: true, status: 'failed', failReason: reason })
  ElMessage.warning('已标记为检测异常')
}
</script>

<style scoped>
.order-detail { padding: 24px; max-width: 1100px; }
.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; }
.header-tags { display: flex; gap: 8px; margin-left: auto; }

.tab-content { background: #fff; border-radius: 8px; padding: 20px; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.info-item { display: flex; flex-direction: column; gap: 4px; }
.info-item.full { grid-column: span 3; }
.info-item label { font-size: 12px; color: #8896aa; }
.info-item .value { font-size: 14px; color: #1a1f2e; }
.info-item .primary { color: #409eff; font-weight: 600; }
.info-item .warn { color: #fa8c16; }
.info-item .error { color: #ff4d4f; }

.timeline-section { margin: 20px 0; }
.section-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #334155; }
.action-bar { margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f2f5; display: flex; gap: 10px; }

.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 14px; color: #666; }

.empty-tip { text-align: center; color: #aaa; padding: 40px; }
.report-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.report-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid #e8ecf0; border-radius: 8px; }
.report-icon { font-size: 30px; }
.report-info { flex: 1; }
.report-name { font-size: 14px; font-weight: 500; color: #1a1f2e; margin-bottom: 4px; }
.report-meta { font-size: 12px; color: #888; display: flex; align-items: center; gap: 8px; }
.report-sent, .report-archived { font-size: 11px; color: #52c41a; margin-top: 3px; }
.report-actions { display: flex; gap: 6px; flex-direction: column; }

.mail-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #f0f2f5; }

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; }
.doc-card { border: 1px solid #e8ecf0; border-radius: 8px; overflow: hidden; }
.doc-img { position: relative; cursor: pointer; }
.doc-img img { width: 100%; height: 120px; object-fit: cover; display: block; }
.doc-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: 0.2s; }
.doc-img:hover .doc-overlay { opacity: 1; }
.doc-footer { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; font-size: 12px; }
.doc-name { color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.doc-ops { display: flex; gap: 6px; color: #888; cursor: pointer; }
.doc-ops span:hover { color: #409eff; }
.doc-add { border: 2px dashed #d9d9d9; border-radius: 8px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #aaa; cursor: pointer; font-size: 13px; transition: 0.2s; }
.doc-add:hover { border-color: #409eff; color: #409eff; }
.doc-add span:first-child { font-size: 28px; }

.supplement-samples { display: flex; flex-direction: column; gap: 10px; }
.sample-row { display: flex; align-items: center; gap: 10px; padding: 10px; background: #f8faff; border-radius: 8px; }
.sample-num { font-size: 12px; color: #888; width: 80px; flex-shrink: 0; }

.not-found { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; gap: 16px; }
</style>