<view class="container">
  <!-- 年月选择器 -->
  <view class="card flex justify-between items-center">
    <view class="btn-ghost" bindtap="prevMonth">‹</view>
    <view class="text-xl font-bold" bindtap="showPicker">{{year}}年{{month}}月</view>
    <view class="btn-ghost" bindtap="nextMonth">›</view>
  </view>

  <!-- 星期头 -->
  <view class="grid grid-cols-7 gap-1 mb-1">
    <view class="text-center text-sm text-muted" wx:for="{{weekHeaders}}" wx:key="*this">{{item}}</view>
  </view>

  <!-- 日历网格 -->
  <view class="grid grid-cols-7 gap-1">
    <view 
      class="day-cell {{item.isToday ? 'today' : ''}} {{item.solarMonth !== month ? 'other-month' : ''}}"
      wx:for="{{calendarDays}}" 
      wx:key="solarDate"
      bindtap="selectDay"
      data-date="{{item.solarDate}}"
    >
      <text class="day-number">{{item.solarDay}}</text>
      <text class="day-lunar {{item.lunarFestival || item.solarFestival ? 'festival' : ''}}">
        {{item.lunarFestival || item.solarFestival || item.lunarDayName}}
      </text>
      <view class="day-dot" wx:if="{{item.isTermDay}}"></view>
    </view>
  </view>

  <!-- 选中日期详情 -->
  <view class="card mt-2" wx:if="{{selectedDay}}">
    <view class="flex justify-between items-center">
      <view>
        <text class="text-lg font-bold">{{selectedDay.solarDate}}</text>
        <text class="text-sm text-muted block">{{selectedDay.lunarMonthName}}{{selectedDay.lunarDayName}}</text>
      </view>
      <view class="btn-primary" bindtap="goDetail">详情</view>
    </view>
  </view>
</view>

<!-- 年月选择弹窗 -->
<view class="picker-mask {{showMonthPicker ? 'show' : ''}}" bindtap="hidePicker">
  <view class="picker-panel" catchtap="noop">
    <view class="picker-header">
      <text bindtap="hidePicker">取消</text>
      <text class="font-bold">选择年月</text>
      <text bindtap="confirmPicker">确定</text>
    </view>
    <picker-view class="picker-view" value="{{pickerValue}}" bindchange="pickerChange">
      <picker-view-column>
        <view wx:for="{{years}}" wx:key="*this" class="picker-item">{{item}}年</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{{months}}" wx:key="*this" class="picker-item">{{item}}月</view>
      </picker-view-column>
    </picker-view>
  </view>
</view>
