<template>
  <view class="feeding-analysis-page">
    <!-- 状态栏占位 -->
    <view class="status-bar-placeholder"></view>

    <!-- 头部导航 -->
    <view class="header">
      <view class="nav-left">
        <image :src="feedingAnalysisRes.icon_return" class="back-btn" @click="goBack" />
      </view>
    </view>

    <!-- 图例 -->
    <view class="legend-section">
      <view class="legend-item">
        <text class="legend-text">母乳亲喂</text>
        <view class="legend-color legend-breastfeeding"></view>
      </view>
      <view class="legend-item">
        <text class="legend-text">母乳瓶喂</text>
        <view class="legend-color legend-bottle"></view>
      </view>
      <view class="legend-item">
        <text class="legend-text">奶粉喂养</text>
        <view class="legend-color legend-formula"></view>
      </view>
      <view class="legend-item">
        <text class="legend-text">辅食</text>
        <view class="legend-color legend-food"></view>
      </view>
    </view>


    <!-- CSS柱状图区域 -->
    <view class="chart-section">
      <view class="chart-container">
        <view class="chart-nav-left" @click="prevWeek">
          <image :src="feedingAnalysisRes.icon_l_arrow" class="nav-arrow" />
        </view>
        <view class="chart-content">
          <view class="chart-bars">
            <view v-for="(day, index) in chartData" :key="index" class="chart-bar-wrapper" @click="onBarClick(day)">
              <view class="chart-bar">
                <view v-for="(typeData, typeIndex) in getBarSegments(day)" :key="typeIndex" class="bar-segment" :style="{
                  height: `${typeData.height}%`,
                  backgroundColor: typeData.color
                }"></view>
              </view>
              <view class="bar-count" v-if="day.dateString === selectedDate && day.totalCount > 0">
                {{ day.totalCount }}次
              </view>
              <view class="bar-date" :class="{ 'selected': day.dateString === selectedDate }">{{ day.date }}</view>
              <!-- 选中背景图 -->
              <image v-if="day.dateString === selectedDate" :src="feedingAnalysisRes.icon_sel_tag_bg"
                class="selected-bg" />
            </view>
          </view>
        </view>
        <view class="chart-nav-right" @click="nextWeek">
          <image :src="feedingAnalysisRes.icon_r_arrow" class="nav-arrow" />
        </view>
      </view>
    </view>

    <view class="gap-bg"></view>
    <!-- 宝宝年龄 -->
    <view class="baby-age">
      <text>宝宝 {{ userStore.babyInfo?.babyAge || '0天' }} </text>
    </view>

    <!-- 喂养记录列表 -->
    <scroll-view class="records-container" scroll-y>
      <view v-if="isLoading" class="loading-state">
        <text class="loading-text">加载中...</text>
      </view>
      <view v-else-if="todayRecords.length === 0" class="empty-state">
        <text class="empty-text">当日暂无记录</text>
      </view>
      <view v-else class="record-list">
        <template v-for="(record, index) in todayRecords" :key="index">
          <view class="record-item">
            <view class="time-dot">
              <view class="dot" :style="{ backgroundColor: getRecordColor(record.type) }"></view>
              <text class="time">{{ record.time }}</text>
            </view>
            <view class="record-content" :style="{ backgroundColor: getRecordBgColor(record.type) }">
              <view class="record-header">
                <image :src="getRecordIcon(record.type)" :class="getRecordIconClass(record.type)" />
                <text class="record-type">{{ record.type }}</text>
                <text class="delete-btn" @click="deleteRecord(record)">删除</text>
                <text class="edit-btn" @click="editRecord(index)">修改</text>
              </view>
              <view class="record-details">
                <!-- 优先显示 foodDetails，如果存在则显示，否则显示原有字段 -->
                <view v-if="record.foodDetails" class="content-info">
                  <view class="content-text">{{ record.foodDetails }}</view>
                </view>

                <!-- 如果没有 foodDetails，则显示原有字段 -->
                <view v-else>
                  <!-- 母乳亲喂：显示左右时间，时间加粗 -->
                  <view v-if="record.type === '母乳亲喂' && (record.leftDuration || record.rightDuration)"
                    class="duration-info">
                    <view v-if="record.leftDuration" class="duration-text">
                      <text class="duration-label">左</text>
                      <text class="duration-time">{{ record.leftDuration }}</text>
                    </view>
                    <view v-if="record.rightDuration" class="duration-text">
                      <text class="duration-label">右</text>
                      <text class="duration-time">{{ record.rightDuration }}</text>
                    </view>
                  </view>

                  <!-- 母乳瓶喂：显示总乳量 -->
                  <view v-if="record.type === '母乳瓶喂' && record.amount" class="amount-info">
                    <view class="amount-text">
                      <text class="amount-label">总乳量</text>
                      <text class="amount-value">{{ record.amount }}</text>
                    </view>
                  </view>

                  <!-- 奶粉喂养：显示总奶量 -->
                  <view v-if="record.type === '奶粉喂养' && record.amount" class="amount-info">
                    <view class="amount-text">
                      <text class="amount-label">总奶量</text>
                      <text class="amount-value">{{ record.amount }}</text>
                    </view>
                  </view>

                  <!-- 辅食：显示内容，超出显示... -->
                  <view v-if="record.type === '辅食' && record.content" class="content-info">
                    <view class="content-text">{{ record.content }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- 在两个记录之间添加连接线 -->
          <view v-if="index < todayRecords.length - 1" class="timeline-connector"></view>
        </template>
      </view>
    </scroll-view>
  </view>


  <!-- 删除二次确认弹窗 -->
  <view class="popup-mask" v-if="showDelPopup" @click="closeDelPopup" @touchmove.prevent>
    <view class="popup-content del-popup-content" @click.stop @touchmove.stop>
      <image :src="feedingAnalysisRes.delRecordBg" class="del-record-bg" />
      <view class="del-buttons-container">
        <image :src="feedingAnalysisRes.delRecordCancelBtn" class="del-record-cancel-btn" @click="closeDelPopup" />
        <image :src="feedingAnalysisRes.delRecordConfirmBtn" class="del-record-confirm-btn" @click="confirmDelRecord" />
      </view>
    </view>
  </view>

  <!-- 编辑记录弹窗 -->
  <view class="popup-mask" v-if="showEditPopup" @click="closeEditPopup" @touchmove.prevent>
    <view class="popup-content" @click.stop @touchmove.stop>
      <view class="popup-title">确认修改内容</view>
      <view class="form-item">
        <text class="label">喂养时间</text>
        <picker mode="time" :value="editForm.time" @change="onEditTimeChange">
          <view class="picker">{{ editForm.time || '请选择时间' }}</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">喂养方式</text>
        <picker :range="feedingTypes" @change="onEditTypeChange">
          <view class="picker">{{ editForm.type || '请选择类型' }}</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">喂养详情</text>
        <view class="input-container">
          <input class="input" v-model="editForm.content" :placeholder="getEditFormPlaceholder()" maxlength="20" />
        </view>
      </view>
      <view class="popup-buttons">
        <image :src="feedingAnalysisRes.icon_change_btn_cancel" class="cancel-btn" @click="closeEditPopup" />
        <image :src="feedingAnalysisRes.icon_change_btn_confirm" class="confirm-btn" @click="saveEditRecord" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch, nextTick, getCurrentInstance } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { feedingRecordsStatisticsPeriod, feedingRecordsByDate, feedingRecords as feedingRecordsAPI, feedingRecordsDelete } from '@/api/feeding.js'
import { useUserStore } from '@/stores/user.js'

// API 集成说明：
// 1. 使用 /c/feeding/statistics/period GET 方法查询统计图表数据
//    - 参数：babyId (宝宝ID), sdate (开始日期), edate (结束日期)
//    - 返回：指定时间段的喂养统计数据
//    - 数据格式转换：API返回的统计数据转换为图表需要的格式
// 2. 使用 /c/feeding/records GET 方法查询指定日期的喂养记录
//    - 参数：babyId (宝宝ID), date (日期，格式：YYYY-MM-DD)
//    - 返回：该日期的所有喂养记录数组
//    - 数据格式转换：API返回的记录数据转换为页面显示格式
// 3. 使用 /c/feeding/records POST 方法修改喂养记录
//    - 参数：recordId, babyId, recordTime, feedingType, durationLeftSeconds, durationRightSeconds, volume, foodDetails
//    - 返回：修改结果
//    - 注意：API函数重命名为 feedingRecordsAPI 以避免与本地数据变量冲突
// 4. 实现了缓存机制、错误重试、超时处理、数据验证等功能
// 5. 支持本地数据作为 fallback，确保页面正常显示
// 6. 添加了性能监控和调试开关
// 7. 支持点击柱状图切换日期，按周切换统计
// 8. 支持动态计算宝宝年龄
// 9. 支持修改喂养记录功能

const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;

const version = 'v1'
const DEBUG_API = false // 调试开关，控制是否输出详细的API调试信息

// 资源路径
const feedingAnalysisRes = {
  // 喂养类型图标
  icon_fushi: $baseUrl + `feedingRecord/${version}/icon_fushi.png`,
  icon_muru: $baseUrl + `feedingRecord/${version}/icon_muru.png`,
  icon_naifen: $baseUrl + `feedingRecord/${version}/icon_naifen.png`,
  icon_pingwei: $baseUrl + `feedingRecord/${version}/icon_pingwei.png`,

  // 其他可能用到的图标
  icon_analysis: $baseUrl + `feedingRecord/${version}/icon_analysis.png`,
  icon_arrow_yellow: $baseUrl + `feedingRecord/${version}/icon_arrow_yellow.png`,
  icon_star: $baseUrl + `feedingRecord/${version}/icon_star.png`,
  icon_return: $baseUrl + `feedingRecord/${version}/icon_return.png`,
  icon_baby_change: $baseUrl + `feedingRecord/${version}/icon_baby_change.png`,
  //analysis
  icon_l_arrow: $baseUrl + `feedingAnalysis/${version}/icon_l_arrow.png`,
  icon_r_arrow: $baseUrl + `feedingAnalysis/${version}/icon_r_arrow.png`,
  icon_sel_tag_bg: $baseUrl + `feedingAnalysis/${version}/icon_sel_tag_bg.png`,

  icon_change_btn_confirm: $baseUrl + `feedingRecord/${version}/icon_change_btn_confirm.png`,
  icon_change_btn_cancel: $baseUrl + `feedingRecord/${version}/icon_change_btn_cancel.png`,


  delRecordBg: $baseUrl + `feedingRecord/${version}/delRecordBg.png`,
  delRecordCancelBtn: $baseUrl + `feedingRecord/${version}/delRecordCancelBtn.png`,
  delRecordConfirmBtn: $baseUrl + `feedingRecord/${version}/delRecordConfirmBtn.png`,



}

// API 数据存储
const apiStatistics = ref({}) // 存储从API获取的统计数据
const apiRecords = ref({}) // 存储从API获取的记录数据
const isLoading = ref(false) // 加载状态
const loadingStatistics = ref(new Set()) // 正在加载的统计数据集合，避免重复请求
const loadingRecords = ref(new Set()) // 正在加载的记录数据集合，避免重复请求
const statisticsCache = ref(new Map()) // 统计数据缓存
const recordsCache = ref(new Map()) // 记录数据缓存

// 响应式数据
const currentWeek = ref(0) // 当前显示的周数
const selectedDate = ref(formatDateString(new Date())) // 当前选中的日期，默认为今天
const chartData = ref([])

// 全局状态管理
const userStore = useUserStore()
const babyId = computed(() => userStore.babyInfo?.content?.id)

// 计算属性 - 获取宝宝信息
const babyInfo = computed(() => userStore.babyInfo?.content)

// 修改记录相关状态
const showEditPopup = ref(false)
const editingRecord = ref(null)
const editForm = ref({
  time: '',
  type: '',
  content: '',
  leftDuration: '',
  rightDuration: '',
  amount: ''
})

// 删除记录相关状态
const showDelPopup = ref(false)
const deletingRecord = ref(null)

// 喂养类型选项
const feedingTypes = ['母乳亲喂', '母乳瓶喂', '奶粉喂养', '辅食']

// 计算属性 - 当前选中日期的记录
const todayRecords = computed(() => {
  if (!selectedDate.value) return []
  // 优先使用API数据，如果没有则使用本地数据
  return apiRecords.value[selectedDate.value] || []
})

// 计算属性 - 当周最大次数
const maxWeekCount = computed(() => {
  if (chartData.value.length === 0) return 0
  return Math.max(...chartData.value.map(d => d.totalCount))
})

// 获取记录颜色 - 根据设计稿调整
function getRecordColor(type) {
  const colors = {
    '母乳亲喂': '#d3a358', // 浅粉色
    '母乳瓶喂': '#d3a358', // 浅紫色
    '奶粉喂养': '#d3a358', // 浅橙色/米色
    '辅食': '#d3a358' // 浅绿色
  }
  return colors[type] || '#d3a358'
}

// 获取记录背景色 - 根据设计稿调整
function getRecordBgColor(type) {
  const colors = {
    '母乳亲喂': '#F9D9D9', // 浅粉色
    '母乳瓶喂': '#D9D9F9', // 浅紫色
    '奶粉喂养': '#F9E9D9', // 浅橙色/米色
    '辅食': '#D9F9D9' // 浅绿色
  }
  return colors[type] || '#F5F5F5'
}

// 获取类型颜色
function getTypeColor(type) {
  const colors = {
    '母乳亲喂': '#F9D9D9', // 浅粉色
    '母乳瓶喂': '#D9D9F9', // 浅紫色
    '奶粉喂养': '#F9E9D9', // 浅橙色/米色
    '辅食': '#D9F9D9' // 浅绿色
  }
  return colors[type] || '#CCCCCC'
}

// 获取记录图标
function getRecordIcon(type) {
  const icons = {
    '母乳亲喂': feedingAnalysisRes.icon_muru,
    '母乳瓶喂': feedingAnalysisRes.icon_pingwei,
    '奶粉喂养': feedingAnalysisRes.icon_naifen,
    '辅食': feedingAnalysisRes.icon_fushi
  }
  return icons[type] || ''
}

// 获取记录图标样式类
function getRecordIconClass(type) {
  const classes = {
    '母乳亲喂': 'record-icon-img-muruqinwei',
    '母乳瓶喂': 'record-icon-img-pingwei',
    '奶粉喂养': 'record-icon-img-naifen',
    '辅食': 'record-icon-img-fushi'
  }
  return classes[type] || ''
}

// API 调用函数
async function loadStatisticsPeriod(startDate, endDate) {
  const cacheKey = `${startDate}_${endDate}_${babyId.value}`

  // 避免重复请求
  if (loadingStatistics.value.has(cacheKey)) {
    console.log('该时间段统计数据正在加载中，跳过重复请求:', cacheKey)
    return
  }

  // 检查缓存
  const cachedData = statisticsCache.value.get(cacheKey)
  if (cachedData && Date.now() - cachedData.timestamp < 10 * 60 * 1000) { // 10分钟缓存
    console.log('使用缓存的统计数据:', cacheKey)
    apiStatistics.value[cacheKey] = cachedData.data
    return
  }

  try {
    const startTime = Date.now()
    loadingStatistics.value.add(cacheKey)
    // 只有在没有其他加载中的统计数据时才显示全局加载状态
    if (loadingStatistics.value.size === 1) {
      isLoading.value = true
    }


    // 添加超时处理
    const timeoutPromise = new Promise((_, reject) => {
      setTimeout(() => reject(new Error('请求超时')), 10000) // 10秒超时
    })

    const apiPromise = feedingRecordsStatisticsPeriod({
      babyId: babyId.value,
      sdate: startDate,
      edate: endDate
    })

    // 使用 mock 数据或真实 API
    const response = await Promise.race([apiPromise, timeoutPromise])

    if (DEBUG_API) {
      console.log('获取统计数据:', { startDate, endDate }, response)
      console.log('统计数据API返回数据结构:', JSON.stringify(response, null, 2))
    }

    // 检查响应状态
    if (response && response.code && response.code !== '000000') {
      throw new Error(`API返回错误: ${response.message || '未知错误'}`)
    }

    if (response && response.data) {
      // 验证数据格式
      if (!Array.isArray(response.data)) {
        console.error('统计数据API返回的数据格式不正确，期望数组:', response.data)
        return
      }

      // 转换API数据格式为页面需要的格式
      const statistics = response.data.map(item => {
        // 验证项目格式
        if (!item || typeof item !== 'object') {
          console.warn('跳过无效的统计项目:', item)
          return null
        }

        return {
          date: item.feedDate,
          dateString: item.feedDate,
          totalCount: (item.breastFeedingCount || 0) + (item.bottleFeedingCount || 0) + (item.milkFeedingCount || 0) + (item.babyFoodCount || 0),
          typeCounts: {
            '母乳亲喂': item.breastFeedingCount || 0,
            '母乳瓶喂': item.bottleFeedingCount || 0,
            '奶粉喂养': item.milkFeedingCount || 0,
            '辅食': item.babyFoodCount || 0
          }
        }
      }).filter(item => item !== null) // 过滤掉无效项目

      apiStatistics.value[cacheKey] = statistics

      // 添加到缓存
      statisticsCache.value.set(cacheKey, {
        data: statistics,
        timestamp: Date.now()
      })

      // 记录性能
      const endTime = Date.now()
      console.log(`获取统计数据耗时: ${endTime - startTime}ms`)
    } else {
      console.log('统计数据API返回空数据')

      // 缓存空数据
      statisticsCache.value.set(cacheKey, {
        data: [],
        timestamp: Date.now()
      })
    }
  } catch (error) {
    handleApiError(error, '获取统计数据')

    // 简单的重试机制（最多重试1次）
    if (!loadingStatistics.value.has(`${cacheKey}_retry`)) {
      console.log('尝试重试获取统计数据...')
      loadingStatistics.value.add(`${cacheKey}_retry`)
      setTimeout(() => {
        loadStatisticsPeriod(startDate, endDate)
      }, 2000) // 2秒后重试
      return
    }

    // 如果API失败，使用本地数据作为fallback
    console.warn('API获取统计数据失败，使用本地数据作为fallback')
  } finally {
    loadingStatistics.value.delete(cacheKey)
    // 只有在没有其他加载中的统计数据时才隐藏全局加载状态
    if (loadingStatistics.value.size === 0) {
      isLoading.value = false
    }
  }
}

async function loadRecordsByDate(date) {
  // 避免重复请求
  if (loadingRecords.value.has(date)) {
    console.log('该日期记录正在加载中，跳过重复请求:', date)
    return
  }

  // 检查缓存
  const cacheKey = `${date}_${babyInfo.value.id}`
  const cachedData = recordsCache.value.get(cacheKey)
  if (cachedData && Date.now() - cachedData.timestamp < 5 * 60 * 1000) { // 5分钟缓存
    console.log('使用缓存的记录数据:', date)
    apiRecords.value[date] = cachedData.data
    return
  }

  try {
    const startTime = Date.now()
    loadingRecords.value.add(date)
    // 只有在没有其他加载中的记录时才显示全局加载状态
    if (loadingRecords.value.size === 1) {
      isLoading.value = true
    }

    // Mock 数据模拟
    const mockResponse = {
      code: '000000',
      data: [] // 删除所有 feedingRecords.value[date] || []
    }

    // 添加超时处理
    const timeoutPromise = new Promise((_, reject) => {
      setTimeout(() => reject(new Error('请求超时')), 10000) // 10秒超时
    })

    const apiPromise = feedingRecordsByDate({
      babyId: babyId.value,
      date: date
    })

    // 使用 mock 数据或真实 API
    const response = await Promise.race([apiPromise, timeoutPromise])

    if (DEBUG_API) {
      console.log('获取指定日期记录:', date, response)
      console.log('记录API返回数据结构:', JSON.stringify(response, null, 2))
    }

    // 检查响应状态
    if (response && response.code && response.code !== '000000') {
      throw new Error(`API返回错误: ${response.message || '未知错误'}`)
    }

    if (response && response.data) {
      // 验证数据格式
      if (!Array.isArray(response.data)) {
        console.error('记录API返回的数据格式不正确，期望数组:', response.data)
        apiRecords.value[date] = []
        return
      }

      // 转换API数据格式为页面需要的格式
      const records = response.data.map(record => {
        // 验证记录格式
        if (!record || typeof record !== 'object') {
          console.warn('跳过无效的记录:', record)
          return null
        }

        return {
          id: record.id, // 保留原始记录ID，用于修改时传递
          recordId: record.recordId, // 添加recordId字段用于编辑
          time: formatTimeFromTimestamp(record.recordTime),
          type: getFeedingTypeLabel(record.feedingType),
          leftDuration: record.durationLeftSeconds ? formatDuration(record.durationLeftSeconds) : '',
          rightDuration: record.durationRightSeconds ? formatDuration(record.durationRightSeconds) : '',
          amount: record.volume ? `${record.volume}ml` : '',
          content: record.foodDetails || '',
          foodDetails: record.foodDetails || '' // 添加foodDetails字段
        }
      }).filter(record => record !== null) // 过滤掉无效记录

      // 按时间排序
      records.sort((a, b) => a.time.localeCompare(b.time))

      apiRecords.value[date] = records

      // 添加到缓存
      recordsCache.value.set(cacheKey, {
        data: records,
        timestamp: Date.now()
      })

      // 记录性能
      const endTime = Date.now()
      console.log(`获取记录数据耗时: ${endTime - startTime}ms`)
    } else {
      apiRecords.value[date] = []
      console.log('记录API返回空数据')

      // 缓存空数据
      recordsCache.value.set(cacheKey, {
        data: [],
        timestamp: Date.now()
      })
    }
  } catch (error) {
    handleApiError(error, '获取指定日期记录')

    // 简单的重试机制（最多重试1次）
    if (!loadingRecords.value.has(`${date}_retry`)) {
      console.log('尝试重试获取记录数据...')
      loadingRecords.value.add(`${date}_retry`)
      setTimeout(() => {
        loadRecordsByDate(date)
      }, 2000) // 2秒后重试
      return
    }

    // 如果API失败，使用本地数据作为fallback
    console.warn('API获取记录失败，使用本地数据作为fallback')
  } finally {
    loadingRecords.value.delete(date)
    // 只有在没有其他加载中的记录时才隐藏全局加载状态
    if (loadingRecords.value.size === 0) {
      isLoading.value = false
    }
  }
}




// 统一错误处理函数
function handleApiError(error, context) {
  console.error(`${context} 失败:`, error)

  // 检查网络状态
  uni.getNetworkType({
    success: (res) => {
      if (res.networkType === 'none') {
        console.warn('网络连接不可用')
      }
    }
  })

  // 根据错误类型提供不同的处理建议
  if (error.message && error.message.includes('超时')) {
    console.warn('请求超时，可能是网络问题')
  } else if (error.message && error.message.includes('API返回错误')) {
    console.warn('服务器返回错误，请检查参数')
  } else {
    console.warn('未知错误，请检查网络连接')
  }
}

// 工具函数
function formatTimeFromTimestamp(timestamp) {
  if (!timestamp) return ''

  let date
  // 处理不同的时间戳格式
  if (typeof timestamp === 'string') {
    // 如果是字符串格式，直接解析
    date = new Date(timestamp)
  } else if (typeof timestamp === 'number') {
    // 如果是数字格式，判断是否为毫秒级时间戳
    if (timestamp > 1000000000000) {
      // 毫秒级时间戳
      date = new Date(timestamp)
    } else {
      // 秒级时间戳
      date = new Date(timestamp * 1000)
    }
  } else {
    date = new Date(timestamp)
  }

  // 检查日期是否有效
  if (isNaN(date.getTime())) {
    console.error('无效的时间戳:', timestamp)
    return ''
  }

  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${hours}:${minutes}`
}

function formatDuration(seconds) {
  if (!seconds || seconds <= 0) return ''
  const minutes = seconds / 60
  if (minutes < 1) {
    // 不足1分钟时显示小数，保留2位小数
    return `${minutes.toFixed(2)}min`
  } else {
    // 1分钟以上时显示整数
    return `${Math.floor(minutes)}min`
  }
}

function getFeedingTypeLabel(type) {
  const typeMap = {
    1: '母乳亲喂',
    2: '母乳瓶喂',
    3: '奶粉喂养',
    4: '辅食'
  }
  return typeMap[type] || '未知'
}

function getFeedingTypeId(type) {
  const typeMap = {
    '母乳亲喂': 1,
    '母乳瓶喂': 2,
    '奶粉喂养': 3,
    '辅食': 4
  }
  return typeMap[type] || 1
}

function formatDateTimeString(date, time) {
  return `${date}T${time}:00`
}

function parseDurationToSeconds(duration) {
  if (!duration) return 0
  const match = duration.match(/(\d+)min/)
  return match ? parseInt(match[1]) * 60 : 0
}

function parseVolumeToNumber(volume) {
  if (!volume) return 0
  const match = volume.match(/(\d+)ml/)
  return match ? parseInt(match[1]) : 0
}

// 计算宝宝年龄
function calculateBabyAge(birthday) {
  const birthDate = new Date(birthday)
  const today = new Date()
  const diffTime = Math.abs(today - birthDate)
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))

  const years = Math.floor(diffDays / 365)
  const months = Math.floor((diffDays % 365) / 30)
  const days = diffDays % 30

  if (years > 0) {
    return `${years}岁${months}个月${days}天`
  } else if (months > 0) {
    return `${months}个月${days}天`
  } else {
    return `${days}天`
  }
}

// 编辑记录
function editRecord(index) {
  console.log('编辑记录:', index)

  const record = todayRecords.value[index]
  if (!record) {
    uni.showToast({
      title: '记录不存在',
      icon: 'none'
    })
    return
  }

  // 根据记录类型设置不同的字段
  let content = ''
  if (record.type === '母乳亲喂') {
    // 母乳亲喂：优先显示 foodDetails，如果没有则从左右时间构建
    if (record.foodDetails) {
      content = record.foodDetails
    } else {
      const leftTime = record.leftDuration || ''
      const rightTime = record.rightDuration || ''
      // 如果存在时间，需要加上"左"或"右"
      let timeContent = ''
      if (leftTime) {
        timeContent += `左${leftTime}`
      }
      if (rightTime) {
        if (timeContent) timeContent += ' '
        timeContent += `右${rightTime}`
      }
      content = timeContent
    }
  } else if (record.type === '母乳瓶喂') {
    // 母乳瓶喂：优先显示 foodDetails，如果没有则显示 amount
    if (record.foodDetails) {
      content = record.foodDetails
    } else {
      const amount = record.amount || ''
      content = amount ? `总乳量${amount}` : ''
    }
  } else if (record.type === '奶粉喂养') {
    // 奶粉喂养：优先显示 foodDetails，如果没有则显示 amount
    if (record.foodDetails) {
      content = record.foodDetails
    } else {
      const amount = record.amount || ''
      content = amount ? `总奶量${amount}` : ''
    }
  } else if (record.type === '辅食') {
    // 辅食：显示食物详情，如果超过20字则截断
    content = record.foodDetails || record.content || ''
    if (content && content.length > 20) {
      content = content.substring(0, 20)
    }
  }

  // 设置编辑表单数据
  editForm.value = {
    time: record.time || getCurrentTime(), // 使用记录的原始时间，如果没有则使用当前时间
    type: record.type || '',
    content: content
  }

  // 保存当前编辑的记录
  editingRecord.value = {
    index,
    record
  }

  // 显示编辑弹窗
  showEditPopup.value = true
}

// 删除记录
async function deleteRecord(record) {
  console.log('删除记录:', record)
  deletingRecord.value = record
  showDelPopup.value = true
}

// 关闭删除弹窗
function closeDelPopup() {
  showDelPopup.value = false
  deletingRecord.value = null
}

// 确认删除记录
async function confirmDelRecord() {
  if (!deletingRecord.value) {
    uni.showToast({ title: '删除记录不存在', icon: 'none' })
    return
  }

  try {
    uni.showLoading({ title: '删除中...' })
    const response = await feedingRecordsDelete({
      recordId: deletingRecord.value.recordId
    })

    if (response && response.code === '000000') {
      uni.showToast({ title: '删除成功', icon: 'success' })
      closeDelPopup()
      // 清空缓存，确保获取最新数据
      clearCache()

      // 重新加载当前日期的记录
      if (selectedDate.value) {
        await loadRecordsByDate(selectedDate.value)
      }

      // 更新图表数据
      updateChartData(true) // 删除记录后保持当前选择
    } else {
      throw new Error(response?.message || '删除失败')
    }
  } catch (error) {
    console.error('删除记录失败:', error)
    uni.showToast({ title: error.message || '删除失败', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
}

// 返回上一页
function goBack() {
  // uni.navigateBack()
  uni.redirectTo({
    url: '/pages/feedingRecord/feedingRecord'
  })
}

// 生成周数据
function generateWeekData(weekOffset = 0, targetDate = null) {
  const data = []
  const baseDate = new Date() // 使用当前日期作为基准
  baseDate.setDate(baseDate.getDate() + weekOffset * 7)

  // 计算当前周的开始和结束日期
  const startDate = new Date(baseDate)
  startDate.setDate(baseDate.getDate() - baseDate.getDay()) // 设置为周日
  const endDate = new Date(startDate)
  endDate.setDate(startDate.getDate() + 6) // 设置为周六

  const startDateString = formatDateString(startDate)
  const endDateString = formatDateString(endDate)

  // 获取统计数据的缓存键
  const cacheKey = `${startDateString}_${endDateString}_${babyId.value}`
  const statisticsData = apiStatistics.value[cacheKey] || []

  // 确定要选中的日期
  let activeDate = targetDate
  if (!activeDate) {
    if (weekOffset === 0) {
      // 当前周，选择今天
      const today = new Date()
      activeDate = formatDateString(today)
    } else {
      // 其他周，选择该周的第一天
      activeDate = startDateString
    }
  }

  for (let i = 0; i < 7; i++) {
    const date = new Date(startDate)
    date.setDate(startDate.getDate() + i)
    const dateString = formatDateString(date)

    // 从统计数据中查找对应日期的数据
    const statisticsItem = statisticsData.find(item => item.dateString === dateString)

    if (statisticsItem) {
      // 使用接口返回的统计数据
      data.push({
        date: `${date.getMonth() + 1}/${date.getDate()}`,
        dateString,
        totalCount: statisticsItem.totalCount,
        typeCounts: statisticsItem.typeCounts
      })
    } else {
      // 如果没有统计数据，使用默认值
      data.push({
        date: `${date.getMonth() + 1}/${date.getDate()}`,
        dateString,
        totalCount: 0,
        typeCounts: {
          '母乳亲喂': 0,
          '母乳瓶喂': 0,
          '奶粉喂养': 0,
          '辅食': 0
        }
      })
    }
  }

  return data
}

// 上一周
async function prevWeek() {
  currentWeek.value--
  await updateChartData(false) // 切换周时使用默认选择
}

// 下一周
async function nextWeek() {
  currentWeek.value++
  await updateChartData(false) // 切换周时使用默认选择
}

// 更新图表数据
async function updateChartData(keepCurrentSelection = false) {
  // 确保统计数据已加载
  const baseDate = new Date()
  baseDate.setDate(baseDate.getDate() + currentWeek.value * 7)

  const startDate = new Date(baseDate)
  startDate.setDate(baseDate.getDate() - baseDate.getDay())
  const endDate = new Date(startDate)
  endDate.setDate(startDate.getDate() + 6)

  const startDateString = formatDateString(startDate)
  const endDateString = formatDateString(endDate)

  // 等待统计数据加载完成
  await loadStatisticsPeriod(startDateString, endDateString)

  // 确定要选中的日期
  let targetDate = null
  if (keepCurrentSelection && selectedDate.value) {
    // 如果保持当前选择，检查当前选中的日期是否在当前周内
    const currentSelectedDate = new Date(selectedDate.value)
    const weekStart = new Date(startDate)
    const weekEnd = new Date(endDate)

    if (currentSelectedDate >= weekStart && currentSelectedDate <= weekEnd) {
      // 当前选中的日期在当前周内，保持选中
      targetDate = selectedDate.value
    } else {
      // 当前选中的日期不在当前周内，使用默认选择
      if (currentWeek.value === 0) {
        // 当前周，选择今天
        const today = new Date()
        targetDate = formatDateString(today)
      } else {
        // 其他周，选择该周的第一天
        targetDate = startDateString
      }
    }
  } else {
    // 使用默认选择逻辑
    if (currentWeek.value === 0) {
      // 当前周，选择今天
      const today = new Date()
      targetDate = formatDateString(today)
    } else {
      // 其他周，选择该周的第一天
      targetDate = startDateString
    }
  }

  // 更新图表数据，传入目标日期
  chartData.value = generateWeekData(currentWeek.value, targetDate)

  // 更新选中的日期
  selectedDate.value = targetDate

  // 加载选中日期的记录
  if (selectedDate.value) {
    await loadRecordsByDate(selectedDate.value)
  }
}

// 点击柱状图切换日期
async function onBarClick(day) {
  console.log('柱状图点击事件触发:', day)
  console.log('当前 chartData:', chartData.value)
  console.log('当前 selectedDate:', selectedDate.value)

  if (day && day.dateString) {
    console.log('切换到日期:', day.dateString)
    await selectDate(day.dateString)
  } else {
    console.log('无效的 day 对象或缺少 dateString:', day)
  }
}

// 编辑弹窗相关方法
function closeEditPopup() {
  showEditPopup.value = false
  editingRecord.value = null
  editForm.value = {
    time: '',
    type: '',
    content: ''
  }
}

function onEditTimeChange(event) {
  editForm.value.time = event.detail.value
}

function onEditTypeChange(event) {
  editForm.value.type = feedingTypes[event.detail.value]
}

function saveEditRecord() {
  // 验证表单
  if (!editForm.value.time || !editForm.value.type) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
    return
  }

  // 处理辅食内容截断
  let content = editForm.value.content || ''
  if (editForm.value.type === '辅食' && content.length > 20) {
    content = content.substring(0, 20)
    editForm.value.content = content
  } else if (content && content.length > 20) {
    uni.showToast({
      title: '喂养详情最多20字',
      icon: 'none'
    })
    return
  }

  if (!editingRecord.value) {
    uni.showToast({
      title: '编辑记录不存在',
      icon: 'none'
    })
    return
  }

  // 构建API请求数据
  const { index, record } = editingRecord.value

  // 根据记录类型处理不同的数据
  let apiData = {
    recordId: record.recordId,
    babyId: babyId.value,
    recordTime: formatDateTimeString(selectedDate.value, editForm.value.time),
    feedingType: getFeedingTypeId(editForm.value.type)
  }

  // 所有类型都使用 foodDetails 字段保存
  apiData.foodDetails = editForm.value.content || ''

  // 根据记录类型设置其他字段
  if (editForm.value.type === '母乳亲喂') {
    // 母乳亲喂：解析时间（格式：时间1 时间2）
    const content = editForm.value.content || ''
    const timeParts = content.trim().split(/\s+/)

    if (timeParts.length >= 1 && timeParts[0]) {
      apiData.durationLeftSeconds = parseTimeToSeconds(timeParts[0])
    }
    if (timeParts.length >= 2 && timeParts[1]) {
      apiData.durationRightSeconds = parseTimeToSeconds(timeParts[1])
    }
  } else if (editForm.value.type === '母乳瓶喂' || editForm.value.type === '奶粉喂养') {
    // 母乳瓶喂和奶粉喂养：解析奶量
    const content = editForm.value.content || ''
    const volumeMatch = content.match(/(\d+)ml/)
    if (volumeMatch) {
      apiData.volume = parseInt(volumeMatch[1])
    }
  }

  // 调用API保存修改
  saveRecordToAPI(apiData, index)
}

function getCurrentTime() {
  const now = new Date()
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  return `${hours}:${minutes}`
}

// 格式化日期字符串
function formatDateString(date) {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

async function saveRecordToAPI(apiData, index) {
  try {
    uni.showLoading({
      title: '保存中...'
    })

    const response = await feedingRecordsAPI(apiData)

    if (response && response.code === '000000') {
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      })

      closeEditPopup()

      // 清空缓存，确保获取最新数据
      clearCache()

      // 重新加载当前日期的记录
      if (selectedDate.value) {
        await loadRecordsByDate(selectedDate.value)
      }

      // 更新图表数据
      updateChartData(true) // 保存记录后保持当前选择
    } else {
      throw new Error(response?.message || '保存失败')
    }
  } catch (error) {
    console.error('保存记录失败:', error)
    uni.showToast({
      title: error.message || '保存失败',
      icon: 'none'
    })
  } finally {
    uni.hideLoading()
  }
}

function updateLocalRecord(index, formData) {
  const dateKey = selectedDate.value
  if (!dateKey) return

  // 更新API数据
  if (apiRecords.value[dateKey] && apiRecords.value[dateKey][index]) {
    const record = apiRecords.value[dateKey][index]
    record.time = formData.time
    record.type = formData.type
    record.content = formData.content
    record.leftDuration = formData.leftDuration
    record.rightDuration = formData.rightDuration
    record.amount = formData.amount
  }

  // 更新本地数据
  // 本地数据不再需要更新，因为API调用失败时，apiRecords.value[dateKey] 为空
}

// 选择日期
async function selectDate(dateString) {
  console.log('selectDate 被调用，日期:', dateString)
  selectedDate.value = dateString

  // 加载选中日期的记录
  await loadRecordsByDate(dateString)
  console.log('selectDate 完成，当前选中日期:', selectedDate.value)
}

// 获取柱状图段数据
function getBarSegments(day) {
  const segments = [];
  const totalCount = day.totalCount;

  if (totalCount === 0 || maxWeekCount.value === 0) {
    return segments;
  }

  // 定义类型顺序和颜色
  const typeOrder = ['母乳亲喂', '母乳瓶喂', '奶粉喂养', '辅食'];
  const typeColors = {
    '母乳亲喂': '#F9D9D9', // 浅粉色
    '母乳瓶喂': '#D9D9F9', // 浅紫色
    '奶粉喂养': '#F9E9D9', // 浅橙色/米色
    '辅食': '#D9F9D9' // 浅绿色
  };

  // 按顺序添加有数据的类型，从底部向上堆叠
  typeOrder.forEach(type => {
    if (day.typeCounts[type] > 0) {
      // 计算该类型在当周最大次数中的占比
      const height = (day.typeCounts[type] / maxWeekCount.value) * 100;
      segments.push({
        height: height,
        color: typeColors[type]
      });
    }
  });

  return segments;
}

// 页面加载
onLoad(async () => {
  // 加载宝宝信息
  await userStore.loadBabyInfo()
  console.log('宝宝信息加载完成:', userStore.babyInfo)

  updateChartData(false) // 初始化时使用默认选择
  // 初始化API数据
  initializeApiData()
})

// 初始化图表数据
async function initializeChartData() {
  console.log('初始化图表数据...')

  // 加载当前周的统计数据
  const baseDate = new Date()
  const startDate = new Date(baseDate)
  startDate.setDate(baseDate.getDate() - baseDate.getDay()) // 设置为周日
  const endDate = new Date(startDate)
  endDate.setDate(startDate.getDate() + 6) // 设置为周六

  const startDateString = formatDateString(startDate)
  const endDateString = formatDateString(endDate)

  // 等待统计数据加载完成
  await loadStatisticsPeriod(startDateString, endDateString)

  // 更新图表数据
  await updateChartData(false) // 初始化时使用默认选择

  console.log('图表数据初始化完成')
}

// 初始化API数据
async function initializeApiData() {
  console.log('初始化API数据...')

  // 加载当前选中日期的记录
  if (selectedDate.value) {
    console.log('加载当前选中日期记录:', selectedDate.value)
    await loadRecordsByDate(selectedDate.value)
  }

  console.log('API数据初始化完成')
}

// 页面挂载时初始化数据
onMounted(async () => {
  // 加载宝宝信息
  await userStore.loadBabyInfo()
  console.log('宝宝信息加载完成:', userStore.babyInfo)

  // 先加载统计数据，然后更新图表（updateChartData 中已经包含了加载记录的逻辑）
  await initializeChartData()
})

// 页面显示时刷新数据
onShow(async () => {
  // 加载宝宝信息
  await userStore.loadBabyInfo()
  console.log('宝宝信息加载完成:', userStore.babyInfo)

  // 如果已经有选中日期，刷新当前日期的记录
  if (selectedDate.value) {
    loadRecordsByDate(selectedDate.value)
  }
})

// 移除监听选中日期变化，避免循环调用
// watch(selectedDate, () => {
//   updateChartData()
// })

// 格式化月份字符串
function formatMonthString(date) {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  return `${year}-${month}`
}

// 解析时间格式为秒数
function parseTimeToSeconds(timeString) {
  if (!timeString) return 0
  const parts = timeString.split(':')
  if (parts.length === 2) {
    const minutes = parseInt(parts[0], 10)
    const seconds = parseInt(parts[1], 10)
    return minutes * 60 + seconds
  }
  return 0
}



// 获取编辑表单的占位符
function getEditFormPlaceholder() {
  return '输入具体内容'
}

// 清空缓存函数
function clearCache() {
  console.log('清空缓存...')
  statisticsCache.value.clear()
  recordsCache.value.clear()
  loadingStatistics.value.clear()
  loadingRecords.value.clear()
  apiStatistics.value = {}
  apiRecords.value = {}
}

// 页面卸载时清理资源
onUnmounted(() => {
  // 清理缓存
  clearCache()
})

// 测试函数（开发时使用）
function testApiIntegration() {
  console.log('=== 测试API集成 ===')
  console.log('当前选中日期:', selectedDate.value)
  console.log('当前周数:', currentWeek.value)
  console.log('当前宝宝ID:', babyId.value)
  console.log('API统计数据:', apiStatistics.value)
  console.log('API记录数据:', apiRecords.value)
  console.log('缓存状态:', {
    statisticsCache: statisticsCache.value.size,
    recordsCache: recordsCache.value.size
  })
}

// 功能总结：
// 1. 自动加载：页面加载、显示、日期切换时自动调用API
// 2. 智能缓存：避免重复请求，提升性能
// 3. 错误处理：网络错误、超时、服务器错误等
// 4. 重试机制：失败时自动重试，提高成功率
// 5. 数据验证：确保API返回数据的正确性
// 6. 性能监控：记录API调用耗时
// 7. 调试支持：可控制的调试信息输出
// 8. 资源清理：页面卸载时清理缓存和定时器
// 9. 交互功能：点击柱状图切换日期，按周切换统计
// 10. 动态年龄：根据宝宝生日计算当前年龄
// 11. 数据转换：API数据格式转换为页面需要的格式
// 12. 加载状态：智能管理全局和局部加载状态
// 13. Mock数据：提供完整的mock数据支持，便于开发和测试
// 14. 修改功能：支持修改喂养记录，包括时间、类型、详情等
// 15. 统一样式：记录列表样式与feedingRecord页面保持一致
// 16. 命名冲突解决：API函数重命名为 feedingRecordsAPI 以避免与本地数据变量冲突
</script>

<style lang="scss" scoped>
.feeding-analysis-page {
  min-height: 100vh;
  background: #fef6eb; // 根据设计稿调整背景色
  display: flex;
  flex-direction: column;
}

// 状态栏占位
.status-bar-placeholder {
  height: 75rpx;
  background: #fef6eb;
}

// 头部导航
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;

  .nav-left {
    display: flex;
    align-items: center;

    .back-btn {
      width: 20rpx;
      height: 32rpx;
      margin-right: 20rpx;

    }
  }
}

// 图例
.legend-section {
  display: flex;
  // justify-content: space-around;
  justify-content: start;
  align-items: center;
  padding: 25rpx 40rpx;
  background: #fef6eb;

  .legend-item {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-right: 20rpx;

    .legend-color {
      width: 32rpx; // 16px * 2
      height: 32rpx; // 16px * 2
      border-radius: 6rpx; // 稍微圆角

      &.legend-breastfeeding {
        background: #F9D9D9; // 浅粉色
      }

      &.legend-bottle {
        background: #D9D9F9; // 浅紫色
      }

      &.legend-formula {
        background: #F9E9D9; // 浅橙色/米色
      }

      &.legend-food {
        background: #D9F9D9; // 浅绿色
      }
    }

    .legend-text {
      font-size: 26rpx;
      color: #000000; // 黑色文字
      font-weight: 500;
    }
  }
}

// CSS柱状图区域
.chart-section {
  // background: #FDFBF7;
  // padding: 30rpx 0;

  .chart-container {
    display: flex;
    align-items: center;
    // padding: 0 30rpx;

    .chart-nav-left,
    .chart-nav-right {
      width: 42rpx;
      height: 144rpx;
      // background: #FDFBF7; // 浅米色背景
      // border-radius: 35rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      // margin: 0 15rpx;
      // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

      .nav-arrow {
        width: 42rpx;
        height: 144rpx;
        // font-size: 28rpx;
        // color: #000000; // 黑色箭头
        // font-weight: bold;
        // line-height: 1;
      }
    }

    .chart-content {
      // flex: 1;
      // margin: 0 25rpx;
      height: 500rpx;
      // background: transparent; // 去掉背景色
      // border-radius: 16rpx;
      // padding: 20rpx;
      // 去掉阴影

      .chart-bars {
        display: flex;
        align-items: flex-end; // 从底部对齐
        justify-content: space-between;
        height: 100%;
        // padding: 20rpx 0 40rpx 0;
        box-sizing: border-box;
        position: relative;

        .chart-bar-wrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex: 1;
          position: relative;
          padding: 0 10rpx;
          transition: all 0.3s ease;



          .chart-bar {
            width: 77rpx;
            height: 360rpx;
            display: flex;
            flex-direction: column;
            // 移除容器的border-radius，让内部段自己控制圆角
            position: relative;
            background: transparent;
            justify-content: flex-end; // 确保段从底部开始
            margin-bottom: 20rpx;


            .bar-segment {
              width: 100%;
              min-height: 10rpx;
              transition: height 0.3s ease;
              flex-shrink: 0;

              // 如果只有一个段，整个柱子都有圆角
              &:only-child {
                border-radius: 8rpx !important;
              }

              // 多个段的情况
              &:not(:only-child) {

                // 第一个段（底部）有底部圆角
                &:first-child {
                  border-top-left-radius: 8rpx !important;
                  border-top-right-radius: 8rpx !important;
                }

                // 最后一个段（顶部）有顶部圆角
                &:last-child {
                  border-bottom-left-radius: 8rpx !important;
                  border-bottom-right-radius: 8rpx !important;
                }

                // 中间段没有圆角
                &:not(:first-child):not(:last-child) {
                  border-radius: 0 !important;
                }
              }
            }
          }

          .bar-count {
            position: absolute;
            top: -40rpx; // 调整位置到柱子顶部上方
            left: 50%;
            transform: translateX(-50%);
            font-size: 20rpx;
            color: #C89F6B;
            font-weight: bold;
            white-space: nowrap;
            z-index: 3;
            pointer-events: none; // 确保不拦截点击事件
          }

          .bar-date {
            margin-top: 10rpx;
            font-size: 24rpx;
            color: #666666;
            font-weight: 500;
            position: relative;
            z-index: 2;
            pointer-events: none; // 确保不拦截点击事件

            &.selected {
              color: #1d1e25;
            }
          }

          // 确保点击时没有任何背景色变化
          &:active {
            background: transparent !important;
          }

          // 确保hover时没有任何背景色变化
          &:hover {
            background: transparent !important;
          }

          .selected-bg {
            position: absolute;
            bottom: -20rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 156rpx;
            height: 62rpx;
            z-index: 1;
            pointer-events: none; // 确保不拦截点击事件
          }
        }
      }
    }
  }

}

.gap-bg {
  height: 43rpx;
  width: 100%;
  margin-top: -43rpx;
  border-radius: 30rpx 30rpx 0 0;
  background: #ffffff;
}

.baby-age {
  text-align: left;
  padding: 25rpx 0 0 40rpx;
  background: #ffffff;
  height: 80rpx;

  text {
    font-size: 26rpx;
    color: #000000; // 黑色文字
    font-weight: bold; // 加粗
    line-height: 80rpx;
  }
}

// 记录列表
.records-container {
  flex: 1;
  background: #ffffff;
  padding-bottom: 180rpx; // 为浮动按钮留出空间

  .loading-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300rpx;

    .loading-text {
      font-size: 28rpx;
      color: #999;
    }
  }

  .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300rpx;

    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }

  .record-list {
    padding: 20rpx 35rpx 0rpx 20rpx;

    .timeline-connector {
      width: 1rpx;
      height: 156rpx;
      background: #d3a358;
      margin-left: 16rpx;
      margin-top: -125rpx;
      margin-bottom: -32rpx;
    }

    .record-item {
      display: flex;
      margin-bottom: 40rpx; // 增加间距以容纳连接线

      .time-dot {
        width: 120rpx;
        display: flex;
        align-items: flex-start; // 改为顶部对齐
        margin-right: 0rpx;
        margin-left: 10rpx;
        padding-top: 30rpx; // 调整顶部内边距，与文案第一行对齐

        .dot {
          width: 16rpx;
          height: 16rpx;
          border-radius: 50%;
          margin-right: 16rpx;
          margin-top: 8rpx; // 调整圆点位置，与文案第一行对齐
        }

        .time {
          font-size: 24rpx;
          color: #666;
          white-space: nowrap;
          line-height: 1.4; // 调整行高，与文案保持一致
        }
      }

      .record-content {
        flex: 1;
        width: 548rpx;
        height: 142rpx;
        border-radius: 32rpx;
        padding: 24rpx;
        box-sizing: border-box; // 确保padding包含在宽高中
        overflow: hidden; // 防止内容溢出

        .record-header {
          display: flex;
          align-items: center;
          margin-bottom: 12rpx; // 减少底部间距，适应固定高度

          .record-icon-img-muruqinwei {
            width: 30rpx;
            height: 34rpx;
            margin-right: 12rpx;
            line-height: 1; // 确保图标行高一致
          }

          .record-icon-img-pingwei {
            width: 26rpx;
            height: 37rpx;
            margin-right: 12rpx;
            line-height: 1; // 确保图标行高一致
          }

          .record-icon-img-naifen {
            width: 30rpx;
            height: 34rpx;
            margin-right: 12rpx;
            line-height: 1; // 确保图标行高一致
          }

          .record-icon-img-fushi {
            width: 36rpx;
            height: 31rpx;
            margin-right: 12rpx;
            line-height: 1; // 确保图标行高一致
          }

          .record-type {
            flex: 1;
            font-size: 28rpx;
            font-weight: 600;
            color: #333;
            line-height: 1.4; // 与时间文字保持一致的行高
          }

          .edit-btn {
            font-size: 24rpx;
            color: #1d1e25;
            padding: 8rpx 16rpx;
            border: 1rpx solid #ffffff;
            border-radius: 20rpx;
            background: #ffffff;
            opacity: 0.8;
          }

          .delete-btn {
            font-size: 24rpx;
            color: #1d1e25;
            padding: 8rpx 16rpx;
            border: 1rpx solid #ffffff;
            border-radius: 20rpx;
            background: #ffffff;
            opacity: 0.8;
            margin-right: 16rpx;
          }
        }

        .record-details {
          .duration-info {
            display: flex;
            gap: 16rpx; // 减少间距
            margin-bottom: 6rpx; // 减少底部间距

            .duration-text {
              display: flex;
              align-items: center;
              gap: 16rpx; // 进一步增加间距

              .duration-label {
                font-size: 24rpx;
                color: #666;
              }

              .duration-time {
                font-size: 24rpx;
                color: #333;
                font-weight: 600; // 时间加粗
              }
            }
          }

          .amount-info {
            margin-bottom: 6rpx; // 减少底部间距

            .amount-text {
              display: flex;
              align-items: center;
              gap: 16rpx; // 进一步增加间距

              .duration-label,
              .amount-label {
                font-size: 24rpx;
                color: #666;
              }

              .duration-time,
              .amount-value {
                font-size: 24rpx;
                color: #333;
                font-weight: 600; // 数值加粗
              }
            }
          }

          .content-info {
            .content-text {
              font-size: 24rpx;
              color: #333;
              font-weight: 600; // 辅食内容加粗
              line-height: 1.4;
              white-space: nowrap; // 强制一行显示
              overflow: hidden; // 隐藏超出部分
              text-overflow: ellipsis; // 超出显示...
              max-width: 100%; // 确保不超出容器
              word-break: keep-all; // 防止单词被截断
            }
          }
        }
      }
    }
  }
}

// 弹窗样式
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  touch-action: none;
}

.popup-content {
  background: #f6f8fa;
  width: 100%;
  border-radius: 20rpx 20rpx 0 0;
  padding: 40rpx 30rpx;
  animation: slideUp 0.3s ease-out;
  max-height: 80vh;
  overflow-y: auto;

  .popup-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    text-align: left;
    margin-bottom: 40rpx;
  }

  .form-item {
    margin-bottom: 30rpx;
    position: relative;

    .label {
      position: absolute;
      left: 24rpx;
      top: 50%;
      transform: translateY(-50%);
      font-size: 28rpx;
      color: #333;
      z-index: 2;
      pointer-events: none;
    }

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

    .picker,
    .input {
      width: 100%;
      padding: 24rpx 24rpx 24rpx 120rpx;
      background: #ffffff;
      border-radius: 12rpx;
      font-size: 28rpx;
      text-align: right;
      color: #333;
      min-height: 88rpx;
      border: 1rpx solid #e9ecef;
      box-sizing: border-box;
    }

    .picker {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-height: 88rpx;
    }


  }

  .popup-buttons {
    display: flex;
    gap: 20rpx;
    margin-top: 50rpx;

    .cancel-btn,
    .confirm-btn {
      width: 331rpx;
      height: 94rpx;
      flex: none;
    }

    .cancel-btn {
      &:active {
        opacity: 0.8;
      }
    }

    .confirm-btn {
      &:active {
        opacity: 0.8;
      }
    }
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

// 响应式适配
@media screen and (max-width: 750rpx) {
  .legend-section {
    padding: 25rpx 30rpx;

    .legend-item {
      gap: 8rpx;

      .legend-color {
        width: 20rpx;
        height: 20rpx;
      }

      .legend-text {
        font-size: 24rpx;
      }
    }
  }


  .records-container {
    .record-list {
      padding: 0 20rpx 30rpx 20rpx;

      .record-item {
        .time-dot {
          width: 120rpx;
          margin-right: 15rpx;
        }

        .record-content {
          padding: 24rpx;
        }
      }
    }
  }


}

// 删除二次确认弹窗样式
.del-popup-content {
  position: relative;
  background: transparent;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .del-record-bg {
    width: 618rpx;
    height: 493rpx;
    display: block;
    margin: 0 auto;
  }

  .del-buttons-container {
    position: absolute;
    bottom: 80rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 40rpx;
    align-items: center;

    .del-record-cancel-btn,
    .del-record-confirm-btn {
      width: 279rpx;
      height: 101rpx;
      margin-top: -1200rpx;
      display: block;
    }
  }
}
</style>
