<view class="page">
  <!-- 状态栏 -->
  <view class="status-bar {{order.status}}">
    <view class="status-icon">{{statusIcon}}</view>
    <view class="status-info">
      <view class="status-label">{{order.statusInfo?.label || statusLabel}}</view>
      <view class="status-desc" wx:if="{{statusDesc}}">{{statusDesc}}</view>
    </view>
  </view>

  <!-- 收货地址 -->
  <view class="card" wx:if="{{order.consignee}}">
    <view class="card-body">
      <view class="flex-row gap-16">
        <text class="delivery-icon">📍</text>
        <view class="flex-1">
          <view class="flex-row gap-16">
            <text class="delivery-name">{{order.consignee}}</text>
            <text class="delivery-phone">{{order.phone}}</text>
          </view>
          <view class="delivery-address">{{order.province}}{{order.city}}{{order.district}}{{order.address}}</view>
        </view>
      </view>
    </view>
  </view>

  <!-- 商品列表 -->
  <view class="card">
    <view class="card-body">
      <view class="order-item" wx:for="{{order.items}}" wx:key="id" wx:for-item="oi">
        <image class="detail-item-image" src="{{oi.image}}" mode="aspectFill" />
        <view class="order-item-info flex-1">
          <view class="detail-item-name">{{oi.product_name}}</view>
          <view class="detail-item-specs" wx:if="{{oi.sku_info}}">规格: {{oi.sku_info}}</view>
          <view class="flex-between mt-8">
            <text class="price">¥{{oi.price}}</text>
            <text>x{{oi.quantity}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 金额信息 -->
  <view class="card">
    <view class="card-body">
      <view class="info-row flex-between"><text>商品金额</text><text>¥{{order.total_amount}}</text></view>
      <view class="info-row flex-between" wx:if="{{order.discount_amount > 0}}"><text>等级折扣</text><text class="text-success">-¥{{order.discount_amount}}</text></view>
      <view class="info-row flex-between"><text>运费</text><text>免运费</text></view>
      <view class="divider"></view>
      <view class="info-row flex-between"><text class="text-bold">实付金额</text><text class="price">¥{{order.pay_amount}}</text></view>
    </view>
  </view>

  <!-- 订单信息 -->
  <view class="card">
    <view class="card-body">
      <view class="info-row flex-between"><text class="text-gray">订单编号</text><text selectable>{{order.order_no}}</text></view>
      <view class="info-row flex-between"><text class="text-gray">下单时间</text><text>{{order.created_at}}</text></view>
      <view class="info-row flex-between" wx:if="{{order.payment_method}}"><text class="text-gray">支付方式</text><text>{{order.payment_method}}</text></view>
      <view class="info-row flex-between" wx:if="{{order.remark}}"><text class="text-gray">备注</text><text>{{order.remark}}</text></view>
    </view>
  </view>

  <!-- 操作按钮 -->
  <view class="bottom-bar safe-bottom" wx:if="{{showActions}}">
    <view class="flex-row" style="justify-content:flex-end;width:100%;gap:16rpx">
      <button wx:if="{{order.status === 'pending_pay'}}" class="btn-primary btn-small" bindtap="onPay">立即付款</button>
      <button wx:if="{{order.status === 'pending_pay'}}" class="btn-plain btn-small" bindtap="onCancel">取消订单</button>
      <button wx:if="{{order.status === 'shipped'}}" class="btn-primary btn-small" bindtap="onConfirm">确认收货</button>
      <button wx:if="{{order.status === 'received'}}" class="btn-primary btn-small" bindtap="onReview">去评价</button>
      <button wx:if="{{order.status === 'completed'}}" class="btn-primary btn-small" bindtap="onFollowUp">追评</button>
      <button wx:if="{{order.status === 'pending_ship' || order.status === 'shipped' || order.status === 'received'}}" class="btn-plain btn-small" bindtap="onRefund">申请售后</button>
      <button wx:if="{{order.status === 'refunding'}}" class="btn-plain btn-small" bindtap="onCancelRefund">取消退款</button>
    </view>
  </view>
</view>
