<!--pages/product-detail/product-detail.wxml-->
<view class="container">
  <!-- 产品头部信息 -->
  <view class="product-header">
    <view class="product-image">
      <image src="{{productInfo.image || '/static/images/product-default.jpg'}}" mode="aspectFill" class="product-img" />
      <view class="product-tag" wx:if="{{productInfo.isHot}}">热门</view>
    </view>
    
    <view class="product-info">
      <view class="product-title">{{productInfo.name}}</view>
      <view class="product-subtitle">{{productInfo.subtitle}}</view>
      
      <view class="price-section">
        <view class="price-main">
          <text class="currency">¥</text>
          <text class="price">{{productInfo.minPremium}}</text>
          <text class="price-unit">起</text>
        </view>
        <view class="price-desc">{{productInfo.priceDesc}}</view>
      </view>
      
      <view class="product-features">
        <view class="feature-item" wx:for="{{productInfo.features}}" wx:key="index">
          <text class="feature-icon">{{item.icon}}</text>
          <text class="feature-text">{{item.text}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 产品详情标签页 -->
  <view class="detail-tabs">
    <view 
      class="tab-item {{activeTab === 'overview' ? 'active' : ''}}"
      bindtap="switchTab"
      data-tab="overview"
    >
      <text>产品概述</text>
    </view>
    <view 
      class="tab-item {{activeTab === 'coverage' ? 'active' : ''}}"
      bindtap="switchTab"
      data-tab="coverage"
    >
      <text>保障内容</text>
    </view>
    <view 
      class="tab-item {{activeTab === 'terms' ? 'active' : ''}}"
      bindtap="switchTab"
      data-tab="terms"
    >
      <text>条款说明</text>
    </view>
  </view>

  <!-- 产品概述 -->
  <view wx:if="{{activeTab === 'overview'}}" class="tab-content">
    <view class="overview-section">
      <view class="section-title">产品简介</view>
      <text class="section-content">{{productInfo.description}}</text>
    </view>
    
    <view class="overview-section">
      <view class="section-title">适用人群</view>
      <view class="target-group">
        <view class="group-item" wx:for="{{productInfo.targetGroup}}" wx:key="index">
          <text class="group-icon">✓</text>
          <text class="group-text">{{item}}</text>
        </view>
      </view>
    </view>
    
    <view class="overview-section">
      <view class="section-title">产品特色</view>
      <view class="highlights">
        <view class="highlight-item" wx:for="{{productInfo.highlights}}" wx:key="index">
          <view class="highlight-icon">{{item.icon}}</view>
          <view class="highlight-content">
            <text class="highlight-title">{{item.title}}</text>
            <text class="highlight-desc">{{item.description}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 保障内容 -->
  <view wx:if="{{activeTab === 'coverage'}}" class="tab-content">
    <view class="coverage-section">
      <view class="coverage-item" wx:for="{{productInfo.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 class="coverage-conditions" wx:if="{{item.conditions}}">
          <text class="condition-label">保障条件：</text>
          <text class="condition-text">{{item.conditions}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 条款说明 -->
  <view wx:if="{{activeTab === 'terms'}}" class="tab-content">
    <view class="terms-section">
      <view class="terms-item" wx:for="{{productInfo.terms}}" wx:key="index">
        <view class="terms-title">{{item.title}}</view>
        <text class="terms-content">{{item.content}}</text>
      </view>
    </view>
  </view>

  <!-- 投保须知 -->
  <view class="notice-section">
    <view class="notice-title">投保须知</view>
    <view class="notice-list">
      <view class="notice-item" wx:for="{{productInfo.notices}}" wx:key="index">
        <text class="notice-number">{{index + 1}}</text>
        <text class="notice-text">{{item}}</text>
      </view>
    </view>
  </view>

  <!-- 相关产品推荐 -->
  <view class="related-products" wx:if="{{relatedProducts.length > 0}}">
    <view class="section-title">相关产品推荐</view>
    <scroll-view class="product-scroll" scroll-x="true">
      <view class="product-list">
        <view 
          class="related-product-item"
          wx:for="{{relatedProducts}}"
          wx:key="id"
          bindtap="goToProductDetail"
          data-id="{{item.id}}"
        >
          <image src="{{item.image}}" class="related-product-img" mode="aspectFill" />
          <view class="related-product-info">
            <text class="related-product-name">{{item.name}}</text>
            <text class="related-product-price">¥{{item.minPremium}}起</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>

  <!-- 底部操作栏 -->
  <view class="bottom-actions">
    <view class="action-left">
      <button class="action-btn secondary" bindtap="addToFavorites">
        <text class="btn-icon">{{isFavorited ? '❤️' : '🤍'}}</text>
        <text class="btn-text">{{isFavorited ? '已收藏' : '收藏'}}</text>
      </button>
      <button class="action-btn secondary" bindtap="goToConsultation">
        <text class="btn-icon">💬</text>
        <text class="btn-text">咨询</text>
      </button>
    </view>
    
    <button 
      class="apply-btn {{canApply ? 'active' : 'disabled'}}"
      bindtap="goToApplication"
      disabled="{{!canApply}}"
    >
      {{loading ? '处理中...' : '立即投保'}}
    </button>
  </view>
</view>

<!-- 加载状态 -->
<view wx:if="{{loading}}" class="loading-overlay">
  <view class="loading-content">
    <view class="loading-spinner"></view>
    <text class="loading-text">加载中...</text>
  </view>
</view>