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

<template>
  <scroll-view scroll-y :class="['page-scroll', elderClass]">
    <!-- 搜索 -->
    <view class="search-bar">
      <input
        class="search-input"
        placeholder="搜索患者姓名"
        :value="searchKeyword"
        @input="(e: any) => { searchKeyword = e.detail.value; debouncedSearch() }"
      />
    </view>

    <!-- Tab 筛选 -->
    <view class="tabs">
      <view
        v-for="t in TABS"
        :key="t.key"
        :class="['tab', activeTab === t.key ? 'tab--active' : '']"
        @tap="handleTabChange(t.key)"
      >
        <text>{{ t.label }}</text>
      </view>
    </view>

    <!-- 加载态 -->
    <Loading v-if="loading && prescriptions.length === 0" text="加载中..." />

    <!-- 空态 -->
    <EmptyState v-else-if="prescriptions.length === 0" icon="📋" title="暂无透析处方" />

    <!-- 处方列表 -->
    <view v-else class="prescription-list">
      <view
        v-for="p in prescriptions"
        :key="p.id"
        class="prescription-card"
        @tap="goDetail(p.id)"
      >
        <view class="prescription-card__top">
          <text class="prescription-card__patient">{{ patientNameMap[p.patient_id] || '未知患者' }}</text>
          <view class="prescription-card__status" :style="getStatusInlineStyle(p.status)">
            <text class="prescription-card__status-text">{{ getStatusLabel(p.status) }}</text>
          </view>
        </view>
        <view class="prescription-card__meta">
          <text class="prescription-card__type">
            {{ dialysisTypeLabel(p.dialyzer_model) }}
          </text>
          <text v-if="p.frequency_per_week" class="prescription-card__freq">
            {{ p.frequency_per_week }}次/周
          </text>
        </view>
        <text class="prescription-card__date">{{ p.created_at?.substring(0, 10) }}</text>
      </view>
    </view>

    <!-- 分页 -->
    <view v-if="total > pageSize" class="pagination">
      <text
        :class="['pagination__btn', page <= 1 ? 'disabled' : '']"
        @tap="page > 1 && (page = page - 1)"
      >上一页</text>
      <text class="pagination__info">{{ page }} / {{ totalPages }}</text>
      <text
        :class="['pagination__btn', page >= totalPages ? 'disabled' : '']"
        @tap="page < totalPages && (page = page + 1)"
      >下一页</text>
    </view>

    <!-- 创建按钮 -->
    <view class="fab" @tap="goCreate">
      <text class="fab__icon">+</text>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useElderClass } from '@/composables/useElderClass'
import { listDialysisPrescriptions } from '@/services/doctor/dialysis'
import type { DialysisPrescription } from '@/services/dialysis'
import { listPatients } from '@/services/doctor/patient'
import { getStatusInlineStyle, getStatusLabel } from '@/utils/statusTag'
import Loading from '@/components/Loading.vue'
import EmptyState from '@/components/EmptyState.vue'

const TABS = [
  { key: '', label: '全部' },
  { key: 'active', label: '生效中' },
  { key: 'inactive', label: '已停用' },
  { key: 'expired', label: '已过期' },
] as const

const { elderClass } = useElderClass()
const pageSize = 20

const prescriptions = ref<DialysisPrescription[]>([])
const patientNameMap = ref<Record<string, string>>({})
const activeTab = ref('')
const searchKeyword = ref('')
const loading = ref(true)
const total = ref(0)
const page = ref(1)

const totalPages = computed(() => Math.ceil(total.value / pageSize))

function handleTabChange(key: string) {
  activeTab.value = key
  page.value = 1
}

function dialysisTypeLabel(model?: string): string {
  if (!model) return '透析处方'
  return model
}

function goDetail(id: string) {
  uni.navigateTo({ url: `/pages-sub/doctor/prescription/detail/index?id=${id}` })
}

function goCreate() {
  uni.navigateTo({ url: '/pages-sub/doctor/prescription/create/index' })
}

let searchTimer: ReturnType<typeof setTimeout> | null = null
function debouncedSearch() {
  if (searchTimer) clearTimeout(searchTimer)
  searchTimer = setTimeout(() => {
    page.value = 1
    loadPrescriptions()
  }, 300)
}

async function loadPrescriptions() {
  loading.value = true
  try {
    const params: Record<string, unknown> = {
      page: page.value,
      page_size: pageSize,
    }
    if (activeTab.value) params.status = activeTab.value
    const res = await listDialysisPrescriptions(params)
    prescriptions.value = res.data || []
    total.value = res.total || 0
    // Resolve patient names
    const ids = [...new Set(prescriptions.value.map((p) => p.patient_id))]
    await resolvePatientNames(ids)
  } catch {
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

async function resolvePatientNames(ids: string[]) {
  const missing = ids.filter((id) => !patientNameMap.value[id])
  if (missing.length === 0) return
  try {
    // Load patients in batches to resolve names
    for (const id of missing) {
      try {
        const res = await listPatients({ page_size: 1 })
        // If we have data, try to find the patient
        const patient = res.data?.find((p) => p.id === id)
        if (patient) {
          patientNameMap.value = { ...patientNameMap.value, [id]: patient.name }
        }
      } catch { /* skip individual failures */ }
    }
  } catch { /* non-critical */ }
}

watch([page, activeTab], () => { loadPrescriptions() })

onShow(() => {
  loadPrescriptions()
})
</script>

<style lang="scss" scoped>
.page-scroll { min-height: 100vh; background: $bg; }

.search-bar {
  padding: 16px 24px;
  background: $card;
}

.search-input {
  height: 48px;
  border: 1px solid $bd;
  border-radius: $r-pill;
  padding: 0 24px;
  font-size: var(--tk-font-body);
  color: $tx;
  background: $bg;
  box-sizing: border-box;
}

.tabs {
  display: flex;
  background: $card;
  padding: 0 16px;
  border-bottom: 1px solid $bd;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 24px 0;
  font-size: var(--tk-font-body-lg);
  color: $tx2;
  position: relative;

  &--active {
    color: $pri;
    font-weight: 600;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 30%;
      right: 30%;
      height: 4px;
      background: $pri;
      border-radius: $r-xs;
    }
  }
}

.prescription-list {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.prescription-card {
  @include card;

  &:active { background: $bd-l; }

  &__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  &__patient {
    font-size: var(--tk-font-body-lg);
    font-weight: 600;
    color: $tx;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 16px;
  }

  &__status {
    display: inline-block;
    border-radius: 6px;
    padding: 2px 8px;
    flex-shrink: 0;
  }

  &__status-text {
    font-size: var(--tk-font-body);
    font-weight: 500;
  }

  &__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }

  &__type {
    @include tag($pri-l, $pri);
  }

  &__freq {
    font-size: var(--tk-font-body-sm);
    color: $tx2;
  }

  &__date {
    font-size: var(--tk-font-cap);
    color: $tx3;
  }
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 24px;

  &__btn {
    font-size: var(--tk-font-body);
    color: $pri;
    padding: 12px 24px;

    &.disabled { color: $tx3; }
  }

  &__info {
    font-size: var(--tk-font-body-sm);
    color: $tx2;
  }
}

.fab {
  position: fixed;
  right: 32px;
  bottom: 100px;
  width: 56px;
  height: 56px;
  background: $pri;
  border-radius: 50%;
  @include flex-center;
  box-shadow: $shadow-lg;

  &:active { opacity: 0.85; }
}

.fab__icon {
  color: $card;
  font-size: var(--tk-font-hero);
  font-weight: 300;
}
</style>