hms/apps/miniprogram-uniapp/src/pages-sub/doctor/dialysis/detail/index.vue

<template>
  <Loading v-if="pageLoading" text="加载中..." />
  <ErrorState v-else-if="error || !record" text="记录加载失败" :on-retry="loadData" />
  <scroll-view v-else scroll-y :class="['page-scroll', elderClass]">
    <view class="page-content">
      <!-- 基本信息 -->
      <view class="info-card">
        <view class="info-header">
          <text class="patient-name">{{ recordPatientName }}</text>
          <view class="status-tag" :style="getStatusInlineStyle(record.status)">
            <text class="status-tag__text">{{ getStatusLabel(record.status) }}</text>
          </view>
        </view>

        <view class="info-row">
          <text class="info-label">透析日期</text>
          <text class="info-value">{{ record.dialysis_date }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">透析方式</text>
          <text class="info-value">{{ dialysisTypeLabel(record.dialysis_type) }}</text>
        </view>
        <view v-if="record.start_time" class="info-row">
          <text class="info-label">开始时间</text>
          <text class="info-value">{{ record.start_time }}</text>
        </view>
        <view v-if="record.end_time" class="info-row">
          <text class="info-label">结束时间</text>
          <text class="info-value">{{ record.end_time }}</text>
        </view>
        <view v-if="record.dialysis_duration" class="info-row">
          <text class="info-label">透析时长</text>
          <text class="info-value">{{ record.dialysis_duration }} 分钟</text>
        </view>
      </view>

      <!-- 体征数据 -->
      <view class="section-card">
        <text class="section-title">体征数据</text>
        <view class="vitals-grid">
          <view v-if="record.pre_bp_systolic != null" class="vital-item">
            <text class="vital-value">{{ record.pre_bp_systolic }}/{{ record.pre_bp_diastolic }}</text>
            <text class="vital-label">透前血压 mmHg</text>
          </view>
          <view v-if="record.post_bp_systolic != null" class="vital-item">
            <text class="vital-value">{{ record.post_bp_systolic }}/{{ record.post_bp_diastolic }}</text>
            <text class="vital-label">透后血压 mmHg</text>
          </view>
          <view v-if="record.pre_weight != null" class="vital-item">
            <text class="vital-value">{{ record.pre_weight }}</text>
            <text class="vital-label">透前体重 kg</text>
          </view>
          <view v-if="record.post_weight != null" class="vital-item">
            <text class="vital-value">{{ record.post_weight }}</text>
            <text class="vital-label">透后体重 kg</text>
          </view>
          <view v-if="record.ultrafiltration_volume != null" class="vital-item">
            <text class="vital-value">{{ record.ultrafiltration_volume }}</text>
            <text class="vital-label">超滤量 ml</text>
          </view>
          <view v-if="record.blood_flow_rate != null" class="vital-item">
            <text class="vital-value">{{ record.blood_flow_rate }}</text>
            <text class="vital-label">血流量 ml/min</text>
          </view>
        </view>
      </view>

      <!-- 并发症 -->
      <view v-if="record.complication_notes" class="section-card">
        <text class="section-title">并发症记录</text>
        <view class="warning-block">
          <text class="warning-block__text">{{ record.complication_notes }}</text>
        </view>
      </view>

      <!-- 备注 -->
      <view v-if="record.symptoms && Object.keys(record.symptoms).length > 0" class="section-card">
        <text class="section-title">备注</text>
        <text class="notes-text">{{ JSON.stringify(record.symptoms, null, 2) }}</text>
      </view>

      <!-- 审核操作 -->
      <view v-if="record.status === 'pending'" class="action-card">
        <view
          :class="['action-btn', reviewing ? 'disabled' : '']"
          @tap="reviewing ? undefined : handleReview"
        >
          <text class="action-btn-text">{{ reviewing ? '处理中...' : '审核通过' }}</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useElderClass } from '@/composables/useElderClass'
import { getDialysisRecordById, reviewDialysisRecord } from '@/services/doctor/dialysis'
import type { DialysisRecord } from '@/services/dialysis'
import { getStatusInlineStyle, getStatusLabel } from '@/utils/statusTag'
import Loading from '@/components/Loading.vue'
import ErrorState from '@/components/ErrorState.vue'

const DIALYSIS_TYPE_MAP: Record<string, string> = {
  hemodialysis: '血液透析',
  peritoneal: '腹膜透析',
  hemofiltration: '血液滤过',
}

const { elderClass } = useElderClass()

const record = ref<DialysisRecord | null>(null)
const recordPatientName = ref('')
const pageLoading = ref(true)
const error = ref(false)
const reviewing = ref(false)
let recordId = ''

function dialysisTypeLabel(type: string): string {
  return DIALYSIS_TYPE_MAP[type] || type
}

async function loadData() {
  if (!recordId) return
  pageLoading.value = true
  error.value = false
  try {
    const data = await getDialysisRecordById(recordId)
    record.value = data
  } catch {
    error.value = true
  } finally {
    pageLoading.value = false
  }
}

async function handleReview() {
  if (!record.value) return
  reviewing.value = true
  try {
    const updated = await reviewDialysisRecord(recordId, record.value.version)
    record.value = updated
    uni.showToast({ title: '审核通过', icon: 'success' })
  } catch {
    uni.showToast({ title: '审核失败', icon: 'none' })
  } finally {
    reviewing.value = false
  }
}

onLoad((query) => {
  recordId = query?.id || ''
  if (!recordId) { error.value = true; pageLoading.value = false; return }
  loadData()
})
</script>

<style lang="scss" scoped>
.page-scroll { min-height: 100vh; background: $bg; }
.page-content { padding: 24px 0 120px; }

.info-card {
  @include card;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.patient-name {
  font-size: var(--tk-font-title);
  font-weight: 600;
  color: $tx;
}

.status-tag {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 8px;
}

.status-tag__text {
  font-size: var(--tk-font-body);
  font-weight: 500;
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

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

.info-label {
  font-size: var(--tk-font-cap);
  color: $tx3;
}

.info-value {
  font-size: var(--tk-font-body);
  color: $tx;
  font-weight: 500;
}

.section-card {
  @include card;
}

.section-title {
  font-size: var(--tk-font-body);
  font-weight: 600;
  color: $tx;
  margin-bottom: 16px;
  display: block;
}

.vitals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.vital-item {
  background: $pri-l;
  border-radius: $r-sm;
  padding: 16px;
  text-align: center;
}

.vital-value {
  @include serif-number;
  font-size: var(--tk-font-num);
  font-weight: 700;
  color: $pri;
  display: block;
  margin-bottom: 4px;
}

.vital-label {
  font-size: var(--tk-font-cap);
  color: $tx2;
}

.warning-block {
  background: $wrn-l;
  border-radius: $r-sm;
  padding: 16px;
}

.warning-block__text {
  font-size: var(--tk-font-body-sm);
  color: $wrn;
  line-height: 1.6;
}

.notes-text {
  font-size: var(--tk-font-body-sm);
  color: $tx2;
  line-height: 1.6;
}

.action-card {
  @include card;
}

.action-btn {
  @include btn-primary;
}

.action-btn.disabled { opacity: 0.5; }

.action-btn-text {
  color: $card;
  font-size: var(--tk-font-body-lg);
  font-weight: 600;
}
</style>