<template>
  <view class="container">
    <view class="detail-hero">
      <view>
        <view class="hero-title">{{ detail.diseaseName || '慢性疾病' }}</view>
        <view class="hero-subtitle">{{ detail.personName || '--' }} · {{ formatDate(detail.diagnosisDate) }}</view>
      </view>
      <view class="status-tag" :class="'status-' + detail.diseaseStatus">{{ getDiseaseStatusLabel(detail.diseaseStatus) }}</view>
    </view>

    <view class="section">
      <view class="section-title">诊断信息</view>
      <view class="info-grid">
        <view class="info-item">
          <text class="info-label">疾病编码</text>
          <text class="info-value">{{ detail.diseaseCode || '--' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">启用状态</text>
          <text class="info-value">{{ detail.isActive === 1 ? '已启用' : '已停用' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">主治医生</text>
          <text class="info-value">{{ detail.mainDoctor || '--' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">就诊医院</text>
          <text class="info-value">{{ detail.hospital || '--' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">科室</text>
          <text class="info-value">{{ detail.department || '--' }}</text>
        </view>
      </view>
      <view class="long-field">
        <text class="info-label">诊断结果</text>
        <text class="long-value">{{ detail.notes || '--' }}</text>
      </view>
      <view class="long-field">
        <text class="info-label">备注</text>
        <text class="long-value">{{ detail.remark || '--' }}</text>
      </view>
    </view>

    <view class="section">
      <view class="section-title section-title-row">
        <text>关联用药计划</text>
        <view class="mini-action" @click="createMedicationPlan">
          <uni-icons type="plusempty" size="14" color="#667eea"></uni-icons>
          <text>创建</text>
        </view>
      </view>
      <view v-if="planList.length === 0" class="empty-box">暂无关联用药计划</view>
      <view v-for="item in planList" :key="item.id" class="plan-card">
        <view class="plan-header">
          <text class="plan-name">{{ item.planName || item.medicineName || '用药计划' }}</text>
          <text class="plan-status">{{ getPlanStatusLabel(item.status) }}</text>
        </view>
        <view class="plan-row">
          <text>药品</text>
          <text>{{ item.medicineName || '--' }}</text>
        </view>
        <view class="plan-row">
          <text>剂量</text>
          <text>{{ item.dosagePerTime || '--' }} {{ item.dosageUnit || '' }}</text>
        </view>
        <view class="plan-row">
          <text>周期</text>
          <text>{{ formatDate(item.startDate) }} 至 {{ item.endDate ? formatDate(item.endDate) : '长期' }}</text>
        </view>
        <view class="plan-row" v-if="item.timeSlots">
          <text>时间</text>
          <text>{{ parseTimeSlots(item.timeSlots).join('、') || '--' }}</text>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-title section-title-row">
        <text>指标监测</text>
        <view class="mini-action" @click="openIndicatorForm()">
          <uni-icons type="plusempty" size="14" color="#667eea"></uni-icons>
          <text>新增</text>
        </view>
      </view>
      <view v-if="indicatorList.length === 0" class="empty-box">暂无指标监测记录</view>
      <view v-for="item in indicatorList" :key="item.id" class="record-card">
        <view class="record-header">
          <view>
            <text class="record-name">{{ item.indicatorName || '--' }}</text>
            <text class="record-time">{{ formatDateTime(item.measureTime) }}</text>
          </view>
          <text class="record-status" :class="'indicator-status-' + item.status">{{ getIndicatorStatusLabel(item.status) }}</text>
        </view>
        <view class="metric-value">{{ item.indicatorValue ?? '--' }} <text>{{ item.indicatorUnit || '' }}</text></view>
        <view class="plan-row">
          <text>目标范围</text>
          <text>{{ item.targetMin ?? '--' }} - {{ item.targetMax ?? '--' }}</text>
        </view>
        <view class="record-note" v-if="item.notes">{{ item.notes }}</view>
        <view class="card-actions">
          <text @click="openIndicatorForm(item)">编辑</text>
          <text class="danger" @click="removeIndicator(item)">删除</text>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-title section-title-row">
        <text>复诊随访</text>
        <view class="mini-action" @click="openFollowUpForm()">
          <uni-icons type="plusempty" size="14" color="#667eea"></uni-icons>
          <text>新增</text>
        </view>
      </view>
      <view v-if="followUpList.length === 0" class="empty-box">暂无复诊随访记录</view>
      <view v-for="item in followUpList" :key="item.id" class="record-card">
        <view class="record-header">
          <view>
            <text class="record-name">{{ getFollowUpTypeLabel(item.followUpType) }}</text>
            <text class="record-time">{{ formatDate(item.followUpDate) }}</text>
          </view>
          <text class="record-status" :class="'follow-status-' + item.status">{{ getFollowUpStatusLabel(item.status) }}</text>
        </view>
        <view class="plan-row">
          <text>医院科室</text>
          <text>{{ item.hospital || '--' }} / {{ item.department || '--' }}</text>
        </view>
        <view class="plan-row">
          <text>医生</text>
          <text>{{ item.doctor || '--' }}</text>
        </view>
        <view class="plan-row">
          <text>下次日期</text>
          <text>{{ formatDate(item.nextFollowUpDate) }}</text>
        </view>
        <view class="record-note" v-if="item.checkItems">项目：{{ item.checkItems }}</view>
        <view class="record-note" v-if="item.result">结果：{{ item.result }}</view>
        <view class="record-note" v-if="item.notes">{{ item.notes }}</view>
        <view class="card-actions">
          <text @click="openFollowUpForm(item)">编辑</text>
          <text class="danger" @click="removeFollowUp(item)">删除</text>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-title">状态历史</view>
      <view v-if="statusHistoryList.length === 0" class="empty-box">暂无状态变更历史</view>
      <view v-for="item in statusHistoryList" :key="item.id" class="history-card">
        <view class="history-title">
          <text>{{ getDiseaseStatusLabel(item.oldStatus) }}</text>
          <text>调整为</text>
          <text>{{ getDiseaseStatusLabel(item.newStatus) }}</text>
        </view>
        <view class="history-time">{{ formatDateTime(item.changeTime) }}</view>
        <view class="record-note">{{ item.reason || '档案状态调整' }}</view>
        <view class="record-note" v-if="item.treatmentAdvice">建议：{{ item.treatmentAdvice }}</view>
      </view>
    </view>

    <u-popup :show="indicatorPopupShow" mode="bottom" round="20" @close="indicatorPopupShow = false">
      <view class="popup-panel">
        <view class="popup-title">{{ indicatorForm.id ? '编辑指标监测' : '新增指标监测' }}</view>
        <u--form labelPosition="left" :model="indicatorForm" ref="indicatorFormRef" label-width="160rpx">
          <u-form-item label="指标类型" @click="showIndicatorType = true">
            <view class="input-with-arrow">
              <u--input v-model="indicatorForm.indicatorName" readonly disabledColor="#ffffff" placeholder="请选择指标类型" :customStyle="inputStyle"></u--input>
              <text class="arrow-icon">▼</text>
            </view>
          </u-form-item>
          <u-form-item label="指标名称">
            <u--input v-model="indicatorForm.indicatorName" placeholder="请输入指标名称" :customStyle="inputStyle"></u--input>
          </u-form-item>
          <u-form-item label="测量时间" @click="openDatePicker('indicatorTime')">
            <view class="input-with-arrow">
              <u--input v-model="indicatorForm.measureTime" readonly disabledColor="#ffffff" placeholder="请选择测量时间" :customStyle="inputStyle"></u--input>
              <text class="arrow-icon">▼</text>
            </view>
          </u-form-item>
          <u-form-item label="指标值">
            <view class="inline-inputs">
              <u--input v-model="indicatorForm.indicatorValue" type="digit" placeholder="数值" :customStyle="inputStyle"></u--input>
              <u--input v-model="indicatorForm.indicatorUnit" placeholder="单位" :customStyle="inputStyle"></u--input>
            </view>
          </u-form-item>
          <u-form-item label="目标范围">
            <view class="inline-inputs">
              <u--input v-model="indicatorForm.targetMin" type="digit" placeholder="下限" :customStyle="inputStyle"></u--input>
              <u--input v-model="indicatorForm.targetMax" type="digit" placeholder="上限" :customStyle="inputStyle"></u--input>
            </view>
          </u-form-item>
          <u-form-item label="状态" @click="showIndicatorStatus = true">
            <view class="input-with-arrow">
              <u--input :modelValue="getIndicatorStatusLabel(indicatorForm.status)" readonly disabledColor="#ffffff" placeholder="请选择状态" :customStyle="inputStyle"></u--input>
              <text class="arrow-icon">▼</text>
            </view>
          </u-form-item>
          <u-form-item label="说明">
            <u--textarea v-model="indicatorForm.notes" placeholder="请输入说明"></u--textarea>
          </u-form-item>
        </u--form>
        <view class="popup-actions">
          <u-button text="取消" @click="indicatorPopupShow = false"></u-button>
          <u-button type="primary" text="保存" @click="submitIndicator"></u-button>
        </view>
      </view>
    </u-popup>

    <u-popup :show="followUpPopupShow" mode="bottom" round="20" @close="followUpPopupShow = false">
      <view class="popup-panel">
        <view class="popup-title">{{ followUpForm.id ? '编辑复诊随访' : '新增复诊随访' }}</view>
        <u--form labelPosition="left" :model="followUpForm" ref="followUpFormRef" label-width="160rpx">
          <u-form-item label="类型" @click="showFollowType = true">
            <view class="input-with-arrow">
              <u--input :modelValue="getFollowUpTypeLabel(followUpForm.followUpType)" readonly disabledColor="#ffffff" placeholder="请选择类型" :customStyle="inputStyle"></u--input>
              <text class="arrow-icon">▼</text>
            </view>
          </u-form-item>
          <u-form-item label="日期" @click="openDatePicker('followUpDate')">
            <view class="input-with-arrow">
              <u--input v-model="followUpForm.followUpDate" readonly disabledColor="#ffffff" placeholder="请选择日期" :customStyle="inputStyle"></u--input>
              <text class="arrow-icon">▼</text>
            </view>
          </u-form-item>
          <u-form-item label="医院">
            <u--input v-model="followUpForm.hospital" placeholder="请输入医院" :customStyle="inputStyle"></u--input>
          </u-form-item>
          <u-form-item label="科室/医生">
            <view class="inline-inputs">
              <u--input v-model="followUpForm.department" placeholder="科室" :customStyle="inputStyle"></u--input>
              <u--input v-model="followUpForm.doctor" placeholder="医生" :customStyle="inputStyle"></u--input>
            </view>
          </u-form-item>
          <u-form-item label="复查项目">
            <u--textarea v-model="followUpForm.checkItems" placeholder="请输入复查项目"></u--textarea>
          </u-form-item>
          <u-form-item label="结果">
            <u--textarea v-model="followUpForm.result" placeholder="请输入结果"></u--textarea>
          </u-form-item>
          <u-form-item label="下次日期" @click="openDatePicker('nextFollowUpDate')">
            <view class="input-with-arrow">
              <u--input v-model="followUpForm.nextFollowUpDate" readonly disabledColor="#ffffff" placeholder="请选择下次日期" :customStyle="inputStyle"></u--input>
              <text class="arrow-icon">▼</text>
            </view>
          </u-form-item>
          <u-form-item label="状态" @click="showFollowStatus = true">
            <view class="input-with-arrow">
              <u--input :modelValue="getFollowUpStatusLabel(followUpForm.status)" readonly disabledColor="#ffffff" placeholder="请选择状态" :customStyle="inputStyle"></u--input>
              <text class="arrow-icon">▼</text>
            </view>
          </u-form-item>
          <u-form-item label="说明">
            <u--textarea v-model="followUpForm.notes" placeholder="请输入说明"></u--textarea>
          </u-form-item>
        </u--form>
        <view class="popup-actions">
          <u-button text="取消" @click="followUpPopupShow = false"></u-button>
          <u-button type="primary" text="保存" @click="submitFollowUp"></u-button>
        </view>
      </view>
    </u-popup>

    <u-picker itemHeight="88" :show="showIndicatorType" :columns="indicatorTypeColumns" keyName="label" @confirm="indicatorTypeConfirm" @cancel="showIndicatorType = false"></u-picker>
    <u-picker itemHeight="88" :show="showIndicatorStatus" :columns="indicatorStatusColumns" keyName="label" @confirm="indicatorStatusConfirm" @cancel="showIndicatorStatus = false"></u-picker>
    <u-picker itemHeight="88" :show="showFollowType" :columns="followTypeColumns" keyName="label" @confirm="followTypeConfirm" @cancel="showFollowType = false"></u-picker>
    <u-picker itemHeight="88" :show="showFollowStatus" :columns="followStatusColumns" keyName="label" @confirm="followStatusConfirm" @cancel="showFollowStatus = false"></u-picker>
    <u-datetime-picker :show="showDatePicker" v-model="datePickerValue" :mode="datePickerMode" @confirm="datePickerConfirm" @cancel="showDatePicker = false" @close="showDatePicker = false"></u-datetime-picker>
  </view>
</template>

<script setup>
import { getChronicDisease } from '@/api/health/chronicDisease'
import { listMedicationPlan } from '@/api/health/medicationPlan'
import { listIndicator, addIndicator, updateIndicator, delIndicator, listFollowUp, addFollowUp, updateFollowUp, delFollowUp, listStatusHistory } from '@/api/health/chronicDiseaseManage'
import { onLoad } from '@dcloudio/uni-app'
import dayjs from 'dayjs'
import { computed, ref } from 'vue'

const detail = ref({})
const planList = ref([])
const indicatorList = ref([])
const followUpList = ref([])
const statusHistoryList = ref([])
const indicatorPopupShow = ref(false)
const followUpPopupShow = ref(false)
const showIndicatorType = ref(false)
const showIndicatorStatus = ref(false)
const showFollowType = ref(false)
const showFollowStatus = ref(false)
const showDatePicker = ref(false)
const datePickerTarget = ref('')
const datePickerValue = ref(Number(new Date()))

const indicatorForm = ref({})
const followUpForm = ref({})

const inputStyle = {
  background: '#ffffff',
  border: '2rpx solid #dcdfe6',
  borderRadius: '8rpx',
  padding: '0 20rpx',
  height: '68rpx',
  boxSizing: 'border-box'
}

const indicatorTypes = [
  { value: 'blood_pressure_systolic', label: '收缩压', unit: 'mmHg' },
  { value: 'blood_pressure_diastolic', label: '舒张压', unit: 'mmHg' },
  { value: 'heart_rate', label: '心率', unit: '次/分' },
  { value: 'fasting_glucose', label: '空腹血糖', unit: 'mmol/L' },
  { value: 'postprandial_glucose', label: '餐后血糖', unit: 'mmol/L' },
  { value: 'weight', label: '体重', unit: 'kg' },
  { value: 'uric_acid', label: '尿酸', unit: 'umol/L' },
  { value: 'custom', label: '自定义', unit: '' }
]
const indicatorStatuses = [
  { value: 1, label: '正常' },
  { value: 2, label: '偏高' },
  { value: 3, label: '偏低' },
  { value: 4, label: '需关注' }
]
const followTypes = [
  { value: 1, label: '复诊' },
  { value: 2, label: '复查' },
  { value: 3, label: '随访' }
]
const followStatuses = [
  { value: 1, label: '待完成' },
  { value: 2, label: '已完成' },
  { value: 3, label: '已过期' }
]
const indicatorTypeColumns = ref([indicatorTypes])
const indicatorStatusColumns = ref([indicatorStatuses])
const followTypeColumns = ref([followTypes])
const followStatusColumns = ref([followStatuses])
const datePickerMode = computed(() => datePickerTarget.value === 'indicatorTime' ? 'datetime' : 'date')

onLoad((option) => {
  if (!option.id) {
    uni.showToast({ title: '缺少慢病档案', icon: 'none' })
    return
  }
  loadDetail(option.id)
})

function loadDetail(id) {
  uni.showLoading({ title: '加载中' })
  Promise.all([
    getChronicDisease(id),
    listMedicationPlan({ pageNum: 1, pageSize: 1000, chronicDiseaseId: id }),
    listIndicator({ pageNum: 1, pageSize: 1000, chronicDiseaseId: id }),
    listFollowUp({ pageNum: 1, pageSize: 1000, chronicDiseaseId: id }),
    listStatusHistory({ pageNum: 1, pageSize: 1000, chronicDiseaseId: id })
  ]).then(([detailRes, planRes, indicatorRes, followUpRes, historyRes]) => {
    detail.value = detailRes.data || {}
    planList.value = planRes.rows || []
    indicatorList.value = indicatorRes.rows || []
    followUpList.value = followUpRes.rows || []
    statusHistoryList.value = historyRes.rows || []
  }).finally(() => {
    uni.hideLoading()
  })
}

function reloadManageData() {
  if (!detail.value.id) return
  Promise.all([
    listIndicator({ pageNum: 1, pageSize: 1000, chronicDiseaseId: detail.value.id }),
    listFollowUp({ pageNum: 1, pageSize: 1000, chronicDiseaseId: detail.value.id }),
    listStatusHistory({ pageNum: 1, pageSize: 1000, chronicDiseaseId: detail.value.id })
  ]).then(([indicatorRes, followUpRes, historyRes]) => {
    indicatorList.value = indicatorRes.rows || []
    followUpList.value = followUpRes.rows || []
    statusHistoryList.value = historyRes.rows || []
  })
}

function getDiseaseStatusLabel(s) {
  const map = { 1: '稳定', 2: '需关注', 3: '急性期' }
  return map[s] || '未知'
}

function getPlanStatusLabel(s) {
  const map = { 1: '进行中', 2: '已暂停', 3: '已结束' }
  return map[s] || '未知'
}

function getIndicatorStatusLabel(s) {
  const item = indicatorStatuses.find(status => status.value === Number(s))
  return item ? item.label : '未知'
}

function getFollowUpTypeLabel(s) {
  const item = followTypes.find(type => type.value === Number(s))
  return item ? item.label : '未知'
}

function getFollowUpStatusLabel(s) {
  const item = followStatuses.find(status => status.value === Number(s))
  return item ? item.label : '未知'
}

function formatDate(date) {
  if (!date) return '--'
  if (Array.isArray(date)) return `${date[0]}-${String(date[1]).padStart(2, '0')}-${String(date[2]).padStart(2, '0')}`
  if (typeof date === 'string') return date.substring(0, 10)
  return '--'
}

function formatDateTime(datetime) {
  if (!datetime) return '--'
  if (typeof datetime === 'string') return datetime.replace('T', ' ').substring(0, 16)
  return '--'
}

function nowDateTime() {
  return dayjs().format('YYYY-MM-DD HH:mm:ss')
}

function nowDate() {
  return dayjs().format('YYYY-MM-DD')
}

function parseTimeSlots(timeSlots) {
  if (!timeSlots) return []
  try {
    return typeof timeSlots === 'string' ? JSON.parse(timeSlots) : timeSlots
  } catch (e) {
    return []
  }
}

function createMedicationPlan() {
  if (!detail.value.id || !detail.value.personId) {
    uni.showToast({ title: '档案信息不完整', icon: 'none' })
    return
  }
  uni.navigateTo({
    url: `/pages/health/medicationPlan/addEdit?personId=${detail.value.personId}&chronicDiseaseId=${detail.value.id}&diseaseName=${encodeURIComponent(detail.value.diseaseName || '')}`
  })
}

function openDatePicker(target) {
  datePickerTarget.value = target
  if (target === 'indicatorTime' && indicatorForm.value.measureTime) {
    datePickerValue.value = new Date(indicatorForm.value.measureTime.replace(/-/g, '/')).getTime()
  } else if (target === 'followUpDate' && followUpForm.value.followUpDate) {
    datePickerValue.value = new Date(followUpForm.value.followUpDate.replace(/-/g, '/')).getTime()
  } else if (target === 'nextFollowUpDate' && followUpForm.value.nextFollowUpDate) {
    datePickerValue.value = new Date(followUpForm.value.nextFollowUpDate.replace(/-/g, '/')).getTime()
  } else {
    datePickerValue.value = Number(new Date())
  }
  showDatePicker.value = true
}

function datePickerConfirm(e) {
  if (datePickerTarget.value === 'indicatorTime') {
    indicatorForm.value.measureTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
  } else if (datePickerTarget.value === 'followUpDate') {
    followUpForm.value.followUpDate = dayjs(e.value).format('YYYY-MM-DD')
  } else if (datePickerTarget.value === 'nextFollowUpDate') {
    followUpForm.value.nextFollowUpDate = dayjs(e.value).format('YYYY-MM-DD')
  }
  showDatePicker.value = false
}

function openIndicatorForm(row) {
  if (row && row.id) {
    indicatorForm.value = { ...row }
  } else {
    indicatorForm.value = {
      id: null,
      chronicDiseaseId: detail.value.id,
      personId: detail.value.personId,
      indicatorType: 'blood_pressure_systolic',
      indicatorName: '收缩压',
      measureTime: nowDateTime(),
      indicatorValue: null,
      indicatorUnit: 'mmHg',
      targetMin: null,
      targetMax: null,
      status: 1,
      notes: null
    }
  }
  indicatorPopupShow.value = true
}

function indicatorTypeConfirm(e) {
  const item = e.value[0]
  indicatorForm.value.indicatorType = item.value
  if (item.value !== 'custom') {
    indicatorForm.value.indicatorName = item.label
    indicatorForm.value.indicatorUnit = item.unit
  }
  showIndicatorType.value = false
}

function indicatorStatusConfirm(e) {
  indicatorForm.value.status = e.value[0].value
  showIndicatorStatus.value = false
}

function submitIndicator() {
  if (!indicatorForm.value.indicatorName || indicatorForm.value.indicatorValue === null || indicatorForm.value.indicatorValue === '') {
    uni.showToast({ title: '请填写指标名称和数值', icon: 'none' })
    return
  }
  const submitData = { ...indicatorForm.value }
  ;['indicatorValue', 'targetMin', 'targetMax'].forEach(key => {
    if (submitData[key] !== null && submitData[key] !== '') {
      submitData[key] = Number(submitData[key])
    } else {
      submitData[key] = null
    }
  })
  const request = submitData.id ? updateIndicator : addIndicator
  request(submitData).then(() => {
    uni.showToast({ title: '保存成功', icon: 'success' })
    indicatorPopupShow.value = false
    reloadManageData()
  })
}

function removeIndicator(row) {
  uni.showModal({
    title: '删除指标',
    content: '确认删除该指标记录吗？',
    success: (res) => {
      if (!res.confirm) return
      delIndicator(row.id).then(() => {
        uni.showToast({ title: '删除成功', icon: 'success' })
        reloadManageData()
      })
    }
  })
}

function openFollowUpForm(row) {
  if (row && row.id) {
    followUpForm.value = { ...row, followUpDate: formatDate(row.followUpDate), nextFollowUpDate: row.nextFollowUpDate ? formatDate(row.nextFollowUpDate) : null }
  } else {
    followUpForm.value = {
      id: null,
      chronicDiseaseId: detail.value.id,
      personId: detail.value.personId,
      followUpType: 1,
      followUpDate: nowDate(),
      hospital: detail.value.hospital || null,
      department: detail.value.department || null,
      doctor: detail.value.mainDoctor || null,
      checkItems: null,
      result: null,
      nextFollowUpDate: null,
      status: 1,
      notes: null
    }
  }
  followUpPopupShow.value = true
}

function followTypeConfirm(e) {
  followUpForm.value.followUpType = e.value[0].value
  showFollowType.value = false
}

function followStatusConfirm(e) {
  followUpForm.value.status = e.value[0].value
  showFollowStatus.value = false
}

function submitFollowUp() {
  if (!followUpForm.value.followUpDate) {
    uni.showToast({ title: '请选择日期', icon: 'none' })
    return
  }
  const request = followUpForm.value.id ? updateFollowUp : addFollowUp
  request(followUpForm.value).then(() => {
    uni.showToast({ title: '保存成功', icon: 'success' })
    followUpPopupShow.value = false
    reloadManageData()
  })
}

function removeFollowUp(row) {
  uni.showModal({
    title: '删除随访',
    content: '确认删除该复诊随访记录吗？',
    success: (res) => {
      if (!res.confirm) return
      delFollowUp(row.id).then(() => {
        uni.showToast({ title: '删除成功', icon: 'success' })
        reloadManageData()
      })
    }
  })
}
</script>

<style lang="scss" scoped>
@import '@/styles/health-common.scss';

.detail-hero {
  margin: 24rpx;
  padding: 28rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
}

.hero-title {
  font-size: 36rpx;
  font-weight: 600;
}

.hero-subtitle {
  margin-top: 10rpx;
  font-size: 26rpx;
  opacity: 0.9;
}

.section {
  margin: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.section-title {
  padding: 18rpx 24rpx;
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  border-bottom: 1rpx solid #f0f0f0;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mini-action {
  display: flex;
  align-items: center;
  gap: 6rpx;
  color: #667eea;
  font-size: 26rpx;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20rpx;
  padding: 24rpx;
}

.info-item,
.long-field {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.long-field {
  padding: 0 24rpx 24rpx;
}

.info-label {
  font-size: 24rpx;
  color: #909399;
}

.info-value,
.long-value {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  word-break: break-word;
}

.empty-box {
  padding: 40rpx 24rpx;
  text-align: center;
  color: #909399;
  font-size: 28rpx;
}

.plan-card {
  margin: 24rpx;
  padding: 22rpx;
  border: 1rpx solid #edf0f7;
  border-radius: 12rpx;
}

.plan-header,
.plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
}

.plan-header {
  margin-bottom: 16rpx;
}

.plan-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

.plan-status {
  font-size: 24rpx;
  color: #667eea;
}

.plan-row {
  padding: 8rpx 0;
  font-size: 26rpx;
  color: #606266;
}

.record-card,
.history-card {
  margin: 24rpx;
  padding: 22rpx;
  border: 1rpx solid #edf0f7;
  border-radius: 12rpx;
  background: #fff;
}

.record-header {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  margin-bottom: 16rpx;
}

.record-name {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.record-time {
  display: block;
  margin-top: 4rpx;
  font-size: 24rpx;
  color: #909399;
}

.record-status {
  flex-shrink: 0;
  height: 42rpx;
  line-height: 42rpx;
  padding: 0 16rpx;
  border-radius: 21rpx;
  font-size: 24rpx;
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

.indicator-status-2,
.follow-status-1 {
  color: #e6a23c;
  background: rgba(230, 162, 60, 0.12);
}

.indicator-status-4,
.follow-status-3 {
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.12);
}

.indicator-status-1,
.follow-status-2 {
  color: #67c23a;
  background: rgba(103, 194, 58, 0.12);
}

.metric-value {
  margin-bottom: 12rpx;
  font-size: 42rpx;
  font-weight: 700;
  color: #303133;
}

.metric-value text {
  margin-left: 8rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #909399;
}

.record-note {
  margin-top: 10rpx;
  font-size: 26rpx;
  color: #606266;
  line-height: 1.5;
  word-break: break-word;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 28rpx;
  margin-top: 18rpx;
  font-size: 26rpx;
  color: #667eea;
}

.card-actions .danger {
  color: #f56c6c;
}

.history-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
}

.history-time {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #909399;
}

.popup-panel {
  max-height: 86vh;
  padding: 24rpx;
  background: #fff;
  overflow-y: auto;
}

.popup-title {
  padding: 8rpx 0 24rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  text-align: center;
}

.input-with-arrow {
  position: relative;
  width: 100%;
}

.arrow-icon {
  position: absolute;
  right: 18rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #c0c4cc;
  font-size: 20rpx;
  pointer-events: none;
}

.inline-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12rpx;
  width: 100%;
}

.popup-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20rpx;
  padding-top: 24rpx;
}
</style>
