<!--pages/product-detail/product-detail.wxml-->
<view class="detail-page page-container">
  <!-- 加载状态 -->
  <view class="loading-container loading-mask loading-mask--light" wx:if="{{isLoading}}">
    <view class="loading-content">
      <view class="loading-spinner">
        <view class="spinner-ring"></view>
        <view class="spinner-dot"></view>
      </view>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
  
  <!-- 错误状态 -->
  <view class="error-container empty-state" wx:if="{{!isLoading && loadError}}">
    <image src="/images/error.png" class="error-icon" />
    <text class="error-text">加载失败</text>
    <button class="error-btn btn btn-sm btn-sm--green" bindtap="onRefresh">重新加载</button>
  </view>
  
  <!-- 商品详情内容 -->
  <view class="detail-content" wx:if="{{!isLoading && !loadError && shangpinData}}">
    <!-- 商品图片区域（占满屏幕） -->
    <view class="image-section">
      <view class="image-container" bindtap="previewImage">
        <image 
          src="{{shangpinData.tupian}}" 
          mode="aspectFill" 
          class="product-image"
        />
        <!-- 库存标签 -->
        <view class="kucun-tag {{shangpinData.kucunClass || 'kucun-normal'}}">
          <text class="kucun-text">{{shangpinData.kucunText || '库存充足'}}</text>
        </view>
      </view>
    </view>
    
    <!-- 下方内容区域（顶部有圆角） -->
    <view class="content-area">
      <!-- 商品标题和价格区域 -->
      <view class="title-price-section">
        <view class="title-row">
          <text class="product-title">{{shangpinData.biaoti || ''}}</text>
        </view>
        
        <view class="price-row">
          <!-- 价格 -->
          <view class="price-section">
            <text class="price-icon">¥</text>
            <text class="price-integer">{{shangpinData.priceInteger || '0'}}</text>
            <text class="price-decimal">.{{shangpinData.priceDecimal || '00'}}</text>
          </view>
          
          <!-- 销量 -->
          <view class="sales-section">
            <image src="/images/xiaoliang.png" class="sales-icon" />
            <text class="sales-text">{{shangpinData.xiaoliangText || '0'}}次购买</text>
          </view>
        </view>
      </view>
      
      <!-- 商品介绍区域 -->
      <view class="info-section" wx:if="{{shangpinData.xiangqing}}">
        <view class="section-header">
          <image src="/images/jieshao.png" class="section-icon" />
          <text class="section-title">商品介绍：</text>
        </view>
        <view class="section-content">
          <text class="content-text">{{shangpinData.xiangqing}}</text>
        </view>
      </view>
      
      <!-- 购买须知区域 -->
      <view class="info-section" wx:if="{{shangpinData.xiadanxuzhi}}">
        <view class="section-header">
          <image src="/images/jieshao.png" class="section-icon" />
          <text class="section-title">购买须知：</text>
        </view>
        <view class="section-content">
          <text class="content-text">{{shangpinData.xiadanxuzhi}}</text>
        </view>
      </view>
      
      <!-- 规则图片区域（只有有图片时才显示） -->
      <view class="rule-section" wx:if="{{shangpinData.guize}}">
        <image 
          src="{{shangpinData.guize}}" 
          mode="widthFix" 
          class="rule-image"
          binderror="onImageError"
        />
      </view>
      
      <!-- 占位区域（给底部按钮留空间） -->
      <view class="placeholder"></view>
    </view>
  </view>
  
  <!-- 立即下单按钮（固定在底部，无价格标签） -->
  <view class="order-btn-container fixed-bottom" wx:if="{{!isLoading && !loadError && shangpinData}}">
    <view class="order-btn btn btn-primary btn-primary--green" bindtap="onOrderClick">
      <!-- 按钮发光特效 -->
      <view class="btn-glow"></view>
      <!-- 按钮流光特效 -->
      <view class="btn-streamer"></view>
      <!-- 按钮文字 -->
      <text class="btn-text">立即预约</text>
    </view>
  </view>
  <global-notification id="global-notification" />

</view>