<template>
  <div class="case-list-container">
    <!-- 顶部工具栏 -->
    <div class="list-toolbar">
      <div class="toolbar-left">
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon>
          新增患者病例
        </el-button>
        <el-button @click="handleAIHealthSummary">
          AI健康纪要
        </el-button>
      </div>
      <div class="toolbar-right">
        <el-input
          v-model="searchQuery"
          placeholder="按姓名、病例编号、身份证号搜索"
          class="search-input"
          clearable
          @input="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button @click="handleRefresh">
          <el-icon><Refresh /></el-icon>
        </el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-wrapper">
      <el-table
        v-loading="loading"
        :data="caseList"
        style="width: 100%"
        @sort-change="handleSortChange"
        :default-sort="{ prop: 'caseNumber', order: 'descending' }"
      >
        <el-table-column prop="caseNumber" label="患者病例编号" min-width="120" sortable="custom">
          <template #default="{ row }">
            <span class="clickable-id" @click="handleView(row)">{{ row.caseNumber || '-' }}</span>
            <el-icon class="copy-icon" @click.stop="copyText(row.caseNumber)"><CopyDocument /></el-icon>
          </template>
        </el-table-column>
        
        <el-table-column prop="name" label="姓名" min-width="80">
          <template #default="{ row }">
            {{ maskName(row.name) }}
          </template>
        </el-table-column>

        <el-table-column prop="gender" label="性别" width="70">
          <template #default="{ row }">
            <div class="gender-cell">
              <el-icon :class="row.gender === '男' ? 'male-icon' : 'female-icon'">
                <Male v-if="row.gender === '男'" />
                <Female v-else />
              </el-icon>
              <span>{{ row.gender || '-' }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="age" label="年龄" width="70">
          <template #default="{ row }">
            {{ row.age ? `${row.age}岁` : '-' }}
          </template>
        </el-table-column>

        <el-table-column prop="birthday" label="出生日期" width="110">
          <template #default="{ row }">
            <div class="date-cell">
              <el-icon><Calendar /></el-icon>
              <span>{{ row.birthday || '-' }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="idCard" label="身份证号" min-width="160">
          <template #default="{ row }">
            <div class="id-card-cell">
              <el-icon><Postcard /></el-icon>
              <span>{{ maskIdCard(row.idCard) }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="bloodType" label="血型" width="80">
          <template #default="{ row }">
            <el-tag v-if="row.bloodType" :type="getBloodTagType(row.bloodType)" effect="light" size="small">
              {{ row.bloodType }}型
            </el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>

        <el-table-column prop="maritalStatus" label="婚姻状况" width="90">
          <template #default="{ row }">
            <el-tag v-if="row.maritalStatus" :type="getMaritalTagType(row.maritalStatus)" effect="plain" size="small">
              {{ row.maritalStatus }}
            </el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>

        <el-table-column prop="hospitalStatus" label="在院状态" width="90">
          <template #default="{ row }">
            <el-tag v-if="row.hospitalStatus" :type="getStatusTagType(row.hospitalStatus)" size="small">
              {{ row.hospitalStatus }}
            </el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>

        <el-table-column prop="doctorId" label="医生 ID" width="90">
          <template #default="{ row }">
            <div class="doctor-cell">
              <el-icon><User /></el-icon>
              <span>{{ row.doctorId || '-' }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button link type="primary" @click="handleView(row)">
                查看
              </el-button>
              <el-button link type="primary" @click="handleEdit(row)">
                编辑
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- AI健康纪要弹窗 -->
    <el-dialog
      v-model="summaryVisible"
      title="AI健康纪要"
      width="600px"
      align-center
    >
      <div v-if="aiSummary" class="ai-summary-content">
        <div class="summary-section">
          <h4>健康报告摘要</h4>
          <p>{{ aiSummary.summary }}</p>
        </div>
        <div class="summary-section">
          <h4>主要诊断</h4>
          <p>{{ aiSummary.diagnosis }}</p>
        </div>
        <div class="summary-section">
          <h4>关键指标</h4>
          <el-table :data="aiSummary.indicators" size="small" border>
            <el-table-column prop="label" label="指标" />
            <el-table-column prop="value" label="数值" />
            <el-table-column prop="reference" label="参考值" />
          </el-table>
        </div>
      </div>
      <template #footer>
        <el-button @click="summaryVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleExportSummary">导出纪要</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { 
  Plus, Search, Refresh, Male, Female, Calendar, 
  Postcard, User, View, EditPen, CopyDocument 
} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

// 模拟数据
const caseList = ref([
  {
    id: 1,
    caseNumber: 'P006',
    name: '李某某',
    gender: '男',
    age: 6,
    birthday: '2026-01-22',
    idCard: '452xxxxxxxxxxxx3220',
    bloodType: 'A',
    maritalStatus: '未婚',
    hospitalStatus: '出院',
    doctorId: 'D008'
  },
  {
    id: 2,
    caseNumber: '8888888888',
    name: '测试患者',
    gender: '女',
    age: 78,
    birthday: '1948-01-06',
    idCard: '512xxxxxxxxxxxx1318',
    bloodType: 'B',
    maritalStatus: '离异',
    hospitalStatus: '出院',
    doctorId: 'D001'
  }
]);

const loading = ref(false);
const searchQuery = ref('');
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(30);

const summaryVisible = ref(false);
const aiSummary = ref<any>(null);

const handleAIHealthSummary = () => {
  // 模拟 AI 生成过程
  ElMessage.info('正在生成 AI 健康纪要...');
  
  setTimeout(() => {
    aiSummary.value = {
      summary: '患者因“反复咳嗽、咳痰1周，加重伴发热2天”就诊。查体：体温38.5℃，双肺呼吸音粗，可闻及湿性啰音。血常规提示白细胞计数12.5×10⁹/L，中性粒细胞比例85%。诊断为急性支气管炎，予头孢类抗生素抗感染、氨溴索化痰治疗，建议休息、多饮水，3天后复诊。',
      diagnosis: '急性支气管炎',
      indicators: [
        { label: '体温', value: '38.5℃', reference: '36.0-37.3℃' },
        { label: '心率', value: '92次/分', reference: '60-100次/分' },
        { label: '白细胞计数', value: '12.5×10⁹/L', reference: '4-10×10⁹/L' },
        { label: '中性粒细胞比例', value: '85%', reference: '50-70%' }
      ]
    };
    summaryVisible.value = true;
  }, 1000);
};

const handleExportSummary = () => {
  ElMessage.success('纪要已导出');
};

const emit = defineEmits(['add', 'edit', 'view']);

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

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

// 标签样式
const getBloodTagType = (type: string) => {
  const map: any = { 'A': 'danger', 'B': 'warning', 'O': 'success', 'AB': 'primary' };
  return map[type] || 'info';
};

const getMaritalTagType = (status: string) => {
  const map: any = { '未婚': 'info', '已婚': 'success', '离异': 'warning', '丧偶': 'danger' };
  return map[status] || 'info';
};

const getStatusTagType = (status: string) => {
  const map: any = { '住院': 'primary', '出院': 'info', '转院': 'warning' };
  return map[status] || 'info';
};

// 交互逻辑
const handleSearch = () => {
  // 实现搜索逻辑
  console.log('Search:', searchQuery.value);
};

const handleRefresh = () => {
  loadData();
};

const handleAdd = () => {
  emit('add');
};

const handleEdit = (row: any) => {
  emit('edit', row);
};

const handleView = (row: any) => {
  emit('view', row);
};

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  loadData();
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  loadData();
};

const handleSortChange = ({ prop, order }: any) => {
  console.log('Sort:', prop, order);
};

const copyText = (text: string) => {
  navigator.clipboard.writeText(text);
  ElMessage.success('已复制到剪贴板');
};

const loadData = () => {
  loading.value = true;
  // 模拟加载
  setTimeout(() => {
    loading.value = false;
  }, 500);
};

onMounted(() => {
  loadData();
});
</script>

<style scoped lang="scss">
.case-list-container {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  
  .toolbar-right {
    display: flex;
    gap: 12px;
    
    .search-input {
      width: 300px;
    }
  }
}

.table-wrapper {
  flex: 1;
  overflow: hidden;
  
:deep(.el-table) {
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --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: #222222;
  --el-table-row-hover-bg-color: #f5f7fa;

  .el-table__body-wrapper, .el-table__header-wrapper {
    overflow-x: hidden !important;
  }

  .el-table__cell {
    padding: 4px 0;
    height: 40px;
    box-sizing: border-box;
  }
  
  th.el-table__cell {
    background-color: #ffffff !important;
    color: #222222 !important;
    height: 40px !important;
  }

  .clickable-id {
      color: #1e6fff;
      cursor: pointer;
      font-weight: 500;
      &:hover {
        text-decoration: underline;
      }
    }
    
    .copy-icon {
      margin-left: 8px;
      font-size: 14px;
      color: #909399;
      cursor: pointer;
      &:hover {
        color: #1e6fff;
      }
    }
  }
}

.gender-cell, .date-cell, .id-card-cell, .doctor-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6f6f6f;
  
  .el-icon {
    font-size: 16px;
  }
}

.male-icon { color: #1e6fff; }
.female-icon { color: #f56c6c; }

.action-buttons {
  display: flex;
  gap: 12px;
  
  :deep(.el-button) {
    padding: 0;
    height: auto;
    font-size: 14px;
    font-weight: 400;
    color: #1e6fff !important;
    background-color: transparent !important;
    border: none;
    
    &:hover {
      color: #409eff !important;
      background-color: transparent !important;
      text-decoration: underline;
    }
  }
}

.pagination-container {
  padding-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.ai-summary-content {
  .summary-section {
    margin-bottom: 24px;
    
    h4 {
      margin: 0 0 12px;
      font-size: 16px;
      color: var(--color-text);
      position: relative;
      padding-left: 12px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 4px;
        background: var(--color-primary);
        border-radius: 2px;
      }
    }
    
    p {
      margin: 0;
      font-size: 14px;
      line-height: 1.6;
      color: var(--color-text-secondary);
    }
  }
}
</style>