<template>
  <div class="examination-order">
    <!-- 根据主诉内容分析建议 -->
    <div class="analysis-section">
      <div class="analysis-title">
        根据主诉内容分析建议
      </div>
      <div class="analysis-content">
        {{ analysisSuggestion }}
      </div>
    </div>

    <!-- 检查项目表格 -->
    <div class="examination-table-section">
      <table class="examination-table">
        <thead>
        <tr>
          <th class="table-header">选择</th>
          <th class="table-header">检查项目</th>
          <th class="table-header">检查内容</th>
          <th class="table-header">检查目的</th>
          <th class="table-header">结果</th>
        </tr>
        </thead>
        <tbody>
        <tr
          v-for="(item, index) in allExaminations"
          :key="index"
          class="table-row"
        >
          <td class="table-cell checkbox-cell">
            <a-checkbox
              :checked="item.selected"
              @change="toggleExamination(item)"
            />
          </td>
          <td class="table-cell">
            <a-tooltip :title="item.name" placement="topLeft">
              <span class="text-ellipsis">{{ item.name }}</span>
            </a-tooltip>
          </td>
          <td class="table-cell">
            <a-tooltip :title="item.description" placement="topLeft">
              <span class="text-ellipsis">{{ item.description }}</span>
            </a-tooltip>
          </td>
          <td class="table-cell">
            <a-tooltip :title="item.purpose" placement="topLeft">
              <span class="text-ellipsis">{{ item.purpose }}</span>
            </a-tooltip>
          </td>
          <td class="table-cell result-cell">
            <div
              class="result-icon"
              :class="{ 'has-result': item.result }"
            >
              <img
                :src="resultIconUrl"
                alt="结果图标"
                class="result-svg"
              />
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 操作按钮 -->
    <div class="action-section">
      <a-button
        type="default"
        class="prescription-button"
        :disabled="selectedExaminations.length === 0"
        @click="createPrescription"
      >
        医嘱开单
      </a-button>
      <a-button
        type="primary"
        class="prescription-button"
        :disabled="selectedExaminations.length === 0"
        @click="submitAndAnalyze"
      >
        提交并分析
      </a-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 导入SVG图标
const resultIconUrl = require('@vue2-client/assets/svg/result-icon.svg')

// Props
const props = defineProps({
  patientComplaint: {
    type: String,
    required: true
  },
  doctorQuestions: {
    type: Array,
    default: () => []
  }
})

// Emits
const emit = defineEmits(['examinations-selected', 'proceed-to-next', 'action2'])

// 响应式数据
const analysisSuggestion = ref('')
const allExaminations = ref([])

// 计算属性
const selectedExaminations = computed(() => {
  return allExaminations.value.filter(item => item.selected)
})

// 生成检查建议
const generateExaminationSuggestions = () => {
  // 基于病人主诉生成相应的检查项目
  // 这里可以根据实际的AI分析结果来动态生成

  // 设置分析建议内容
  analysisSuggestion.value = `根据病人主诉分析，建议进行以下检查以明确诊断：
  1. 血常规检查：评估是否有感染或贫血情况
  2. C反应蛋白检测：判断是否存在急性炎症反应
  3. 胸部X线检查：排除肺部感染或病变
  4. 心电图检查：评估心脏功能状况`

  // 生成统一的检查项目列表
  allExaminations.value = [
    {
      id: 'blood_routine',
      name: '血常规',
      description: '检查血液细胞数量和形态',
      purpose: '评估贫血、感染等情况',
      status: 'pending',
      result: '',
      selected: false
    },
    {
      id: 'c_reactive_protein',
      name: 'C反应蛋白',
      description: '炎症指标检测',
      purpose: '评估感染和炎症程度',
      status: 'pending',
      result: '',
      selected: false
    },
    {
      id: 'chest_xray',
      name: '胸部X线',
      description: '肺部、心脏及胸腔检查',
      purpose: '排除肺部感染或病变',
      status: 'pending',
      result: '',
      selected: false
    },
    {
      id: 'electrocardiogram',
      name: '心电图',
      description: '心脏电活动检查',
      purpose: '评估心律和心肌情况',
      status: 'pending',
      result: '',
      selected: false
    },
    {
      id: 'blood_biochemistry',
      name: '血生化',
      description: '肝肾功能、血糖、血脂检测',
      purpose: '全面评估生化指标',
      status: 'pending',
      result: '',
      selected: false
    }
  ]
}

// 切换检查项目选择状态
const toggleExamination = (item) => {
  item.selected = !item.selected
}


// 医嘱开单
const createPrescription = () => {
  if (selectedExaminations.value.length === 0) return

  emit('proceed-to-next', {
    stage: 'prescription',
    selectedExaminations: selectedExaminations.value,
    patientComplaint: props.patientComplaint,
    analysisSuggestion: analysisSuggestion.value
  })

  console.log('创建医嘱开单，进入处方阶段')

  // 触发action2事件，传递选择的检查数据
  emit('action2', {
    selectedExaminations: selectedExaminations.value,
    patientComplaint: props.patientComplaint,
    analysisSuggestion: analysisSuggestion.value
  })
}

// 提交并分析
const submitAndAnalyze = () => {
  if (selectedExaminations.value.length === 0) return

  emit('proceed-to-next', {
    stage: 'diagnosis',
    selectedExaminations: selectedExaminations.value,
    patientComplaint: props.patientComplaint,
    analysisSuggestion: analysisSuggestion.value
  })

  console.log('提交并分析，进入诊断阶段')
}


// 初始化
onMounted(() => {
  generateExaminationSuggestions()
})
</script>

<style scoped>
.examination-order {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  overflow-y: auto;
}

/* 分析建议区域 */
.analysis-section {
  background: #FFFFFF;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
}

.analysis-title {
  font-family: 'Source Han Sans';
  font-weight: 700;
  font-size: 16px;
  color: #313131;
  margin-bottom: 12px;
}

.analysis-content {
  font-family: 'Source Han Sans';
  font-weight: normal;
  font-size: 16px;
  color: #313131;
  line-height: 1.6;
  white-space: pre-line;
}

/* 检查项目表格 */
.examination-table-section {
  width: 542px;
  background: #FFFFFF;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 400px;
  box-sizing: border-box;
}

.examination-table {
  width: 542px;
  min-width: 542px;
  border-collapse: collapse;
  table-layout: fixed;
  box-sizing: border-box;
}

.table-header {
  background: #FFFFFF;
  padding: 12px 16px;
  text-align: left;
  font-family: 'Source Han Sans';
  font-size: 16px;
  font-weight: bold;
  line-height: normal;
  color: #313131;
  border-bottom: 1px solid #e8e8e8;
  white-space: nowrap;
}

.table-header:first-child {
  width: 60px;
  text-align: center;
}

.table-header:nth-child(2) {
  width: 120px;
}

.table-header:nth-child(3) {
  width: 172px;
}

.table-header:nth-child(4) {
  width: 114px;
}

.table-header:nth-child(5) {
  width: 76px;
  text-align: center;
}

.checkbox-cell {
  text-align: center;
  width: 60px;
}

.table-cell:nth-child(2) {
  width: 120px;
}

.table-cell:nth-child(3) {
  width: 172px;
}

.table-cell:nth-child(4) {
  width: 114px;
}

.result-cell {
  text-align: center;
  width: 76px;
}

.table-cell {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-family: 'Source Han Sans';
  font-size: 16px;
  font-weight: normal;
  line-height: 230%;
  letter-spacing: 0em;
  font-feature-settings: "kern" on;
  color: #313131;
}

.text-ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.table-row:hover {
  background: #fafafa;
}

.table-row:last-child .table-cell {
  border-bottom: none;
}

.result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: #f5f5f5;
}

.result-icon.has-result {
  background: #0057FE;
}

.result-svg {
  width: 16px;
  height: 18px;
}

/* 操作按钮 */
.action-section {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #e8e8e8;
}

.prescription-button {
  width: 173px;
  height: 32px;
  border-radius: 6px;
  opacity: 1;
  background: #FFFFFF;
  box-sizing: border-box;
  border: 1px solid #9499A0;
  font-family: 'Source Han Sans';
  font-size: 16px;
  font-weight: normal;
  text-align: center;
  color: #313131;
}
</style>
