<view class="container">
  <!-- 输入表单 -->
  <view class="card" wx:if="{{!bazi}}">
    <view class="section-title">输入出生信息</view>
    
    <view class="form-item">
      <text class="form-label">性别</text>
      <view class="flex gap-2">
        <view class="btn-outline {{gender === 'male' ? 'active' : ''}}" bindtap="setGender" data-g="male">男</view>
        <view class="btn-outline {{gender === 'female' ? 'active' : ''}}" bindtap="setGender" data-g="female">女</view>
      </view>
    </view>

    <view class="form-item">
      <text class="form-label">出生日期</text>
      <picker mode="date" value="{{birthDate}}" bindchange="onDateChange">
        <view class="picker-input">{{birthDate}}</view>
      </picker>
    </view>

    <view class="form-item">
      <text class="form-label">出生时间</text>
      <picker mode="time" value="{{birthTime}}" bindchange="onTimeChange">
        <view class="picker-input">{{birthTime}}</view>
      </picker>
    </view>

    <view class="form-item">
      <text class="form-label">子时流派</text>
      <view class="flex gap-2">
        <view class="btn-outline {{ziSect === 'lateZiNextDay' ? 'active' : ''}}" bindtap="setZiSect" data-s="lateZiNextDay">晚子时日柱算次日</view>
        <view class="btn-outline {{ziSect === 'lateZiSameDay' ? 'active' : ''}}" bindtap="setZiSect" data-s="lateZiSameDay">晚子时日柱算当日</view>
      </view>
    </view>

    <view class="btn-primary mt-2" bindtap="calculate">排盘</view>
  </view>

  <!-- 八字结果 -->
  <block wx:if="{{bazi}}">
    <!-- 四柱 -->
    <view class="card">
      <view class="section-title">四柱八字</view>
      <view class="grid grid-cols-4 gap-2">
        <view class="pillar" wx:for="{{pillars}}" wx:key="label">
          <text class="pillar-label">{{item.label}}</text>
          <text class="pillar-ganzhi">{{item.ganzhi}}</text>
          <text class="pillar-ten">{{item.tenStar || '日主'}}</text>
        </view>
      </view>
    </view>

    <!-- 五行分析 -->
    <view class="card">
      <view class="section-title">五行分析</view>
      <view class="element-bar">
        <view class="element-item" wx:for="{{elements}}" wx:key="name">
          <text class="element-name">{{item.name}}</text>
          <view class="element-track">
            <view class="element-fill" style="width: {{item.percent}}%"></view>
          </view>
          <text class="element-count">{{item.count}}</text>
        </view>
      </view>
      <view class="mt-2 text-sm text-muted">
        日主：{{bazi.eightChar.dayMaster}} |  dominant: {{elementAnalysis.dominant}} | weakest: {{elementAnalysis.weakest}}
      </view>
    </view>

    <!-- 大运 -->
    <view class="card">
      <view class="section-title">大运</view>
      <scroll-view scroll-x class="scroll-x">
        <view class="flex gap-2">
          <view class="fortune-item" wx:for="{{bazi.decadeFortunes}}" wx:key="index">
            <text class="text-sm text-muted">{{item.startAge}}-{{item.endAge}}岁</text>
            <text class="text-base font-medium">{{item.ganzhi}}</text>
            <text class="text-xs text-muted">{{item.startYear}}-{{item.endYear}}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 流年 -->
    <view class="card">
      <view class="section-title">流年</view>
      <scroll-view scroll-x class="scroll-x">
        <view class="flex gap-2">
          <view class="fortune-item" wx:for="{{bazi.annualFortunes}}" wx:key="year">
            <text class="text-sm text-muted">{{item.age}}岁</text>
            <text class="text-base font-medium">{{item.ganzhi}}</text>
            <text class="text-xs text-muted">{{item.year}}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 操作 -->
    <view class="flex gap-2 mt-2">
      <view class="btn-outline flex-1 text-center" bindtap="reset">重新排盘</view>
      <view class="btn-primary flex-1 text-center" bindtap="goFortune">看运势</view>
    </view>
  </block>
</view>
