ChronicDisease_UniApp/src/pages/public/health/details/physical.vue

<template>
  <CustomNav title="体格数据" leftType="back" />
  <view class="page">

    <view class="header">
      <view class="month-selector">
        <button class="btn" @click="prevPeriod">‹</button>
        <view class="period-controls">
          <picker mode="multiSelector" :value="pickerValue" :range="pickerRange" @change="onPickerChange">
            <view class="month-label">{{ displayPeriod }}</view>
          </picker>
          <view class="view-toggle">
            <button :class="['toggle-btn', { active: viewMode === 'month' }]" @click="setViewMode('month')">月</button>
            <button :class="['toggle-btn', { active: viewMode === 'week' }]" @click="setViewMode('week')">周</button>
          </view>
                  <view class="metric-toggle" style="margin-top:8rpx; display:flex; gap:8rpx;">
                    <button :class="['toggle-btn', { active: selectedMetric === 'all' }]" @click.prevent="selectedMetric = 'all'">全部</button>
                    <button :class="['toggle-btn', { active: selectedMetric === 'height' }]" @click.prevent="selectedMetric = 'height'">身高</button>
                    <button :class="['toggle-btn', { active: selectedMetric === 'weight' }]" @click.prevent="selectedMetric = 'weight'">体重</button>
                    <button :class="['toggle-btn', { active: selectedMetric === 'bmi' }]" @click.prevent="selectedMetric = 'bmi'">BMI</button>
                  </view>
        </view>
        <button class="btn" @click="nextPeriod">›</button>
      </view>
    </view>

    <!-- 趋势图 - 简化canvas设置 -->
    <view class="chart-wrap">
  <view class="chart-header">本月趋势</view>
      <canvas 
        canvas-id="bpChart" 
        id="bpChart" 
        class="chart-canvas"
        :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
      ></canvas>
    </view>

    <view class="content">
  <view class="summary">共 {{ records.length }} 条记录，本月平均：{{ averageHeight }} cm / {{ averageWeight }} kg；平均 BMI：{{ averageBMI }}</view>

      <view class="list">
        <view v-if="records.length === 0" class="empty">暂无记录</view>
        <view v-for="item in records" :key="item.id" class="list-item" :style="{ backgroundColor: getItemColor(item.h, item.w) }">
          <view class="date">{{ item.date }}</view>
          <view class="value">{{ item.h }} cm / {{ item.w }} kg · BMI {{ item.bmi }}</view>
        </view>
      </view>
    </view>

    <!-- 删除了添加按钮和相关功能，因为这是公共页面，仅供医生或家属查看患者健康数据 -->
    <!-- Removed add button and related functions because this is a public page for doctors or family members to view patient health data -->

  </view>

</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount, getCurrentInstance } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { createUChart } from '@/composables/useUChart'
import CustomNav from '@/components/custom-nav.vue'

import ScaleRuler from '@/components/scale-ruler.vue'
import { getWeekStart, getWeekEnd, formatDisplayDate, formatPickerDate, daysInMonth, getTodayStart, isAfterTodayDate, isMonthAfterToday, isWeekAfterToday } from '@/utils/date'
import { getWindowWidth, rpxToPx } from '@/utils/platform'
import { listPhysicalByBoundUser } from '@/api/physical'

type RecordItem = { id: string; date: string; h: number; w: number; bmi: number }

// 当前展示年月
const current = ref(new Date())
// 使用 multiSelector 的索引形式： [yearOffset从2000起, month(0-11)]
const pickerValue = ref([current.value.getFullYear() - 2000, current.value.getMonth()])

// 视图模式：'month' 或 'week'
const viewMode = ref<'month' | 'week'>('month')

// 年月选择器的选项范围（与 height/weight 保持一致）
const pickerRange = ref([
  Array.from({ length: 50 }, (_, i) => `${2000 + i}年`),
  Array.from({ length: 12 }, (_, i) => `${i + 1}月`)
])

// 明确的canvas尺寸（将由 getCanvasSize 初始化以匹配设备宽度）
const canvasWidth = ref(700) // 初始值，会在 mounted 时覆盖
const canvasHeight = ref(320)

// 获取Canvas实际尺寸的函数 - 参考微信小程序示例使用固定尺寸
function getCanvasSize(): Promise<{ width: number; height: number }> {
  return new Promise(async (resolve) => {
    const width = await getWindowWidth().catch(() => 375)
    const height = Math.round((320 / 750) * width)
    resolve({ width, height })
  })
}

// 使用 formatPickerDate 从 src/utils/date.ts

const displayYear = computed(() => current.value.getFullYear())
const displayMonth = computed(() => current.value.getMonth() + 1)

// 显示周期（支持月/周）
const displayPeriod = computed(() => {
  if (viewMode.value === 'month') {
    return `${displayYear.value}年 ${displayMonth.value}月`
  } else {
    const weekStart = getWeekStart(current.value)
    const weekEnd = getWeekEnd(current.value)
    return `${formatDisplayDate(weekStart)} - ${formatDisplayDate(weekEnd)}`
  }
})

const records = ref<RecordItem[]>([])
const patientId = ref<string | null>(null)
const bindingType = ref<string | null>(null)

// 页面加载时检查是否传入了患者ID和绑定类型
onLoad((options) => {
  if (options && options.patientId && options.bindingType) {
    patientId.value = options.patientId
    bindingType.value = options.bindingType
  } else {
    // 如果没有传入patientId或bindingType，则弹窗提示并返回上一页
    uni.showToast({
      title: '未携带必要参数',
      icon: 'none',
      duration: 2000
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 2000)
  }
})

// 将 records 聚合为每天一个点（取最新记录）
function aggregateDaily(recordsArr: RecordItem[], year: number, month: number) {
  const map = new Map<number, RecordItem>()
  for (const r of recordsArr) {
    const parts = r.date.split('-')
    if (parts.length >= 3) {
      const y = parseInt(parts[0], 10)
      const m = parseInt(parts[1], 10) - 1
      const d = parseInt(parts[2], 10)
      if (y === year && m === month) {
        // 覆盖同一天，保留最新的（数组头部为最新）
        map.set(d, r)
      }
    }
  }
  // 返回按日索引的数组
  return map
}

async function fetchRecords() {
  let startTime = ''
  let endTime = ''
  if (viewMode.value === 'month') {
    const y = current.value.getFullYear()
    const m = current.value.getMonth()
    startTime = new Date(y, m, 1).toISOString()
    // 将结束时间设为当日 23:59:59.999，避免 ISO 时间为当天 00:00
    const endDate = new Date(y, m + 1, 0)
    endDate.setHours(23, 59, 59, 999)
    endTime = endDate.toISOString()
  } else {
    const weekStart = getWeekStart(current.value)
    const weekEnd = getWeekEnd(current.value)
    // 确保周结束时间也是该日的 23:59:59.999
    startTime = weekStart.toISOString()
    try {
      const we = new Date(weekEnd)
      we.setHours(23, 59, 59, 999)
      endTime = we.toISOString()
    } catch (e) {
      endTime = weekEnd.toISOString()
    }
  }
  // 在发送请求前显示 loading 提示；使用 finally 确保在任何情况下都隐藏
  try {
    if (typeof uni !== 'undefined' && uni.showLoading) uni.showLoading({ title: '加载中...' })
  } catch (e) {
    // ignore
  }

  try {
    // 使用新的 ByBoundUser 接口
    if (patientId.value && bindingType.value) {
      const params = {
        patientUserId: patientId.value,
        bindingType: bindingType.value,
        baseQueryRequest: { 
          pageNum: 1, 
          pageSize: 100, 
          startTime, 
          endTime 
        }
      }
      
      const res = await listPhysicalByBoundUser(params)
      if (res.statusCode === 401) {
        // Token 无效，清除并跳转登录
        uni.removeStorageSync('token')
        uni.removeStorageSync('role')
        uni.reLaunch({ url: '/pages/public/login/index' })
        return
      }
      if ((res.data as any) && (res.data as any).code === 200) {
        const apiRecords = (res.data as any).data?.records || []
        // 将后端记录映射为前端格式：确保 height/weight 为数字，优先使用后端返回的 bmi，若无则在客户端计算并保留 1 位小数
        records.value = apiRecords.map((item: any) => {
          const h = item.height == null ? 0 : Number(item.height)
          const w = item.weight == null ? 0 : Number(item.weight)
          let bmiVal: number | null = null
          if (item.bmi != null && item.bmi !== '') {
            const parsed = Number(item.bmi)
            if (!Number.isNaN(parsed)) bmiVal = Math.round(parsed * 10) / 10
          }
          if (bmiVal == null && h > 0 && w > 0) {
            bmiVal = Math.round((w / ((h / 100) * (h / 100))) * 10) / 10
          }
          return {
            id: String(item.id),
            date: formatDisplayDate(new Date(item.measureTime)),
            h,
            w,
            bmi: bmiVal ?? 0
          }
        })

        rebuildChart()
      } else {
        console.error('Fetch records failed', res.data)
      }
    }
  } catch (e) {
    console.error('Fetch records error', e)
  } finally {
    try {
      if (typeof uni !== 'undefined' && uni.hideLoading) uni.hideLoading()
    } catch (e) {
      // ignore
    }
  }
}

const averageHeight = computed(() => {
  if (records.value.length === 0) return '--'
  const sum = records.value.reduce((s, r) => s + r.h, 0)
  return Math.round(sum / records.value.length)
})
const averageWeight = computed(() => {
  if (records.value.length === 0) return '--'
  const sum = records.value.reduce((s, r) => s + r.w, 0)
  return Math.round(sum / records.value.length)
})
const averageBMI = computed(() => {
  if (records.value.length === 0) return '--'
  const sum = records.value.reduce((s, r) => s + (r.bmi || 0), 0)
  return Math.round((sum / records.value.length) * 10) / 10
})

// 根据血压值获取颜色
function getItemColor(h: number, w: number): string {
  // 根据 BMI 简单分类
  if (!h || !w) return '#ffffff'
  const bmi = w / ((h / 100) * (h / 100))
  if (bmi < 18.5) return '#fff3cd' // 偏瘦 - 黄
  if (bmi < 25) return '#e8f5e8' // 正常 - 绿
  if (bmi < 30) return '#fff3cd' // 超重 - 黄
  return '#f8d7da' // 肥胖 - 红
}

// 使用共享日期工具 (src/utils/date.ts)

// 使用可复用的 chart composable，支持多序列
const vm = getCurrentInstance()

// 选择显示的指标：'all' | 'height' | 'weight' | 'bmi'
const selectedMetric = ref<'all'|'height'|'weight'|'bmi'>('all')

let bpChart: any = null

function createChartForMetric(metric: 'all'|'height'|'weight'|'bmi') {
  const seriesMap: Record<string, { names: string[]; accessors: Array<(r:any)=>number>; colors: string[] }> = {
    all: { names: ['身高','体重','BMI'], accessors: [ (r: RecordItem) => r.h, (r: RecordItem) => r.w, (r: RecordItem) => r.bmi ], colors: ['#ff6a00', '#007aff', '#28c76f'] },
    height: { names: ['身高'], accessors: [ (r: RecordItem) => r.h ], colors: ['#ff6a00'] },
    weight: { names: ['体重'], accessors: [ (r: RecordItem) => r.w ], colors: ['#007aff'] },
    bmi: { names: ['BMI'], accessors: [ (r: RecordItem) => r.bmi ], colors: ['#28c76f'] }
  }
  const cfg = seriesMap[metric]
  return createUChart({
    canvasId: 'bpChart',
    vm,
    getCanvasSize,
    seriesNames: cfg.names,
    valueAccessors: cfg.accessors,
    colors: cfg.colors
  })
}

// 延迟创建 chart：在 mounted 时先读取路由参数（metric），然后创建 chart 并绘制
function initMetricFromRoute() {
  try {
    // 在 uni-app 中，可通过 getCurrentPages 获取当前页面的 options（包含 query）
    const pages = typeof getCurrentPages === 'function' ? getCurrentPages() : []
    const currentPage = pages[pages.length - 1] || {}
  const opts = (currentPage && (currentPage as any).options) ? (currentPage as any).options : {}
  const metricParam = opts.metric || opts?.metric
    if (metricParam && ['all', 'height', 'weight', 'bmi'].includes(metricParam)) {
      ;(selectedMetric as any).value = metricParam
    }
  } catch (e) {
    console.warn('initMetricFromRoute error', e)
  }
}

onMounted(() => {
  // 延迟确保DOM渲染完成并设置canvas尺寸
  setTimeout(async () => {
    await nextTick()
    try {
      const size = await getCanvasSize()
      canvasWidth.value = size.width
      canvasHeight.value = size.height
    } catch (e) {
      console.warn('getCanvasSize failed on mounted', e)
    }

    // 先从路由读取 metric（如果有），然后创建 chart
    initMetricFromRoute()
    await fetchRecords()
    try {
      if (!bpChart) bpChart = createChartForMetric(selectedMetric.value)
    } catch (e) {
      console.warn('createChartForMetric failed', e)
    }

    try {
      if (bpChart && bpChart.draw) await bpChart.draw(records, current, viewMode)
    } catch (e) {
      console.warn('bpChart draw failed', e)
    }
  }, 500)
})

// 如果在微信小程序端且未登录，自动跳转到登录页
onShow(() => {
  const token = uni.getStorageSync('token')
  if (!token) {
    // 使用 uni.reLaunch 替代 navigateTo，确保页面栈被清空
    uni.reLaunch({ url: '/pages/public/login/index' })
  }
})

// 监听并更新图表（轻微去抖）
watch([() => current.value], async () => {
  setTimeout(async () => {
    await bpChart.update(records, current, viewMode)
  }, 100)
})

watch([() => records.value], async () => {
  setTimeout(async () => {
    // 如果图表实例已被替换，根据 current selectedMetric 的 chart 实例更新
    try {
      if (bpChart && bpChart.update) await bpChart.update(records, current, viewMode)
    } catch (e) {
      console.warn('bpChart update failed', e)
    }
  }, 100)
}, { deep: true })

// 监听 selectedMetric 变化，重建图表以使用不同的 series 配置
watch(() => selectedMetric.value, async (val) => {
  try {
    if (bpChart && bpChart.destroy) {
      try { bpChart.destroy() } catch (e) { /* ignore */ }
    }
    bpChart = createChartForMetric(val)
    // small delay to ensure DOM/canvas availability
    await nextTick()
    try { await bpChart.draw(records, current, viewMode) } catch (e) { console.warn('draw after metric change failed', e) }
  } catch (e) {
    console.warn('selectedMetric watch error', e)
  }
})

onBeforeUnmount(() => {
  try { bpChart.destroy() } catch (e) { console.warn('bpChart destroy error', e) }
})

// 强制重建图表（用于切换月份时彻底刷新）
async function rebuildChart() {
  try { if (bpChart && bpChart.rebuild) await bpChart.rebuild(records, current, viewMode) } catch (e) { console.warn('rebuildChart failed', e) }
}
// 周/月周期导航与 Picker 处理
async function prevPeriod() {
  const d = new Date(current.value)
  if (viewMode.value === 'month') {
    d.setMonth(d.getMonth() - 1)
  } else {
    d.setDate(d.getDate() - 7)
  }
  current.value = d
  pickerValue.value = [d.getFullYear() - 2000, d.getMonth()]
  await fetchRecords()
  await rebuildChart()
}

async function nextPeriod() {
  const d = new Date(current.value)
  if (viewMode.value === 'month') {
    d.setMonth(d.getMonth() + 1)
    if (isMonthAfterToday(d)) {
      uni.showToast && uni.showToast({ title: '不能查看未来的日期', icon: 'none' })
      return
    }
  } else {
    d.setDate(d.getDate() + 7)
    if (isWeekAfterToday(d)) {
      uni.showToast && uni.showToast({ title: '不能查看未来的日期', icon: 'none' })
      return
    }
  }
  current.value = d
  pickerValue.value = [d.getFullYear() - 2000, d.getMonth()]
  await fetchRecords()
  await rebuildChart()
}

async function setViewMode(mode: 'month' | 'week') {
  if (viewMode.value !== mode) {
    viewMode.value = mode
    await fetchRecords()
    await rebuildChart()
  }
}

async function onPickerChange(e: any) {
  const val = e?.detail?.value || e
  if (Array.isArray(val) && val.length >= 2) {
    const y = 2000 + Number(val[0])
    const m = Number(val[1])
    let d = new Date(y, m, 1)
    if (isMonthAfterToday(d)) {
      const today = getTodayStart()
      uni.showToast && uni.showToast({ title: '不能选择未来的月份，已切换到当前月份', icon: 'none' })
      d = new Date(today.getFullYear(), today.getMonth(), 1)
      pickerValue.value = [today.getFullYear() - 2000, today.getMonth()]
    } else {
      pickerValue.value = [Number(val[0]), Number(val[1])]
    }
    current.value = d
    await fetchRecords()
    await rebuildChart()
  }
}

// 删除了添加逻辑，因为这是公共页面，仅供医生或家属查看患者健康数据
// Removed add logic because this is a public page for doctors or family members to view patient health data

// 删除了删除记录功能，因为这是公共页面，仅供医生或家属查看患者健康数据
// Removed delete record function because this is a public page for doctors or family members to view patient health data
</script>

<style scoped>
.page { 
  min-height: calc(100vh); 
  padding-top: calc(var(--status-bar-height) + 44px); 
  background: #f5f6f8; 
  box-sizing: border-box 
}

.header { 
  padding: 20rpx 40rpx 
}

.month-selector { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 12rpx 
}

.period-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.view-toggle {
  display: flex;
  gap: 4rpx;
}

.toggle-btn {
  padding: 4rpx 12rpx;
  border: 1rpx solid #ddd;
  background: #f5f5f5;
  color: #666;
  border-radius: 6rpx;
  font-size: 24rpx;
  min-width: 60rpx;
  text-align: center;
}

.toggle-btn.active {
  background: #ff6a00;
  color: #fff;
  border-color: #ff6a00;
}

.month-label { 
  font-size: 34rpx; 
  color: #333 
}

.btn { 
  background: transparent; 
  border: none; 
  font-size: 36rpx; 
  color: #666 
}

.content { 
  padding: 20rpx 24rpx 100rpx 24rpx 
}

.chart-wrap { 
  height: 380rpx;
  overflow: hidden; /* 隐藏溢出内容 */
  background: #fff; 
  border-radius: 12rpx; 
  padding: 24rpx; 
  margin: 0 24rpx 20rpx 24rpx; 
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03) 
}

.chart-header { 
  font-size: 32rpx; 
  color: #333; 
  margin-bottom: 20rpx; 
  font-weight: 600 
}

/* 关键修复：确保canvas样式正确，参考微信小程序示例 */
.chart-canvas {    margin-left: -10rpx;
  height: 320rpx;
  background-color: #FFFFFF;
  display: block;
}

.summary { 
  padding: 20rpx; 
  color: #666; 
  font-size: 28rpx 
}

.list { 
  background: #fff; 
  border-radius: 12rpx; 
  padding: 10rpx; 
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03) 
}

.empty { 
  padding: 40rpx; 
  text-align: center; 
  color: #999 
}

.list-item { 
  display: flex; 
  align-items: center; 
  padding: 20rpx; 
  border-bottom: 1rpx solid #f0f0f0 
}

.list-item .date { 
  color: #666 
}

.list-item .value { 
  color: #333; 
  font-weight: 600; 
  flex: 1; 
  text-align: right 
}

/* 删除了浮动按钮样式，因为这是公共页面，仅供医生或家属查看患者健康数据 */
/* Removed floating button styles because this is a public page for doctors or family members to view patient health data */

/* 删除了模态框样式，因为这是公共页面，仅供医生或家属查看患者健康数据 */
/* Removed modal styles because this is a public page for doctors or family members to view patient health data */
</style>