<!--pages/product-detail/product-detail.wxml-->
<view class="page">
  <!-- 加载 -->
  <view class="loading-box" wx:if="{{isLoading}}">
    <view class="spinner"></view>
    <text class="loading-text">加载中...</text>
  </view>

  <!-- 错误 -->
  <view class="error-box" wx:if="{{!isLoading && loadError}}">
    <text class="error-text">加载失败</text>
    <view class="error-btn" bindtap="onRefresh">重新加载</view>
  </view>

  <!-- 商品详情 -->
  <block wx:if="{{!isLoading && !loadError && shangpinData}}">
    <!-- 商品大图 -->
    <view class="hero" bindtap="previewImage">
      <image src="{{shangpinData.tupian}}" mode="aspectFill" class="hero-img" />
      <!-- 图片角标 -->
      <view class="hero-badge">
        <text class="hero-badge-text">{{shangpinData.kucun <= 0 ? '已售罄' : '现货'}}</text>
      </view>
    </view>

    <!-- 价格区 - 红底渐变 -->
    <view class="price-block">
      <view class="price-left">
        <text class="price-sym">¥</text>
        <text class="price-int">{{shangpinData.priceInteger || '0'}}</text>
        <text class="price-dec">.{{shangpinData.priceDecimal || '00'}}</text>
      </view>
      <view class="price-right">
        <text class="sold-text">已拼{{shangpinData.xiaoliangText || '0'}}件</text>
      </view>
    </view>

    <!-- 标题区 -->
    <view class="title-block">
      <view class="title-tags">
        <text class="tag-hot">热卖</text>
      </view>
      <text class="title-text">{{shangpinData.biaoti || ''}}</text>
    </view>

    <!-- 服务保障条 -->
    <view class="service-strip">
      <view class="service-item">
        <text class="service-check">✓</text>
        <text class="service-label">极速接单</text>
      </view>
      <view class="service-item">
        <text class="service-check">✓</text>
        <text class="service-label">资金担保</text>
      </view>
      <view class="service-item">
        <text class="service-check">✓</text>
        <text class="service-label">售后保障</text>
      </view>
      <view class="service-item">
        <text class="service-check">✓</text>
        <text class="service-label">隐私保护</text>
      </view>
    </view>

    <!-- 选择SKU入口 -->
    <view class="sku-trigger" bindtap="onOrderClick">
      <view class="sku-trigger-left">
        <text class="sku-label">选择</text>
        <text class="sku-value">服务规格、购买数量</text>
      </view>
      <text class="sku-arrow">></text>
    </view>

    <!-- 商品介绍 -->
    <view class="detail-card" wx:if="{{shangpinData.xiangqing}}">
      <view class="detail-card-head">
        <text class="detail-card-title">商品介绍</text>
      </view>
      <text class="detail-card-body">{{shangpinData.xiangqing}}</text>
    </view>

    <!-- 购买须知 -->
    <view class="detail-card" wx:if="{{shangpinData.xiadanxuzhi}}">
      <view class="detail-card-head">
        <text class="detail-card-title">购买须知</text>
      </view>
      <text class="detail-card-body">{{shangpinData.xiadanxuzhi}}</text>
    </view>

    <!-- 规则图片 -->
    <view class="detail-card" wx:if="{{shangpinData.guize}}">
      <view class="detail-card-head">
        <text class="detail-card-title">服务规则</text>
      </view>
      <image src="{{shangpinData.guize}}" mode="widthFix" class="rule-img" binderror="onImageError" />
    </view>

    <!-- 底部留白 -->
    <view class="bottom-space"></view>
  </block>

  <!-- 底部操作栏 -->
  <view class="bottom-bar" wx:if="{{!isLoading && !loadError && shangpinData}}">
    <view class="bottom-bar-inner">
      <!-- 客服 -->
      <view class="bar-icon-btn" bindtap="goToKefu">
        <text class="bar-icon-text">客服</text>
      </view>
      <!-- 单独购买 -->
      <view
        class="bar-buy-btn {{shangpinData.kucun <= 0 ? 'bar-buy-btn--disabled' : ''}}"
        bindtap="onOrderClick"
        hover-class="bar-buy-btn--hover"
      >
        <text class="bar-buy-text">{{shangpinData.kucun <= 0 ? '已售罄' : '立即下单'}}</text>
        <text class="bar-buy-price">¥{{shangpinData.priceInteger || '0'}}.{{shangpinData.priceDecimal || '00'}}</text>
      </view>
    </view>
  </view>

  <global-notification id="global-notification" />
</view>
