<!--pages/policies/policies.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="goToNewPolicy">
        <text class="btn-icon">+</text>
        <text class="btn-text">投保</text>
      </button>
    </view>
  </view>

  <!-- 保单统计 -->
  <view class="stats-section">
    <view class="stats-card">
      <view class="stat-item">
        <text class="stat-number">{{stats.totalPolicies}}</text>
        <text class="stat-label">总保单数</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{stats.activePolicies}}</text>
        <text class="stat-label">有效保单</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{stats.expiringPolicies}}</text>
        <text class="stat-label">即将到期</text>
      </view>
    </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 === 'active' ? 'active' : ''}}"
      bindtap="switchTab"
      data-tab="active"
    >
      <text>有效</text>
    </view>
    <view 
      class="tab-item {{activeTab === 'expired' ? 'active' : ''}}"
      bindtap="switchTab"
      data-tab="expired"
    >
      <text>已过期</text>
    </view>
    <view 
      class="tab-item {{activeTab === 'expiring' ? 'active' : ''}}"
      bindtap="switchTab"
      data-tab="expiring"
    >
      <text>即将到期</text>
    </view>
  </view>

  <!-- 保单列表 -->
  <view class="policies-list">
    <view 
      class="policy-item"
      wx:for="{{filteredPolicies}}"
      wx:key="id"
      bindtap="goToPolicyDetail"
      data-id="{{item.id}}"
    >
      <view class="policy-header">
        <view class="policy-info">
          <text class="policy-name">{{item.name}}</text>
          <text class="policy-desc">{{item.description}}</text>
        </view>
        <view class="policy-status {{item.status}}">
          <text class="status-text">{{item.statusText}}</text>
        </view>
      </view>
      
      <view class="policy-details">
        <view class="detail-item">
          <text class="detail-label">保单号：</text>
          <text class="detail-value">{{item.policyNo}}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">保险金额：</text>
          <text class="detail-value amount">¥{{item.coverageAmount}}万</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">保费：</text>
          <text class="detail-value">¥{{item.premium}}/年</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">生效日期：</text>
          <text class="detail-value">{{item.effectiveDate}}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">到期日期：</text>
          <text class="detail-value">{{item.expiryDate}}</text>
        </view>
      </view>
      
      <view class="policy-actions">
        <button 
          class="action-btn small"
          bindtap="goToPolicyDetail"
          data-id="{{item.id}}"
          catchtap="true"
        >
          查看详情
        </button>
        <button 
          class="action-btn small primary"
          bindtap="goToRenewal"
          data-id="{{item.id}}"
          catchtap="true"
          wx:if="{{item.status === 'expiring' || item.status === 'expired'}}"
        >
          续保
        </button>
        <button 
          class="action-btn small secondary"
          bindtap="goToClaim"
          data-id="{{item.id}}"
          catchtap="true"
          wx:if="{{item.status === 'active'}}"
        >
          申请理赔
        </button>
      </view>
    </view>
  </view>

  <!-- 空状态 -->
  <view wx:if="{{filteredPolicies.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="goToNewPolicy">
      立即投保
    </button>
  </view>

  <!-- 加载更多 -->
  <view wx:if="{{hasMore && filteredPolicies.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>