<!--pages/claim-detail/claim-detail.wxml-->
<view class="container">
  <!-- 理赔状态卡片 -->
  <view class="status-card">
    <view class="status-icon {{claimInfo.status}}">
      <text class="icon-text">{{claimInfo.statusIcon}}</text>
    </view>
    <view class="status-content">
      <text class="status-title">{{claimInfo.statusText}}</text>
      <text class="status-desc">{{claimInfo.statusDesc}}</text>
    </view>
  </view>

  <!-- 理赔基本信息 -->
  <view class="info-section">
    <view class="section-title">理赔信息</view>
    
    <view class="info-card">
      <view class="info-item">
        <text class="info-label">理赔单号</text>
        <text class="info-value">{{claimInfo.claimNo}}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">理赔类型</text>
        <text class="info-value">{{claimInfo.claimType}}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">申请时间</text>
        <text class="info-value">{{claimInfo.applicationTime}}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">理赔金额</text>
        <text class="info-value amount">¥{{claimInfo.claimAmount}}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">保单号</text>
        <text class="info-value">{{claimInfo.policyNo}}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">被保险人</text>
        <text class="info-value">{{claimInfo.insuredName}}</text>
      </view>
    </view>
  </view>

  <!-- 理赔进度 -->
  <view class="progress-section">
    <view class="section-title">理赔进度</view>
    
    <view class="progress-timeline">
      <view 
        class="timeline-item {{index <= claimInfo.currentStep ? 'active' : ''}}"
        wx:for="{{claimInfo.progressSteps}}"
        wx:key="index"
      >
        <view class="timeline-dot">
          <text class="dot-icon">{{index < claimInfo.currentStep ? '✓' : (index + 1)}}</text>
        </view>
        <view class="timeline-content">
          <text class="timeline-title">{{item.title}}</text>
          <text class="timeline-desc">{{item.desc}}</text>
          <text class="timeline-time" wx:if="{{item.time}}">{{item.time}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 理赔详情 -->
  <view class="detail-section">
    <view class="section-title">理赔详情</view>
    
    <view class="detail-card">
      <view class="detail-item">
        <text class="detail-label">事故描述</text>
        <text class="detail-value">{{claimInfo.accidentDesc}}</text>
      </view>
      
      <view class="detail-item">
        <text class="detail-label">事故发生时间</text>
        <text class="detail-value">{{claimInfo.accidentTime}}</text>
      </view>
      
      <view class="detail-item">
        <text class="detail-label">事故发生地点</text>
        <text class="detail-value">{{claimInfo.accidentLocation}}</text>
      </view>
      
      <view class="detail-item">
        <text class="detail-label">医院名称</text>
        <text class="detail-value">{{claimInfo.hospitalName}}</text>
      </view>
      
      <view class="detail-item">
        <text class="detail-label">诊断结果</text>
        <text class="detail-value">{{claimInfo.diagnosis}}</text>
      </view>
    </view>
  </view>

  <!-- 相关材料 -->
  <view class="materials-section">
    <view class="section-title">相关材料</view>
    
    <view class="materials-list">
      <view class="material-item" wx:for="{{claimInfo.materials}}" wx:key="index">
        <view class="material-icon">{{item.icon}}</view>
        <view class="material-info">
          <text class="material-name">{{item.name}}</text>
          <text class="material-status {{item.status}}">{{item.statusText}}</text>
        </view>
        <view class="material-actions">
          <button 
            class="action-btn small"
            bindtap="previewMaterial"
            data-index="{{index}}"
          >
            查看
          </button>
        </view>
      </view>
    </view>
  </view>

  <!-- 处理记录 -->
  <view class="records-section" wx:if="{{claimInfo.records.length > 0}}">
    <view class="section-title">处理记录</view>
    
    <view class="records-list">
      <view class="record-item" wx:for="{{claimInfo.records}}" wx:key="index">
        <view class="record-time">{{item.time}}</view>
        <view class="record-content">
          <text class="record-title">{{item.title}}</text>
          <text class="record-desc">{{item.desc}}</text>
        </view>
        <view class="record-operator">{{item.operator}}</view>
      </view>
    </view>
  </view>

  <!-- 底部操作栏 -->
  <view class="bottom-actions">
    <button 
      class="action-btn secondary"
      bindtap="goBack"
    >
      返回
    </button>
    
    <button 
      class="action-btn primary"
      bindtap="contactService"
      wx:if="{{claimInfo.status === 'pending' || claimInfo.status === 'processing'}}"
    >
      联系客服
    </button>
    
    <button 
      class="action-btn primary"
      bindtap="submitSupplement"
      wx:if="{{claimInfo.status === 'pending'}}"
    >
      补充材料
    </button>
  </view>
</view>