<template>
  <div class="prescription-advice">
    <!-- 医嘱建议区域 -->
    <div class="prescription-section">
      <div class="prescription-title">
        医嘱建议：
      </div>
      <div class="prescription-content">
        {{ prescriptionSuggestion || '暂无医嘱建议' }}
      </div>
    </div>

    <!-- 医嘱表格 -->
    <div class="prescription-table-section">
      <table class="prescription-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>
          <th class="table-header">用药目的</th>
          <th class="table-header">状态</th>
        </tr>
        </thead>
        <tbody>
        <tr
          v-for="(item, index) in prescriptionItems"
          :key="index"
          class="table-row"
        >
          <td class="checkbox-cell">
            <a-checkbox
              :checked="item.selected"
              @change="togglePrescription(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">{{ item.frequency }}</td>
          <td class="table-cell">{{ item.dosage }}</td>
          <td class="table-cell">{{ item.quantity }}</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">
            <a-tag :color="getStatusColor(item.status)">
              {{ getStatusText(item.status) }}
            </a-tag>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-buttons-section">
      <a-button
        type="primary"
        @click="addPrescription"
        class="action-button"
      >
        医嘱添加
      </a-button>
    </div>
  </div>
</template>

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

// Props
const props = defineProps({
  examinationOrder: {
    type: Object,
    required: true
  },
  aiDiagnosis: {
    type: Object,
    required: true
  }
})

// Emits
const emit = defineEmits(['prescription-updated', 'complete-consultation', 'action4'])

// 响应式数据
const prescriptionSuggestion = ref('')
const prescriptionItems = ref([])

// 计算属性已移除，直接在需要时使用filter

// 生成医嘱建议
const generatePrescriptionSuggestions = () => {
  // 生成医嘱建议文本
  prescriptionSuggestion.value = '根据诊断结果，建议采用抗感染治疗为主的综合治疗方案。注意休息，多饮水，定期复查。'

  // 生成医嘱项目列表
  prescriptionItems.value = [
    {
      id: 'amoxicillin',
      name: '阿莫西林胶囊',
      frequency: '每日3次',
      dosage: '500mg',
      quantity: '21粒',
      purpose: '抗细菌感染',
      status: 'pending',
      selected: false
    },
    {
      id: 'ibuprofen',
      name: '布洛芬缓释胶囊',
      frequency: '每日2次',
      dosage: '300mg',
      quantity: '12粒',
      purpose: '缓解症状',
      status: 'pending',
      selected: false
    },
    {
      id: 'vitamin_c',
      name: '维生素C片',
      frequency: '每日1次',
      dosage: '100mg',
      quantity: '30片',
      purpose: '增强免疫力',
      status: 'pending',
      selected: false
    }
  ]
}

// 切换医嘱选择状态
const togglePrescription = (item) => {
  item.selected = !item.selected
}

// 获取状态颜色
const getStatusColor = (status) => {
  switch (status) {
    case 'completed':
      return 'green'
    case 'pending':
      return 'orange'
    case 'cancelled':
      return 'red'
    default:
      return 'blue'
  }
}

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'completed':
      return '已开立'
    case 'pending':
      return '待开立'
    case 'cancelled':
      return '已取消'
    default:
      return '未知'
  }
}

// 添加医嘱
const addPrescription = () => {
  // TODO: 实现医嘱添加功能
  console.log('添加医嘱')

  // 触发action4事件，传递选择的医嘱信息
  emit('action4', {
    selectedPrescriptions: prescriptionItems.value.filter(item => item.selected),
    examinationOrder: props.examinationOrder,
    aiDiagnosis: props.aiDiagnosis,
    prescriptionSuggestion: prescriptionSuggestion.value
  })
}

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

<style scoped>
/* 医嘱建议区域 */
.prescription-section {
  background: #FFFFFF;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
  margin-bottom: 16px;
}

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

.prescription-content {
  color: #313131;
  font-family: 'Source Han Sans';
  font-weight: normal;
  font-size: 16px;
  margin-bottom: 16px;
}

/* 医嘱表格 */
.prescription-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;
}

.prescription-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: 50px;
  text-align: center;
}

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

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

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

.table-header:nth-child(5) {
  width: 70px;
}

.table-header:nth-child(6) {
  width: 110px;
}

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

.checkbox-cell {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  text-align: center;
  width: 50px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

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

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

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

.table-cell:nth-child(5) {
  width: 70px;
}

.table-cell:nth-child(6) {
  width: 110px;
}

.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;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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;
}

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

.action-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;
  line-height: normal;
  text-align: center;
  color: #313131;
}
</style>
