<!--pages/statistics/statistics.wxml-->
<view class="container">
  <!-- 状态栏 -->
  <view class="status-bar">
    <view class="status-left">
      <text>{{currentTime || '17:05'}}</text>
    </view>
    <view class="status-right">
      <text>100%</text>
      <view class="battery-icon"></view>
    </view>
  </view>

  <!-- 顶部导航栏 -->
  <view class="header">
    <view class="header-title">数据统计</view>
    <view class="header-actions">
      <view class="action-btn" bindtap="onRefresh">
        <text class="icon-refresh">🔄</text>
      </view>
      <view class="action-btn" bindtap="onExport">
        <text class="icon-export">📊</text>
      </view>
    </view>
  </view>

  <!-- 统计卡片区域 -->
  <view class="stats-cards">
    <view 
      class="stat-card" 
      wx:for="{{statsData}}" 
      wx:key="id"
      data-item="{{item}}"
      bindtap="onStatCardTap"
    >
      <view class="card-icon" style="background-color: {{item.color}}">
        <text class="icon">{{item.icon}}</text>
      </view>
      <view class="card-content">
        <view class="card-title">{{item.title}}</view>
        <view class="card-value">{{item.value}}</view>
        <view class="card-trend {{item.trend > 0 ? 'up' : item.trend < 0 ? 'down' : 'stable'}}">
          <text class="trend-icon">{{item.trend > 0 ? '↗' : item.trend < 0 ? '↘' : '→'}}</text>
          <text class="trend-text">{{item.trendText}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 图表区域 -->
  <view class="chart-section">
    <view class="section-header">
      <text class="section-title">监管趋势</text>
      <view class="time-filter">
        <view 
          class="filter-item {{selectedPeriod === item ? 'active' : ''}}"
          wx:for="{{timePeriods}}"
          wx:key="*this"
          data-period="{{item}}"
          bindtap="onPeriodChange"
        >
          {{item}}
        </view>
      </view>
    </view>
    
    <!-- 模拟图表 -->
    <view class="chart-container">
      <view class="chart-placeholder">
        <text class="chart-text">📈 监管数据趋势图</text>
        <text class="chart-desc">显示最近{{selectedPeriod}}的监管活动统计</text>
      </view>
    </view>
  </view>

  <!-- 详细列表 -->
  <view class="detail-section">
    <view class="section-header">
      <text class="section-title">最新监管记录</text>
      <view class="more-btn" bindtap="onViewMore">
        查看更多 >
      </view>
    </view>
    
    <view class="record-list">
      <view 
        class="record-item" 
        wx:for="{{recentRecords}}" 
        wx:key="id"
        data-item="{{item}}"
        bindtap="onRecordTap"
      >
        <view class="record-icon">
          <text class="status-dot {{item.status}}"></text>
        </view>
        <view class="record-content">
          <view class="record-title">{{item.title}}</view>
          <view class="record-desc">{{item.description}}</view>
          <view class="record-time">{{item.time}}</view>
        </view>
        <view class="record-arrow">></view>
      </view>
    </view>
  </view>

  <!-- 快捷操作 -->
  <view class="quick-actions">
    <view 
      class="action-item" 
      wx:for="{{quickActions}}" 
      wx:key="id"
      data-item="{{item}}"
      bindtap="onQuickAction"
    >
      <view class="action-icon" style="background-color: {{item.color}}">
        <text>{{item.icon}}</text>
      </view>
      <text class="action-name">{{item.name}}</text>
    </view>
  </view>
</view>