<template>
  <div class="case-detail-container">
    <!-- 顶部导航 -->
    <div class="detail-header">
      <div class="header-left">
        <el-button link @click="handleBack">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>试验平台</el-breadcrumb-item>
          <el-breadcrumb-item>患者病例中心</el-breadcrumb-item>
          <el-breadcrumb-item>患者病例详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="header-right">
        <el-button-group>
          <el-button @click="triggerLocalUpload">
            <el-icon><Upload /></el-icon>
            本地上传
          </el-button>
          <el-button @click="showScanDialog = true">
            <el-icon><FullScreen /></el-icon>
            扫码上传
          </el-button>
        </el-button-group>
        <input
          type="file"
          ref="fileInputRef"
          style="display: none"
          multiple
          @change="handleFileChange"
        />
        <el-button type="primary" plain @click="handleSync">
          <el-icon><Refresh /></el-icon>
          同步最新数据
        </el-button>
      </div>
    </div>

    <div class="detail-content">
      <!-- 右侧多模块内容 -->
      <div class="module-content">
        <!-- 基本信息模块 -->
        <div class="basic-info-section">
          <div class="section-header">
            <span class="title">基本信息</span>
            <el-button link type="primary" size="small">
              <el-icon><EditPen /></el-icon>
              编辑信息
            </el-button>
          </div>
          <div class="info-grid">
            <div class="info-column">
              <div class="grid-item">
                <span class="label">患者姓名：</span>
                <span class="value">{{ maskName(caseInfo.name) }}</span>
              </div>
              <div class="grid-item">
                <span class="label">年龄：</span>
                <span class="value">{{ caseInfo.age || '--' }}</span>
              </div>
              <div class="grid-item">
                <span class="label">家庭住址：</span>
                <span class="value">{{ caseInfo.address || '--' }}</span>
              </div>
              <div class="grid-item">
                <span class="label">医院/科室：</span>
                <span class="value">自贡肿瘤医院/放疗科</span>
              </div>
            </div>
            <div class="info-column">
              <div class="grid-item">
                <span class="label">患者性别：</span>
                <span class="value">{{ caseInfo.gender || '--' }}</span>
              </div>
              <div class="grid-item">
                <span class="label">紧急联系人：</span>
                <span class="value">18108205734</span>
              </div>
              <div class="grid-item">
                <span class="label">主管医生：</span>
                <span class="value">小李</span>
              </div>
              <div class="grid-item">
                <span class="label">肿瘤类型：</span>
                <span class="value">--</span>
              </div>
            </div>
            <div class="info-column">
              <div class="grid-item">
                <span class="label">身份证号：</span>
                <span class="value">{{ maskIdCard(caseInfo.idCard) }}</span>
              </div>
              <div class="grid-item">
                <span class="label">联系电话：</span>
                <span class="value">18108205734</span>
              </div>
              <div class="grid-item">
                <span class="label">联系电话：</span>
                <span class="value">18108205734</span>
              </div>
              <div class="grid-item">
                <span class="label">肿瘤分期：</span>
                <span class="value">T4bN1aM0</span>
              </div>
            </div>
          </div>
        </div>

        <el-tabs v-model="activeTab" class="detail-tabs">
          <el-tab-pane label="归档任务" name="archive">
            <div class="tab-pane-content">
              <el-table :data="archiveFiles" style="width: 100%">
                <el-table-column prop="name" label="文件名" min-width="200" />
                <el-table-column prop="status" label="状态" width="100">
                  <template #default="{ row }">
                    <el-tag type="success" size="small">完成</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template #default>
                    <el-button link type="primary">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="生命体征" name="vitals">
            <div class="tab-pane-content vitals-grid">
              <div v-for="(val, key) in vitals" :key="key" class="vital-card">
                <div class="vital-label">{{ key }}</div>
                <div class="vital-value">{{ val || '-' }}</div>
                <div class="vital-time">记录时间: 2026-03-24 10:00</div>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="病史记录" name="history">
            <div class="tab-pane-content medical-history">
              <div class="history-section current">
                <h4>现病史</h4>
                <div class="text-box blue">
                  {{ caseInfo.currentHistory || '患者一年前无明显诱因出现头晕，持续数分钟后自行缓解...' }}
                </div>
              </div>
              <div class="history-section allergy">
                <h4>过敏史</h4>
                <div class="text-box red">
                  {{ caseInfo.allergyHistory || '否认食物及药物过敏史' }}
                </div>
              </div>
              <div class="history-section table-list">
                <el-table :data="historyTables" border style="width: 100%">
                  <el-table-column prop="type" label="病史类型" width="150" />
                  <el-table-column prop="content" label="具体内容" />
                </el-table>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="临床诊断(1)" name="diagnosis">
            <div class="tab-pane-content">
              <div class="pane-toolbar">
                <el-input v-model="diagSearch" placeholder="按疾病名称或 ICD 编码检索" style="width: 240px">
                  <template #prefix><el-icon><Search /></el-icon></template>
                </el-input>
              </div>
              <el-table :data="diagnosisData" style="width: 100%">
                <el-table-column prop="name" label="疾病名称" />
                <el-table-column prop="icd" label="ICD 编码" />
                <el-table-column prop="type" label="诊断类型" />
                <el-table-column prop="category" label="疾病类型" />
                <el-table-column prop="dept" label="就诊科室" />
                <el-table-column prop="date" label="首诊日期" />
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="治疗方案(1)" name="treatment">
            <div class="tab-pane-content">
              <div class="pane-toolbar">
                <el-select v-model="treatmentType" placeholder="切换方案类型" style="width: 200px">
                  <el-option label="癌症治疗方案" value="cancer" />
                </el-select>
              </div>
              <el-table :data="treatmentData" style="width: 100%">
                <el-table-column prop="no" label="就诊号" width="100" />
                <el-table-column prop="type" label="治疗类型" width="120" />
                <el-table-column prop="indication" label="适应症" min-width="150" />
                <el-table-column prop="plan" label="治疗方案" min-width="250" />
                <el-table-column prop="start" label="开始时间" width="120" />
                <el-table-column prop="end" label="结束时间" width="120" />
                <el-table-column prop="duration" label="时长(天)" width="100" />
                <el-table-column prop="effect" label="疗效评价" width="100" />
              </el-table>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="用药记录" name="medication">
            <div class="tab-pane-content">功能开发中...</div>
          </el-tab-pane>
          <el-tab-pane label="手术记录" name="surgery">
            <div class="tab-pane-content">功能开发中...</div>
          </el-tab-pane>
          <el-tab-pane label="病理学" name="pathology">
            <div class="tab-pane-content">功能开发中...</div>
          </el-tab-pane>
          <el-tab-pane label="检验报告" name="lab">
            <div class="tab-pane-content">功能开发中...</div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 扫码上传弹窗 -->
    <el-dialog
      v-model="showScanDialog"
      title="扫码上传"
      width="400px"
      align-center
      class="scan-upload-dialog"
    >
      <div class="scan-dialog-content">
        <div class="qr-code-wrapper">
          <!-- 模拟二维码图片 -->
          <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://clinpat.linkingmed.com/upload/image?patientId=8888888888" alt="QR Code" class="qr-code-img" />
        </div>
        <div class="patient-info-summary">
          当前患者：<span class="patient-name">{{ maskName(caseInfo.name) }}</span> <span class="patient-id">{{ caseInfo.caseNumber }}</span>
        </div>
        <div class="copy-link-section">
          <el-input v-model="uploadLink" readonly class="link-input">
            <template #append>
              <el-button @click="handleCopyLink">
                <el-icon><CopyDocument /></el-icon>
                复制链接
              </el-button>
            </template>
          </el-input>
        </div>
        <p class="scan-tip">使用手机扫描二维码上传与患者相关的图片文件</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ArrowLeft, Upload, FullScreen, Refresh, UserFilled, Search, CopyDocument, EditPen } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const props = defineProps<{
  caseData: any;
}>();

const emit = defineEmits(['back', 'upload-files']);

const fileInputRef = ref<HTMLInputElement | null>(null);

const triggerLocalUpload = () => {
  fileInputRef.value?.click();
};

const handleFileChange = (event: Event) => {
  const target = event.target as HTMLInputElement;
  if (target.files && target.files.length > 0) {
    const files = Array.from(target.files);
    emit('upload-files', files);
    // 重置 input 以便下次选择同一文件也能触发 change
    target.value = '';
  }
};

const caseInfo = reactive({
  ...props.caseData,
  phone: '138****8888',
  address: '北京市朝阳区****',
});

const activeTab = ref('archive');
const diagSearch = ref('');
const treatmentType = ref('cancer');
const showScanDialog = ref(false);
const uploadLink = ref('https://clinpat.linkingmed.com/upload/image?patientId=8888888888');

const archiveFiles = ref([
  { name: 'mmexport1774323954807.jpg', status: '完成' },
  { name: '检验检查.jpg', status: '完成' },
  { name: '影像检查.jpg', status: '完成' },
]);

const vitals = reactive({
  '体温': '36.8℃',
  '心率': '75次/分',
  '呼吸频率': '18次/分',
  '血压': '120/80mmHg',
  '脉搏': '75次/分',
  '血氧饱和度': '98%',
  '身高': '175cm',
  '体重': '70kg',
  'BMI': '22.86',
});

const historyTables = ref([
  { type: '既往史', content: '高血压病史20年，最高血压200/110mmHg...' },
  { type: '既往手术史', content: '20余年前曾做过甲状腺结节切除术' },
  { type: '家族史', content: '父亲、弟弟、妹妹均患有糖尿病' },
  { type: '个人史', content: '否认吸烟饮酒等不良嗜好' },
]);

const diagnosisData = ref([
  { name: '原发性高血压', icd: 'I10.x00', type: '确诊', category: '慢性病', dept: '心内科', date: '2024-01-01' }
]);

const treatmentData = ref([
  { no: 'V001', type: '药物治疗', indication: '高血压', plan: '口服氨氯地平 5mg qd', start: '2024-01-01', end: '-', duration: '450', effect: '良好' }
]);

const maskName = (name: string) => {
  if (!name) return '-';
  return name[0] + '*'.repeat(name.length - 1);
};

const maskIdCard = (idCard: string) => {
  if (!idCard) return '-';
  return idCard.substring(0, 3) + '*'.repeat(idCard.length - 7) + idCard.substring(idCard.length - 4);
};

const handleCopyLink = () => {
  navigator.clipboard.writeText(uploadLink.value);
  ElMessage.success('链接已复制到剪贴板');
};

const handleBack = () => {
  emit('back');
};

const handleSync = () => {
  ElMessage.success('正在同步最新数据...');
};
</script>

<style scoped lang="scss">
.case-detail-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  
  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .header-right {
    display: flex;
    gap: 12px;
  }
}

.detail-content {
  flex: 1;
  display: flex;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: var(--color-bg);
}

.module-content {
  flex: 1;
  background: var(--color-bg);
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  overflow: hidden;
  border: none;
  
  .basic-info-section {
    padding: 20px 24px;
    background: var(--color-bg);
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      .title {
        font-size: 16px;
        font-weight: 600;
        color: var(--color-text);
      }
    }
    
    .info-grid {
      display: flex;
      gap: 40px;
      
      .info-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
        
        .grid-item {
          display: flex;
          align-items: center;
          font-size: 14px;
          
          .label {
            color: var(--color-text-secondary);
            width: 100px;
            flex-shrink: 0;
          }
          
          .value {
            color: var(--color-text);
          }
        }
      }
    }
  }
  
  :deep(.detail-tabs) {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .el-tabs__header { margin: 0; padding: 0 20px; background: var(--color-bg); }
    .el-tabs__content { flex: 1; overflow: auto; padding: 20px; background: var(--color-bg); }
  }
}

.tab-pane-content {
  height: 100%;
}

.pane-toolbar {
  margin-bottom: 16px;
}

.vitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  
  .vital-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 16px;
    
    .vital-label { color: var(--color-text-secondary); font-size: 13px; margin-bottom: 8px; }
    .vital-value { color: var(--color-text); font-size: 20px; font-weight: 600; margin-bottom: 8px; }
    .vital-time { color: var(--color-text-placeholder); font-size: 12px; }
  }
}

.medical-history {
  display: flex;
  flex-direction: column;
  gap: 24px;
  
  h4 { margin: 0 0 12px; font-size: 16px; position: relative; padding-left: 12px; color: var(--color-text);
    &::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; background: var(--color-primary); border-radius: 2px; }
  }
  
  .text-box {
    padding: 16px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.6;
    
    &.blue { background: rgba(64, 158, 255, 0.1); color: #409eff; border: 1px solid rgba(64, 158, 255, 0.2); }
    &.red { background: rgba(245, 108, 108, 0.1); color: #f56c6c; border: 1px solid rgba(245, 108, 108, 0.2); }
  }
}

:deep(.el-table) {
  --el-table-bg-color: var(--color-bg);
  --el-table-tr-bg-color: var(--color-bg);
  --el-table-header-bg-color: var(--color-bg);
  --el-table-border-color: #ebeef5;
  --el-table-text-color: var(--color-text);
  --el-table-header-text-color: var(--color-text-secondary);
  --el-table-row-hover-bg-color: #f5f7fa;

  .el-table__cell {
    padding: 4px 0;
    height: 40px;
    box-sizing: border-box;
  }
}

.scan-dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  
  .qr-code-wrapper {
    padding: 16px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 16px;
    
    .qr-code-img {
      width: 200px;
      height: 200px;
      display: block;
    }
  }
  
  .patient-info-summary {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
    
    .patient-name { color: var(--color-text); font-weight: 500; }
    .patient-id { margin-left: 8px; }
  }
  
  .copy-link-section {
    width: 100%;
    margin-bottom: 16px;
    
    .link-input {
      :deep(.el-input__wrapper) {
        background: var(--color-bg);
      }
    }
  }
  
  .scan-tip {
    font-size: 13px;
    color: var(--color-text-placeholder);
    text-align: center;
    margin: 0;
  }
}

:deep(.scan-upload-dialog) {
  border-radius: 12px;
  
  .el-dialog__header {
    margin-right: 0;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
    }
  }
  
  .el-dialog__body {
    padding: 24px;
  }
}
</style>