<template>
  <div class="order-verify-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>医嘱校对列表</span>
          <el-button type="primary" @click="handleRefresh">刷新</el-button>
        </div>
      </template>

      <el-table 
        :data="verifyList" 
        border 
        stripe 
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="startTime" label="开始时间" width="160" />
        <el-table-column prop="drugName" label="药品/项目名称" min-width="150" show-overflow-tooltip />
        <el-table-column prop="singleDose" label="单次剂量" width="100" />
        <el-table-column prop="totalAmount" label="总量" width="100" />
        <el-table-column prop="totalCost" label="总金额" width="100">
          <template #default="{ row }">
            ¥{{ row.totalCost?.toFixed(2) || '0.00' }}
          </template>
        </el-table-column>
        <el-table-column prop="frequencyRoute" label="频次/用法" width="120" />
        <el-table-column prop="orderingDoctor" label="开嘱医生" width="100" />
        <el-table-column prop="stopTime" label="停嘱时间" width="160" />
        <el-table-column prop="stoppingDoctor" label="停嘱医生" width="100" />
        <el-table-column prop="diagnosis" label="诊断" min-width="120" show-overflow-tooltip />
        <el-table-column label="皮试" width="90" align="center">
          <template #default="{ row }">
            <el-tag v-if="row.skinTest" type="danger" effect="dark" size="small">需皮试</el-tag>
            <span v-else class="text-muted">-</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="{ row }">
            <el-button 
              type="primary" 
              size="small" 
              :disabled="row.status === 'VERIFIED'"
              @click="handleVerify(row)"
            >
              {{ row.status === 'VERIFIED' ? '已校对' : '校对' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

interface OrderVerifyItem {
  id: number
  startTime: string
  drugName: string
  singleDose: string
  totalAmount: string
  totalCost: number
  frequencyRoute: string
  orderingDoctor: string
  stopTime: string | null
  stoppingDoctor: string | null
  diagnosis: string
  skinTest: boolean
  orderContent: string
  status: string
}

const verifyList = ref<OrderVerifyItem[]>([])
const loading = ref(false)

const fetchVerifyList = async () => {
  loading.value = true
  try {
    // 实际调用：const res = await api.getNurseVerifyList(currentPatientId)
    // 此处模拟结构化数据返回，替代原长文本拼接
    verifyList.value = [
      {
        id: 1,
        startTime: '2026-05-26 09:00:00',
        drugName: '头孢哌酮钠舒巴坦钠',
        singleDose: '1g',
        totalAmount: '3g',
        totalCost: 150.00,
        frequencyRoute: '静滴 tid',
        orderingDoctor: 'doctor1',
        stopTime: null,
        stoppingDoctor: null,
        diagnosis: '肺部感染',
        skinTest: true,
        orderContent: '头孢哌酮钠舒巴坦钠 1g 静滴 tid',
        status: 'ACTIVE'
      }
    ]
  } catch (error) {
    ElMessage.error('获取校对列表失败')
  } finally {
    loading.value = false
  }
}

const handleVerify = async (row: OrderVerifyItem) => {
  try {
    // 实际调用：await api.verifyOrder(row.id)
    row.status = 'VERIFIED'
    ElMessage.success(`医嘱 ${row.drugName} 校对成功`)
  } catch (error) {
    ElMessage.error('校对失败')
  }
}

const handleRefresh = () => {
  fetchVerifyList()
}

onMounted(() => {
  fetchVerifyList()
})
</script>

<style scoped>
.order-verify-container {
  padding: 16px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.text-muted {
  color: #909399;
}
</style>
