<!--pages/claims/claims.wxml-->
<view class="container">
  <!-- 页面头部 -->
  <view class="header">
    <view class="header-content">
      <text class="header-title">理赔申请</text>
      <text class="header-desc">快速申请理赔，专业服务保障</text>
    </view>
    <view class="header-actions">
      <button class="action-btn" bindtap="goToNewClaim">
        <text class="btn-icon">+</text>
        <text class="btn-text">申请理赔</text>
      </button>
    </view>
  </view>

  <!-- 筛选标签 -->
  <view class="filter-tabs">
    <view 
      class="tab-item {{activeTab === 'all' ? 'active' : ''}}"
      bindtap="switchTab"
      data-tab="all"
    >
      <text>全部</text>
    </view>
    <view 
      class="tab-item {{activeTab === 'pending' ? 'active' : ''}}"
      bindtap="switchTab"
      data-tab="pending"
    >
      <text>待处理</text>
    </view>
    <view 
      class="tab-item {{activeTab === 'processing' ? 'active' : ''}}"
      bindtap="switchTab"
      data-tab="processing"
    >
      <text>处理中</text>
    </view>
    <view 
      class="tab-item {{activeTab === 'completed' ? 'active' : ''}}"
      bindtap="switchTab"
      data-tab="completed"
    >
      <text>已完成</text>
    </view>
  </view>

  <!-- 理赔列表 -->
  <view class="claims-list">
    <view 
      class="claim-item"
      wx:for="{{filteredClaims}}"
      wx:key="id"
      bindtap="goToClaimDetail"
      data-id="{{item.id}}"
    >
      <view class="claim-header">
        <view class="claim-info">
          <text class="claim-title">{{item.title}}</text>
          <text class="claim-desc">{{item.description}}</text>
        </view>
        <view class="claim-status {{item.status}}">
          <text class="status-text">{{item.statusText}}</text>
        </view>
      </view>
      
      <view class="claim-details">
        <view class="detail-item">
          <text class="detail-label">申请时间：</text>
          <text class="detail-value">{{item.applicationTime}}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">理赔金额：</text>
          <text class="detail-value amount">¥{{item.claimAmount}}</text>
        </view>
        <view class="detail-item" wx:if="{{item.policyNo}}">
          <text class="detail-label">保单号：</text>
          <text class="detail-value">{{item.policyNo}}</text>
        </view>
      </view>
      
      <view class="claim-actions">
        <button 
          class="action-btn small"
          bindtap="goToClaimDetail"
          data-id="{{item.id}}"
          catchtap="true"
        >
          查看详情
        </button>
        <button 
          class="action-btn small primary"
          bindtap="goToClaimDetail"
          data-id="{{item.id}}"
          catchtap="true"
          wx:if="{{item.status === 'pending'}}"
        >
          继续申请
        </button>
      </view>
    </view>
  </view>

  <!-- 空状态 -->
  <view wx:if="{{filteredClaims.length === 0}}" class="empty-state">
    <view class="empty-icon">📋</view>
    <text class="empty-title">暂无理赔记录</text>
    <text class="empty-desc">您还没有任何理赔申请记录</text>
    <button class="empty-btn" bindtap="goToNewClaim">
      立即申请理赔
    </button>
  </view>

  <!-- 加载更多 -->
  <view wx:if="{{hasMore && filteredClaims.length > 0}}" class="load-more">
    <view class="loading-text" wx:if="{{loading}}">加载中...</view>
    <view class="load-more-btn" wx:else bindtap="loadMore">加载更多</view>
  </view>
</view>