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

    <!-- 头部导航 -->
    <view class="header">
      <view class="nav-left">
        <image :src="feedingRecordRes.icon_return" class="back-btn" />
        <image :src="feedingRecordRes.icon_star" class="baby-icon-star" />
        <view class="baby-info">
          <text class="baby-name">小糖豆3123</text>
          <text class="baby-age">1岁24天</text>
        </view>
        <image :src="feedingRecordRes.icon_baby_change" class="baby-icon-change" />
      </view>
    </view>

    <!-- 日期选择器和统计按钮 -->
    <view class="date-stats-row">
      <view class="date-selector">
        <uni-datetime-picker ref="datePickerRef" v-model="currentSelectedDate" type="date" :start="earliestDateString"
          :end="todayDateString" @change="onDateChange" :clear-icon="false" :border="false">
          <view class="date-display">
            <text class="date-text">{{ formatCurrentDate() }}</text>
            <image :src="feedingRecordRes.icon_arrow_yellow" class="arrow-icon" />
          </view>
        </uni-datetime-picker>
      </view>
      <view class="stats-section" @click="goToFeedingAnalysis">
        <image :src="feedingRecordRes.icon_analysis" class="stats-icon" />
        <text class="stats-btn"> 统计</text>
      </view>
    </view>

    <!-- 日历组件 -->
    <view class="calendar-wrapper">
      <!-- 星期标题 -->
      <view class="weekday-row">
        <view class="weekday-cell" v-for="day in weekdays" :key="day">{{ day }}</view>
      </view>

      <!-- 日期网格 -->
      <view class="date-grid" :class="{ 'collapsed': !isCalendarExpanded }">
        <view v-for="(date, index) in calendarDates" :key="index" class="date-cell" :class="{
          'selected': date.isSelected,
          'today': date.isToday,
          'other-month': !date.isCurrentMonth,
          'future': date.isFuture,
          'past-with-record': date.isPast && hasRecordOnDate(date.dateString) && date.isCurrentMonth,
          'past-no-record': date.isPast && !hasRecordOnDate(date.dateString) && date.isCurrentMonth,
          'other-month-clickable': !date.isCurrentMonth && !date.isFuture,
          'disabled': date.isFuture
        }" @click="selectDate(date)">
          <text class="date-text">
            {{ date.isToday ? '今' : date.day }}
          </text>
          <view v-if="hasRecordOnDate(date.dateString)" class="record-indicator"></view>
        </view>
      </view>



      <!-- 展开/收起按钮 -->
      <view class="expand-btn" @click="toggleCalendarExpand">
        <image :src="isCalendarExpanded ? feedingRecordRes.dropUp : feedingRecordRes.dropDown" class="expand-icon" />
      </view>
    </view>

    <!-- 喂养记录列表 -->
    <scroll-view class="records-container" scroll-y>
      <view v-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="edit-btn" @click="editRecord(index)">修改</text>
              </view>
              <view class="record-details">
                <!-- 母乳亲喂：显示左右时间，时间加粗 -->
                <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 v-if="index < todayRecords.length - 1" class="timeline-connector"></view>
        </template>
      </view>
    </scroll-view>

    <!-- 底部添加按钮 -->
    <view class="bottom-add-btn" @click="addFeedingRecord">
      <image :src="feedingRecordRes.add_btn" class="add-btn-img" />
    </view>

    <!-- 添加记录弹窗 -->
    <view class="popup-mask" v-if="showPopup" @click="closePopup">
      <view class="popup-content" @click.stop>
        <view class="popup-title">添加喂养记录</view>
        <view class="form-item">
          <text class="label">时间：</text>
          <picker mode="time" :value="newRecord.time" @change="onTimeChange">
            <view class="picker">{{ newRecord.time || '请选择时间' }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">类型：</text>
          <picker :range="feedingTypes" @change="onTypeChange">
            <view class="picker">{{ newRecord.type || '请选择类型' }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">内容：</text>
          <input class="input" v-model="newRecord.content" placeholder="请输入具体内容" maxlength="50" />
        </view>
        <view class="popup-buttons">
          <button class="cancel-btn" @click="closePopup">取消</button>
          <button class="confirm-btn" @click="saveRecord">保存</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const version = 'v1'


const feedingRecordRes = {
  dropDown: `/static/feedingRecord/${version}/dropDown.png`,
  dropUp: `/static/feedingRecord/${version}/dropUp.png`,
  icon_analysis: `/static/feedingRecord/${version}/icon_analysis.png`,
  icon_arrow_yellow: `/static/feedingRecord/${version}/icon_arrow_yellow.png`,
  icon_fushi: `/static/feedingRecord/${version}/icon_fushi.png`,
  icon_muru: `/static/feedingRecord/${version}/icon_muru.png`,
  icon_naifen: `/static/feedingRecord/${version}/icon_naifen.png`,
  icon_pingwei: `/static/feedingRecord/${version}/icon_pingwei.png`,
  icon_star: `/static/feedingRecord/${version}/icon_star.png`,
  icon_return: `/static/feedingRecord/${version}/icon_return.png`,
  icon_baby_change: `/static/feedingRecord/${version}/icon_baby_change.png`,
  add_btn: `/static/feedingRecord/${version}/addBtn.png`,

}


// 响应式数据
const currentSelectedDate = ref('')
const showPopup = ref(false)
const isCalendarExpanded = ref(false)
const currentDate = ref(new Date())
const datePickerRef = ref(null)
// 添加一个强制更新标志
const forceUpdate = ref(0)
// 添加当前显示月份的字符串表示，确保响应性
const currentMonthKey = ref('')

// 新记录表单
const newRecord = ref({
  time: '',
  type: '',
  leftDuration: '',
  rightDuration: '',
  amount: '',
  content: ''
})

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

// 星期标题
const weekdays = ['日', '一', '二', '三', '四', '五', '六']

// 喂养记录数据
const feedingRecords = ref({
  '2025-07-03': [
    {
      time: '06:20',
      type: '母乳亲喂',
      leftDuration: '10min',
      rightDuration: '10min'
    },
    {
      time: '09:30',
      type: '母乳瓶喂',
      amount: '约50ml'
    },
    {
      time: '13:50',
      type: '奶粉喂养',
      amount: '约50ml'
    },
    {
      time: '17:25',
      type: '辅食',
      content: '小米粥、玉米、馒头、蒸面条、包子、奶粉、啊啊啊啊、啊啊啊啊'
    }
  ],
  '2025-07-02': [
    {
      time: '07:00',
      type: '母乳亲喂',
      leftDuration: '12min',
      rightDuration: '8min'
    },
    {
      time: '11:30',
      type: '母乳瓶喂',
      amount: '约80ml'
    }
  ],
  '2025-06-01': [
    {
      time: '08:00',
      type: '母乳亲喂',
      leftDuration: '15min',
      rightDuration: '10min'
    }
  ],
  '2025-05-31': [
    {
      time: '09:15',
      type: '母乳亲喂',
      leftDuration: '8min',
      rightDuration: '12min'
    }
  ],
  '2025-05-30': [
    {
      time: '10:00',
      type: '母乳瓶喂',
      amount: '约60ml'
    }
  ],
  '2025-07-01': [
    {
      time: '08:30',
      type: '母乳亲喂',
      leftDuration: '15min',
      rightDuration: '12min'
    }
  ],
  '2025-04-25': [
    {
      time: '14:00',
      type: '辅食',
      content: '苹果泥、香蕉'
    }
  ]
})

// 计算属性 - 当前选中日期的记录
const todayRecords = computed(() => {
  if (!currentSelectedDate.value) return []
  return feedingRecords.value[currentSelectedDate.value] || []
})

// 计算属性 - 今天的日期字符串（用于限制uni-datetime-picker）
const todayDateString = computed(() => {
  const today = new Date()
  const dateStr = formatDateString(today)
  console.log('uni-datetime-picker最大可选日期:', dateStr)
  return dateStr
})

// 计算属性 - 最早可选日期（往前一年）
const earliestDateString = computed(() => {
  const today = new Date()
  const earliestDate = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate())
  const dateStr = formatDateString(earliestDate)
  console.log('uni-datetime-picker最早可选日期:', dateStr)
  return dateStr
})

// 获取日历数据
const calendarDates = computed(() => {
  // 依赖多个响应性值来确保更新
  const updateFlag = forceUpdate.value
  const monthKey = currentMonthKey.value
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth()
  const selectedDate = currentSelectedDate.value
  const expanded = isCalendarExpanded.value

  // console.log(`====== 重新计算日历数据 (${updateFlag}) ======`)
  // console.log(`计算属性触发 - 年月: ${year}-${month + 1}, 月份键: ${monthKey}`)
  // console.log(`当前选中日期: ${selectedDate}`)
  // console.log(`日历展开状态: ${expanded}`)
  // console.log(`当前月份设置: ${currentDate.value.getFullYear()}-${currentDate.value.getMonth() + 1}`)

  // 获取当月第一天
  const firstDay = new Date(year, month, 1)

  // 获取第一周的开始日期（周日为0）
  const startDate = new Date(firstDay)
  startDate.setDate(firstDay.getDate() - firstDay.getDay())

  const dates = []

  // 如果是收起状态，只显示包含选中日期的那一周
  if (!expanded && selectedDate) {
    // console.warn("323333333333")
    const selectedDateObj = new Date(selectedDate)
    const selectedDayOfWeek = selectedDateObj.getDay()
    const weekStartDate = new Date(selectedDateObj)
    weekStartDate.setDate(selectedDateObj.getDate() - selectedDayOfWeek)

    for (let i = 0; i < 7; i++) {
      const date = new Date(weekStartDate)
      date.setDate(weekStartDate.getDate() + i)
      dates.push(createDateObject(date))
    }
  } else {
    // console.warn("444444444444")
    // 展开状态显示完整月份（6周）
    for (let i = 0; i < 42; i++) {
      const date = new Date(startDate)
      date.setDate(startDate.getDate() + i)
      dates.push(createDateObject(date))
    }
  }

  return dates
})

// 方法
function createDateObject(date) {
  const today = new Date()
  const currentMonth = currentDate.value.getMonth()
  const currentYear = currentDate.value.getFullYear()
  const dateString = formatDateString(date)

  // 创建只包含日期部分的Date对象进行比较
  const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate())
  const todayOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate())

  // 修复：确保正确判断是否为当前月份
  const isCurrentMonth = date.getMonth() === currentMonth && date.getFullYear() === currentYear
  const isToday = isSameDay(date, today)
  const isFuture = dateOnly > todayOnly
  const isPast = dateOnly < todayOnly

  // console.warn("555555555555", dateString, 'isCurrentMonth:', isCurrentMonth, 'isToday:', isToday, 'isFuture:', isFuture, 'isPast:', isPast)


  // 调试信息：检查月份判断逻辑
  // if (date.getMonth() === 6 && date.getFullYear() === 2025 && date.getDate() <= 5) {
  //   const status = isToday ? '今天' : isFuture ? '未来' : '过去'
  //   console.log(`7月${date.getDate()}日: ${status}, 当月=${isCurrentMonth}, 当前设置月份=${currentMonth + 1}, 日期月份=${date.getMonth() + 1}`)

  //   // 检查bug
  //   if (currentYear === 2025 && currentMonth === 6 && !isCurrentMonth) {
  //     console.error(`❌ BUG: 7月${date.getDate()}日被错误标记为非当月!`)
  //     console.error(`当前设置: ${currentYear}-${currentMonth + 1}, 日期: ${date.getFullYear()}-${date.getMonth() + 1}`)
  //   }
  // }

  const dateObj = {
    date: new Date(date),
    day: date.getDate(),
    dateString,
    isToday,
    isCurrentMonth,
    isSelected: currentSelectedDate.value === dateString,
    isFuture,
    isPast
  }

  // 调试：检查月份切换后的状态
  // if (date.getMonth() === 6 && date.getFullYear() === 2025 && date.getDate() <= 5) {
  //   console.log(`创建日期对象: 7月${date.getDate()}日, 当月=${dateObj.isCurrentMonth}, 选中=${dateObj.isSelected}`)
  // }

  return dateObj
}



function selectDate(dateObj) {
  // 只禁止选择未来日期
  if (dateObj.isFuture) {
    console.log('不能选择未来日期:', dateObj.dateString)
    return
  }

  console.log('====== selectDate ======')
  console.log('点击日期:', dateObj.dateString, '当月:', dateObj.isCurrentMonth)
  console.log('当前设置月份:', currentDate.value.getFullYear() + '-' + (currentDate.value.getMonth() + 1))
  console.log('点击日期月份:', dateObj.date.getFullYear() + '-' + (dateObj.date.getMonth() + 1))

  // 选择日期
  currentSelectedDate.value = dateObj.dateString

  // 如果点击的是非当月日期，切换到该日期所在的月份
  if (!dateObj.isCurrentMonth) {
    console.log('切换到:', dateObj.date.getFullYear(), '年', dateObj.date.getMonth() + 1, '月')

    // 直接设置新的日期和月份键
    const newCurrentDate = new Date(dateObj.date.getFullYear(), dateObj.date.getMonth(), 1)
    const newMonthKey = `${dateObj.date.getFullYear()}-${dateObj.date.getMonth()}`

    console.log('设置新月份:', newMonthKey)

    // 同步更新所有相关状态
    currentDate.value = newCurrentDate
    currentMonthKey.value = newMonthKey
    forceUpdate.value++

    // 切换月份时，如果日历是收起状态，自动展开以显示完整月份
    if (!isCalendarExpanded.value) {
      console.log('自动展开日历')
      isCalendarExpanded.value = true
    }

    // 使用 nextTick 确保 DOM 更新后再强制更新一次
    nextTick(() => {
      console.log('selectDate: nextTick后再次强制更新')
      forceUpdate.value++

      // 再次使用 nextTick 确保所有更新完成
      nextTick(() => {
        console.log('selectDate: 第二次nextTick后强制更新')
        forceUpdate.value++
      })
    })

    console.log('月份切换完成')
  }
}

function toggleCalendarExpand() {
  isCalendarExpanded.value = !isCalendarExpanded.value
}

function onDateChange(event) {
  if (event) {
    console.log('====== uni-datetime-picker变化 ======')
    console.log('选择的日期:', event)

    // 验证选择的日期不能是未来日期
    const selectedDate = new Date(event)
    const today = new Date()
    const todayOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate())
    const selectedOnly = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate())

    if (selectedOnly > todayOnly) {
      console.warn('警告：尝试选择未来日期，已阻止')
      uni.showToast({
        title: '不能选择未来日期',
        icon: 'none'
      })
      return
    }

    currentSelectedDate.value = event

    // 计算新的月份（使用已声明的selectedDate变量）
    const newCurrentDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1)
    const newMonthKey = `${selectedDate.getFullYear()}-${selectedDate.getMonth()}`

    console.log('设置新月份:', newMonthKey)

    // 同步更新所有相关状态
    currentDate.value = newCurrentDate
    currentMonthKey.value = newMonthKey
    forceUpdate.value++

    // 使用 nextTick 确保 DOM 更新后再强制更新一次
    nextTick(() => {
      console.log('onDateChange: nextTick后再次强制更新')
      forceUpdate.value++

      // 再次使用 nextTick 确保所有更新完成
      nextTick(() => {
        console.log('onDateChange: 第二次nextTick后强制更新')
        forceUpdate.value++
      })
    })

    console.log('uni-datetime-picker月份切换完成')
  }
}



function formatCurrentDate() {
  if (!currentSelectedDate.value) return ''
  const date = new Date(currentSelectedDate.value)
  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}日`
}

function hasRecordOnDate(date) {
  return feedingRecords.value[date] && feedingRecords.value[date].length > 0
}

function getRecordIcon(type) {
  const icons = {
    '母乳亲喂': feedingRecordRes.icon_muru,
    '母乳瓶喂': feedingRecordRes.icon_pingwei,
    '奶粉喂养': feedingRecordRes.icon_naifen,
    '辅食': feedingRecordRes.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]
}
function getRecordColor(type) {
  // 统一使用 #d3a358 颜色
  return '#d3a358'
}

function getRecordBgColor(type) {
  const colors = {
    '母乳亲喂': '#fdeded',
    '母乳瓶喂': '#f1edf4',
    '奶粉喂养': '#fff6e5',
    '辅食': '#ecf6f0',
  }
  return colors[type] || '#FEF2F2'
}

function editRecord(index) {
  // 编辑记录功能
  uni.showToast({
    title: '编辑功能',
    icon: 'none'
  })
}

function goToFeedingAnalysis() {
  uni.navigateTo({
    url: '/pages/feedingAnalysis/feedingAnalysis'
  })
}

function addFeedingRecord() {
  if (!currentSelectedDate.value) {
    uni.showToast({
      title: '请先选择日期',
      icon: 'none'
    })
    return
  }

  // 调试：输出图片路径
  console.log('add_btn 图片路径:', feedingRecordRes.add_btn)

  // 重置表单
  newRecord.value = {
    time: getCurrentTime(),
    type: '',
    content: ''
  }

  showPopup.value = true
}

function onTimeChange(event) {
  newRecord.value.time = event.detail.value
}

function onTypeChange(event) {
  newRecord.value.type = feedingTypes[event.detail.value]
}

function closePopup() {
  showPopup.value = false
}

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

  // 添加记录
  const dateKey = currentSelectedDate.value
  if (!feedingRecords.value[dateKey]) {
    feedingRecords.value[dateKey] = []
  }

  feedingRecords.value[dateKey].push({
    time: newRecord.value.time,
    type: newRecord.value.type,
    content: newRecord.value.content
  })

  // 按时间排序
  feedingRecords.value[dateKey].sort((a, b) => a.time.localeCompare(b.time))

  uni.showToast({
    title: '保存成功',
    icon: 'success'
  })

  closePopup()
}



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}`
}

function isSameDay(date1, date2) {
  return date1.getFullYear() === date2.getFullYear() &&
    date1.getMonth() === date2.getMonth() &&
    date1.getDate() === date2.getDate()
}

// 生命周期
onLoad(() => {
  // 使用真实的今天日期
  const today = new Date()
  const todayString = formatDateString(today)
  currentSelectedDate.value = todayString
  currentDate.value = new Date(today.getFullYear(), today.getMonth(), 1) // 当前月份的第一天
  currentMonthKey.value = `${today.getFullYear()}-${today.getMonth()}` // 设置月份键
  console.log('初始化今日日期:', todayString, '当前月份:', currentDate.value, '月份键:', currentMonthKey.value)
})

// 通用的月份切换处理函数（已简化，避免重复调用）
function handleMonthChange(newDate, source = 'unknown') {
  console.log(`====== 处理月份切换 (${source}) ======`)
  console.log('新月份:', newDate.getMonth() + 1)

  // 只更新月份键和强制更新，避免重复修改currentDate
  const newMonthKey = `${newDate.getFullYear()}-${newDate.getMonth()}`
  console.log('更新月份键:', currentMonthKey.value, '->', newMonthKey)
  currentMonthKey.value = newMonthKey

  // 强制更新
  forceUpdate.value++

  // 使用nextTick确保DOM更新
  nextTick(() => {
    console.log(`${source}: nextTick后再次强制更新`)
    forceUpdate.value++
  })
}

// 监听currentDate变化
watch(currentDate, (newDate, oldDate) => {
  console.log('====== currentDate变化监听 ======')
  console.log('旧值:', oldDate)
  console.log('新值:', newDate)
  console.log('新月份:', newDate.getMonth() + 1)

  // 避免无限循环：只在月份真正改变时才调用handleMonthChange
  if (oldDate && (oldDate.getMonth() !== newDate.getMonth() || oldDate.getFullYear() !== newDate.getFullYear())) {
    console.log('月份发生变化，调用handleMonthChange')
    // 只更新月份键和强制更新，不再次修改currentDate
    const newMonthKey = `${newDate.getFullYear()}-${newDate.getMonth()}`
    currentMonthKey.value = newMonthKey
    forceUpdate.value++

    nextTick(() => {
      console.log('watch: nextTick后再次强制更新')
      forceUpdate.value++
    })
  }
}, { immediate: false })

onMounted(() => {
  // 组件挂载后的操作
})
</script>

<style lang="scss" scoped>
.feeding-record-page {
  min-height: 100vh;
  background: #ffffff;
  position: relative;
}

// 顶部间距占位
.status-bar-placeholder {
  height: 75rpx;
  background: #fef6eb;
  width: 100%;
}

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

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

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

    .baby-icon-star {
      width: 70rpx;
      height: 70rpx;
      margin-right: 10rpx;
    }

    .baby-info {
      display: flex;
      flex-direction: column;

      .baby-name {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }

      .baby-age {
        font-size: 24rpx;
        color: #666;
        margin-top: 4rpx;
      }
    }

    .baby-icon-change {
      width: 18rpx;
      height: 13rpx;
      margin-top: -35rpx;
      margin-left: 10rpx;
    }
  }


}

// 日期选择器和统计按钮行
.date-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fef6eb;
  padding: 24rpx 30rpx;

  .date-selector {
    cursor: pointer;

    .date-display {
      display: flex;
      align-items: center;
    }

    .date-text {
      font-size: 28rpx;
      font-weight: 500;
      color: #1d1e25;
      margin-right: 10rpx;
    }

    .arrow-icon {
      width: 20rpx;
      height: 12rpx;
      margin-top: 3rpx;
    }
  }

  .stats-section {
    display: flex;
    align-items: center;
    gap: 8rpx;

    .stats-icon {
      width: 28rpx;
      height: 33rpx;
    }

    .stats-btn {
      font-size: 28rpx;
      color: #1d1e25;
      line-height: 33rpx;
      vertical-align: bottom;
      font-weight: 500;
    }
  }
}

// 日历容器
.calendar-wrapper {
  background: #fef6eb;
  position: relative;

  .weekday-row {
    display: flex;
    padding: 20rpx 30rpx 0;

    .weekday-cell {
      flex: 1;
      text-align: center;
      font-size: 22rpx;
      color: #b27c1e;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 30rpx;
    transition: all 0.3s ease;

    &.collapsed {
      grid-template-rows: repeat(1, 1fr);
      overflow: hidden;
      max-height: 80rpx;
    }

    &:not(.collapsed) {
      grid-template-rows: repeat(6, 1fr);
      max-height: 480rpx;
    }

    .date-cell {
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;

      .date-text {
        font-size: 28rpx;
        color: #333; // 默认为当月日期的颜色
        font-weight: 400;
        transition: all 0.2s ease;
        min-width: 56rpx;
        height: 56rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .record-indicator {
        position: absolute;
        bottom: 18rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 6rpx;
        height: 6rpx;
        background: #D4A574;
        border-radius: 50%;
      }

      // 当月日期默认样式（确保优先级）
      &:not(.other-month):not(.disabled) {
        .date-text {
          color: #333;
        }
      }

      // 1. 置灰且禁用：未来日期
      &.disabled {
        cursor: not-allowed;

        .date-text {
          color: #bab5af;
        }

        .record-indicator {
          background: #bab5af;
        }
      }

      // 非当月日期（可点击切换月份）
      &.other-month-clickable {
        cursor: pointer;

        .date-text {
          color: #bab5af;
          transition: all 0.2s ease;
        }

        .record-indicator {
          background: #bab5af;
        }

        &:hover {
          .date-text {
            color: #888;
            background: rgba(212, 165, 116, 0.1);
            border-radius: 50%;
          }
        }

        &:active {
          .date-text {
            transform: scale(0.95);
          }
        }
      }

      // 2. 高亮带黄点：当月已过日期且有喂养记录
      &.past-with-record:not(.selected) {
        .date-text {
          color: #333;
          font-weight: 500;
        }
      }

      // 3. 仅高亮无黄点：当月已过日期但无喂养记录
      &.past-no-record:not(.selected) {
        .date-text {
          color: #333;
          font-weight: 500;
        }
      }

      // 4. 日期带黄圈：选中状态
      &.selected {
        .date-text {
          background: #D4A574;
          color: #fff !important;
          border-radius: 50%;
          font-weight: 600;
        }

        .record-indicator {
          background: #fff;
        }
      }

      // 5. 当日显示【今】- 已在模板中处理
      &.today.selected {
        .date-text {
          color: #fff;
        }
      }

      &.today:not(.selected) {
        .date-text {
          background: #fff;
          border-radius: 50%;
          font-weight: 600;
        }
      }

      // 非当月未来日期样式（既是other-month又是future的情况）
      &.other-month.future {
        .date-text {
          color: #bab5af;
        }
      }

      // 未来日期样式
      &.future {
        .date-text {
          color: #bab5af;
        }
      }
    }
  }



  .expand-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: white;
    margin-top: 0rpx;

    .expand-icon {
      width: 136rpx;
      height: 46rpx;
      transition: all 0.3s ease;
    }
  }
}

// 记录容器
.records-container {
  flex: 1;
  // padding: 20rpx;
  padding-bottom: 180rpx; // 为浮动按钮留出空间

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

    .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;
          }
        }

        .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; // 进一步增加间距

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

              .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; // 防止单词被截断
            }
          }
        }
      }


    }
  }
}

// 底部添加按钮
.bottom-add-btn {
  position: fixed;
  bottom: 0rpx;
  left: 0rpx;
  right: 0rpx;
  width: 750rpx;
  height: 218rpx;
  display: flex;
  background: #fff;
  justify-content: center;
  align-items: center;
  z-index: 10;

  .add-btn-img {
    width: 686rpx;
    height: 94rpx;
    display: block;
  }

  .temp-btn-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32rpx;
    color: #D4A574;
    font-weight: 600;
    z-index: 11;
  }

  &:active {
    transform: scale(0.95);
  }
}

// 弹窗样式
.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;
}

.popup-content {
  background: #fff;
  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: center;
    margin-bottom: 40rpx;
  }

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

    .label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 12rpx;
      display: block;
    }

    .picker,
    .input {
      width: 100%;
      padding: 24rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
      font-size: 28rpx;
      color: #333;
      border: 1rpx solid #e9ecef;
      box-sizing: border-box;
    }

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

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

    button {
      flex: 1;
      height: 88rpx;
      border-radius: 12rpx;
      font-size: 32rpx;
      border: none;
      font-weight: 600;

      &.cancel-btn {
        background: #f8f9fa;
        color: #6c757d;
        border: 1rpx solid #e9ecef;
      }

      &.confirm-btn {
        background: #D4A574;
        color: #fff;
      }

      &:active {
        opacity: 0.8;
      }
    }
  }
}

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

  to {
    transform: translateY(0);
  }
}

// uni-datetime-picker样式覆盖（与naming页面保持一致）
::v-deep .uni-datetime-picker--btn {
  background-color: #D4A574 !important;
}

::v-deep .uni-calendar-item--checked {
  background-color: #D4A574 !important;
}

::v-deep .uni-datetime-picker-btn-text {
  color: #D4A574 !important;
}
</style>
