<template>
  <div class="diagnosis-management-page">
    <!-- Top Toolbar -->
    <div class="toolbar">
      <el-button class="tool-button" type="primary">
        <el-icon><CirclePlus /></el-icon>
        新增
      </el-button>
      <el-button class="tool-button">
        <el-icon><DocumentAdd /></el-icon>
        保存
      </el-button>
      <el-button class="tool-button">
        <el-icon><CopyDocument /></el-icon>
        快速复制
      </el-button>
    </div>

    <!-- Filter Options -->
    <div class="filter-section">
      <div class="filter-row">
        <span class="filter-label">分类</span>
        <el-radio-group v-model="filters.category" class="category-group">
          <el-radio label="西医">
            <span class="active-radio">西医</span>
          </el-radio>
          <el-radio label="中医">中医</el-radio>
        </el-radio-group>

        <span class="filter-label type-label">类型</span>
        <el-select
          v-model="filters.type"
          class="filter-select type-select"
          size="small"
        >
          <el-option label="初步诊断" value="初步诊断" />
          <el-option label="入院诊断" value="入院诊断" />
          <el-option label="出院诊断" value="出院诊断" />
        </el-select>
      </div>

      <div class="filter-row">
        <span class="filter-label">诊断</span>
        <el-select
          v-model="filters.diagnosis"
          class="filter-select diagnosis-select"
          size="small"
        >
          <el-option label="请选择" value="" />
        </el-select>

        <span class="filter-label desc-label">描述</span>
        <el-input
          v-model="filters.description"
          class="filter-input description-input"
          size="small"
        />
      </div>

      <div class="filter-row">
        <span class="filter-label">入院病情</span>
        <el-select
          v-model="filters.admissionCondition"
          class="filter-select"
          size="small"
        >
          <el-option label="请选择" value="" />
          <el-option label="有" value="有" />
          <el-option label="临床未确定" value="临床未确定" />
        </el-select>

        <span class="filter-label discharge-label">出院转归</span>
        <el-select
          v-model="filters.dischargeOutcome"
          class="filter-select"
          size="small"
        >
          <el-option label="请选择" value="" />
          <el-option label="好转" value="好转" />
          <el-option label="死亡" value="死亡" />
        </el-select>
      </div>
    </div>

    <!-- Diagnosis List Section -->
    <div class="diagnosis-list-section">
      <div class="section-title">诊断列表</div>

      <div class="diagnosis-filters">
        <el-button-group>
          <el-button type="primary" class="filter-btn active">
            全部诊断
          </el-button>
          <el-button class="filter-btn">出院诊断</el-button>
          <el-button class="filter-btn">初步诊断</el-button>
          <el-button class="filter-btn">入院诊断</el-button>
        </el-button-group>
      </div>

      <div class="table-actions">
        <el-button class="action-btn" type="danger" plain>
          <el-icon><Delete /></el-icon>
          删除
        </el-button>
        <el-button class="action-btn" plain>
          <el-icon><ArrowUp /></el-icon>
          上移
        </el-button>
        <el-button class="action-btn" plain>
          <el-icon><ArrowDown /></el-icon>
          下移
        </el-button>
        <el-button class="action-btn" plain>
          <el-icon><Plus /></el-icon>
          添加子诊断
        </el-button>
      </div>

      <div class="table-container">
        <el-table :data="diagnosisData" border stripe style="width: 100%">
          <el-table-column type="index" label="" width="40" />
          <el-table-column prop="type" label="类型" width="100" />
          <el-table-column prop="category" label="分类" width="100" />
          <el-table-column prop="level" label="" width="40" />
          <el-table-column prop="diagnosisName" label="诊断名称" width="200" />
          <el-table-column prop="code" label="编码" width="120" />
          <el-table-column prop="description" label="诊断描述" width="200" />
          <el-table-column
            prop="admissionCondition"
            label="入院病情"
            width="100"
          />
          <el-table-column
            prop="dischargeOutcome"
            label="出院转归"
            width="100"
          />
          <el-table-column prop="recorder" label="录入" width="100" />
        </el-table>
      </div>
    </div>

    <!-- Bottom Action Buttons -->
    <div class="bottom-actions">
      <el-button type="success" class="action-btn primary-btn">
        住院诊断
      </el-button>
      <el-button class="action-btn">住院手术</el-button>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import {
  CirclePlus,
  DocumentAdd,
  CopyDocument,
  Delete,
  ArrowUp,
  ArrowDown,
  Plus,
} from "@element-plus/icons-vue";

const filters = reactive({
  category: "西医",
  type: "初步诊断",
  diagnosis: "",
  description: "",
  admissionCondition: "",
  dischargeOutcome: "",
});

const diagnosisData = ref([
  {
    type: "出院诊断",
    category: "西医诊断",
    level: "主",
    diagnosisName: "代谢性酸中毒",
    code: "E87.201",
    description: "代谢性酸中毒",
    admissionCondition: "有",
    dischargeOutcome: "好转",
    recorder: "杨婧颖",
  },
  {
    type: "初步诊断",
    category: "西医诊断",
    level: "主",
    diagnosisName: "痛风性肾病",
    code: "M10.30x091",
    description: "痛风性肾病",
    admissionCondition: "有",
    dischargeOutcome: "死亡",
    recorder: "许林",
  },
  {
    type: "初步诊断",
    category: "西医诊断",
    level: "次",
    diagnosisName: "癌",
    code: "D48.901",
    description: "癌",
    admissionCondition: "临床未确定",
    dischargeOutcome: "",
    recorder: "许林",
  },
  {
    type: "入院诊断",
    category: "西医诊断",
    level: "主",
    diagnosisName: "糖尿病",
    code: "E14.900x001",
    description: "糖尿病",
    admissionCondition: "有",
    dischargeOutcome: "",
    recorder: "孔伟",
  },
  {
    type: "入院诊断",
    category: "西医诊断",
    level: "次",
    diagnosisName: "呼吸心跳骤停",
    code: "I46.901",
    description: "呼吸心跳骤停",
    admissionCondition: "有",
    dischargeOutcome: "",
    recorder: "孔伟",
  },
]);
</script>

<style scoped>
/* 样式同原，可直接复用 */
.diagnosis-management-page {
  font-family: Arial, sans-serif;
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}
.toolbar {
  display: flex;
  gap: 5px;
  padding: 5px 0;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
}
.tool-button {
  font-size: 12px;
  padding: 5px 10px;
}
.filter-section {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  margin-bottom: 10px;
}
.filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.filter-label {
  font-size: 12px;
  margin-right: 5px;
  min-width: 50px;
  text-align: right;
}
.type-label,
.desc-label,
.discharge-label {
  margin-left: 20px;
}
.category-group {
  margin-right: 20px;
}
.filter-select {
  min-width: 150px;
}
.type-select {
  width: 150px;
}
.diagnosis-select {
  width: 200px;
}
.description-input {
  flex: 1;
  margin-right: 20px;
}
.active-radio {
  color: #2196f3;
  font-weight: bold;
}
.diagnosis-list-section {
  margin-top: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.section-title {
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
}
.diagnosis-filters {
  padding: 10px;
  border-bottom: 1px solid #e0e0e0;
}
.filter-btn {
  font-size: 12px;
  padding: 5px 10px;
}
.filter-btn.active {
  background-color: #2196f3;
  color: white;
}
.table-actions {
  padding: 5px 10px;
  display: flex;
  gap: 5px;
  background-color: #f5f5f5;
}
.action-btn {
  font-size: 12px;
  padding: 3px 8px;
}
.table-container {
  flex: 1;
  overflow-y: auto;
}
.bottom-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}
.primary-btn {
  background-color: #4caf50;
  color: white;
}
.common-diagnoses-panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  height: 100%;
  background-color: white;
  border-left: 1px solid #ddd;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}
.panel-header {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
}
.close-btn {
  padding: 2px;
  font-size: 12px;
}
.panel-tabs {
  border-bottom: 1px solid #ddd;
}
.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
</style>
