<!--pages/policy-detail/policy-detail.wxml-->
<view class="container">
  <!-- 保单状态卡片 -->
  <view class="status-card">
    <view class="status-icon {{policyInfo.status}}">
      <text class="icon-text">{{policyInfo.statusIcon}}</text>
    </view>
    <view class="status-content">
      <text class="status-title">{{policyInfo.statusText}}</text>
      <text class="status-desc">{{policyInfo.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">{{policyInfo.policyNo}}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">产品名称</text>
        <text class="info-value">{{policyInfo.productName}}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">保险金额</text>
        <text class="info-value amount">¥{{policyInfo.coverageAmount}}万</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">年缴保费</text>
        <text class="info-value amount">¥{{policyInfo.premium}}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">生效日期</text>
        <text class="info-value">{{policyInfo.effectiveDate}}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">到期日期</text>
        <text class="info-value">{{policyInfo.expiryDate}}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">缴费方式</text>
        <text class="info-value">{{policyInfo.paymentMethod}}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">保险期间</text>
        <text class="info-value">{{policyInfo.insurancePeriod}}</text>
      </view>
    </view>
  </view>

  <!-- 被保险人信息 -->
  <view class="insured-section">
    <view class="section-title">被保险人信息</view>
    
    <view class="insured-card">
      <view class="insured-item">
        <text class="insured-label">姓名</text>
        <text class="insured-value">{{policyInfo.insuredName}}</text>
      </view>
      
      <view class="insured-item">
        <text class="insured-label">身份证号</text>
        <text class="insured-value">{{policyInfo.idCard}}</text>
      </view>
      
      <view class="insured-item">
        <text class="insured-label">手机号</text>
        <text class="insured-value">{{policyInfo.phone}}</text>
      </view>
      
      <view class="insured-item">
        <text class="insured-label">性别</text>
        <text class="insured-value">{{policyInfo.gender}}</text>
      </view>
      
      <view class="insured-item">
        <text class="insured-label">出生日期</text>
        <text class="insured-value">{{policyInfo.birthDate}}</text>
      </view>
    </view>
  </view>

  <!-- 受益人信息 -->
  <view class="beneficiary-section" wx:if="{{policyInfo.beneficiary}}">
    <view class="section-title">受益人信息</view>
    
    <view class="beneficiary-card">
      <view class="beneficiary-item">
        <text class="beneficiary-label">受益人姓名</text>
        <text class="beneficiary-value">{{policyInfo.beneficiary.name}}</text>
      </view>
      
      <view class="beneficiary-item">
        <text class="beneficiary-label">关系</text>
        <text class="beneficiary-value">{{policyInfo.beneficiary.relation}}</text>
      </view>
      
      <view class="beneficiary-item">
        <text class="beneficiary-label">身份证号</text>
        <text class="beneficiary-value">{{policyInfo.beneficiary.idCard}}</text>
      </view>
    </view>
  </view>

  <!-- 保障内容 -->
  <view class="coverage-section">
    <view class="section-title">保障内容</view>
    
    <view class="coverage-list">
      <view class="coverage-item" wx:for="{{policyInfo.coverage}}" wx:key="index">
        <view class="coverage-header">
          <text class="coverage-name">{{item.name}}</text>
          <text class="coverage-amount">{{item.amount}}</text>
        </view>
        <text class="coverage-desc">{{item.description}}</text>
      </view>
    </view>
  </view>

  <!-- 缴费记录 -->
  <view class="payment-section">
    <view class="section-title">缴费记录</view>
    
    <view class="payment-list">
      <view class="payment-item" wx:for="{{policyInfo.paymentRecords}}" wx:key="index">
        <view class="payment-info">
          <text class="payment-period">{{item.period}}</text>
          <text class="payment-amount">¥{{item.amount}}</text>
        </view>
        <view class="payment-status {{item.status}}">
          <text class="status-text">{{item.statusText}}</text>
        </view>
        <view class="payment-date">{{item.paymentDate}}</view>
      </view>
    </view>
  </view>

  <!-- 理赔记录 -->
  <view class="claims-section" wx:if="{{policyInfo.claimsRecords.length > 0}}">
    <view class="section-title">理赔记录</view>
    
    <view class="claims-list">
      <view class="claim-item" wx:for="{{policyInfo.claimsRecords}}" wx:key="index">
        <view class="claim-info">
          <text class="claim-type">{{item.type}}</text>
          <text class="claim-amount">¥{{item.amount}}</text>
        </view>
        <view class="claim-status {{item.status}}">
          <text class="status-text">{{item.statusText}}</text>
        </view>
        <view class="claim-date">{{item.date}}</view>
      </view>
    </view>
  </view>

  <!-- 底部操作栏 -->
  <view class="bottom-actions">
    <button 
      class="action-btn secondary"
      bindtap="goBack"
    >
      返回
    </button>
    
    <button 
      class="action-btn primary"
      bindtap="goToRenewal"
      wx:if="{{policyInfo.status === 'expiring' || policyInfo.status === 'expired'}}"
    >
      续保
    </button>
    
    <button 
      class="action-btn primary"
      bindtap="goToClaim"
      wx:if="{{policyInfo.status === 'active'}}"
    >
      申请理赔
    </button>
    
    <button 
      class="action-btn secondary"
      bindtap="downloadPolicy"
      wx:if="{{policyInfo.status === 'active'}}"
    >
      下载保单
    </button>
  </view>
</view>