<view class="container">
  <!-- 日期头部 -->
  <view class="card header-card">
    <view class="text-center">
      <text class="text-3xl font-bold">{{dayInfo.solarDay}}</text>
      <text class="text-lg text-muted block">{{dayInfo.solarYear}}年{{dayInfo.solarMonth}}月 {{dayInfo.weekDay}}</text>
    </view>
    <view class="flex justify-center gap-2 mt-2">
      <text class="badge badge-festival" wx:if="{{dayInfo.lunarFestival}}">{{dayInfo.lunarFestival}}</text>
      <text class="badge badge-festival" wx:if="{{dayInfo.solarFestival}}">{{dayInfo.solarFestival}}</text>
      <text class="badge badge-outline" wx:if="{{dayInfo.solarTerm}}">{{dayInfo.solarTerm}}</text>
    </view>
  </view>

  <!-- 农历信息 -->
  <view class="card">
    <view class="section-title">农历</view>
    <view class="grid grid-cols-2 gap-2">
      <view class="info-item">
        <text class="text-xs text-muted">农历日期</text>
        <text class="text-base font-medium">{{dayInfo.lunarYear}}年{{dayInfo.lunarMonthName}}{{dayInfo.lunarDayName}}</text>
      </view>
      <view class="info-item">
        <text class="text-xs text-muted">生肖</text>
        <text class="text-base font-medium">{{dayInfo.zodiac}}</text>
      </view>
      <view class="info-item">
        <text class="text-xs text-muted">干支</text>
        <text class="text-base font-medium">{{dayInfo.lunarYearGanzhi}}年 {{dayInfo.lunarMonthGanzhi}}月 {{dayInfo.lunarDayGanzhi}}日</text>
      </view>
      <view class="info-item">
        <text class="text-xs text-muted">月相</text>
        <text class="text-base font-medium">{{dayInfo.moonPhase}}</text>
      </view>
    </view>
  </view>

  <!-- 宜忌 -->
  <view class="card">
    <view class="section-title">宜忌</view>
    <view class="flex gap-2">
      <view class="flex-1">
        <text class="text-lucky font-bold">宜</text>
        <view class="flex flex-wrap gap-1 mt-1">
          <text class="badge badge-lucky" wx:for="{{almanac.recommends}}" wx:key="*this">{{item}}</text>
        </view>
      </view>
      <view class="flex-1">
        <text class="text-unlucky font-bold">忌</text>
        <view class="flex flex-wrap gap-1 mt-1">
          <text class="badge badge-unlucky" wx:for="{{almanac.avoids}}" wx:key="*this">{{item}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 黄历详情 -->
  <view class="card">
    <view class="section-title">黄历</view>
    <view class="grid grid-cols-2 gap-2">
      <view class="info-item">
        <text class="text-xs text-muted">值神</text>
        <text class="text-base font-medium">{{almanac.duty}}（{{almanac.dutyLuck === 'good' ? '吉' : almanac.dutyLuck === 'bad' ? '凶' : '平'}}）</text>
      </view>
      <view class="info-item">
        <text class="text-xs text-muted">黄道黑道</text>
        <text class="text-base font-medium">{{almanac.twelveStar.name}}（{{almanac.twelveStar.ecliptic}}）</text>
      </view>
      <view class="info-item">
        <text class="text-xs text-muted">二十八宿</text>
        <text class="text-base font-medium">{{almanac.twentyEightStar.name}}</text>
      </view>
      <view class="info-item">
        <text class="text-xs text-muted">九星</text>
        <text class="text-base font-medium">{{almanac.nineStar.name}}</text>
      </view>
      <view class="info-item">
        <text class="text-xs text-muted">六曜</text>
        <text class="text-base font-medium">{{almanac.sixStar}}</text>
      </view>
      <view class="info-item">
        <text class="text-xs text-muted">小六壬</text>
        <text class="text-base font-medium">{{almanac.minorRen.name}}</text>
      </view>
      <view class="info-item">
        <text class="text-xs text-muted">纳音</text>
        <text class="text-base font-medium">{{almanac.nayin}}</text>
      </view>
      <view class="info-item">
        <text class="text-xs text-muted">胎神</text>
        <text class="text-base font-medium">{{almanac.fetus.position}}</text>
      </view>
    </view>
  </view>

  <!-- 冲煞 -->
  <view class="card">
    <view class="section-title">冲煞</view>
    <view class="grid grid-cols-2 gap-2">
      <view class="info-item">
        <text class="text-xs text-muted">冲</text>
        <text class="text-base font-medium">{{almanac.clash}}</text>
      </view>
      <view class="info-item">
        <text class="text-xs text-muted">害</text>
        <text class="text-base font-medium">{{almanac.harm}}</text>
      </view>
      <view class="info-item">
        <text class="text-xs text-muted">合</text>
        <text class="text-base font-medium">{{almanac.combine}}</text>
      </view>
      <view class="info-item">
        <text class="text-xs text-muted">煞方</text>
        <text class="text-base font-medium">{{almanac.evilDirection}}</text>
      </view>
    </view>
  </view>

  <!-- 彭祖百忌 -->
  <view class="card">
    <view class="section-title">彭祖百忌</view>
    <text class="text-base">{{almanac.pengZu}}</text>
  </view>

  <!-- 时辰黄历 -->
  <view class="card">
    <view class="section-title">时辰黄历</view>
    <view class="hour-list">
      <view class="hour-item" wx:for="{{almanac.hourDetails}}" wx:key="name">
        <view class="flex justify-between items-center">
          <text class="font-medium">{{item.name}}（{{item.range}}）</text>
          <text class="text-sm text-muted">{{item.ganzhi}}</text>
        </view>
        <view class="flex gap-2 mt-1">
          <text class="text-xs text-muted">值神：{{item.twelveStar}}</text>
          <text class="text-xs text-muted">九星：{{item.nineStar}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 操作按钮 -->
  <view class="flex gap-2 mt-2">
    <view class="btn-outline flex-1 text-center" bindtap="addBookmark">收藏</view>
    <view class="btn-primary flex-1 text-center" bindtap="goBazi">排八字</view>
  </view>
</view>
