<!--pages/shop/orderDetail.wxml-->
<view class="page-title-container" wx:if="{{ orderStatusCode == 'Pending' }}">
  <view class="page-title-emoji">🎉</view>
  <view class="page-title">订单已创建，快去支付吧</view>
</view>
<view class="page-title-container" wx:elif="{{ orderStatusCode == 'Processing' }}">
  <view class="page-title-emoji">🍻</view>
  <view class="page-title">订单已支付，正在等待发货</view>
</view>
<view class="page-title-container" wx:elif="{{ orderStatusCode == 'Cancelled' }}">
  <view class="page-title-emoji">❌</view>
  <view class="page-title">订单已取消</view>
</view>
<view class="page-title-container" wx:elif="{{ orderStatusCode == 'Shipped' }}">
  <view class="page-title-emoji">😎</view>
  <view class="page-title">订单已发货，请耐心等待</view>
</view>
<view class="page-title-container" wx:elif="{{ orderStatusCode == 'Delivered' }}">
  <view class="page-title-emoji">🥳</view>
  <view class="page-title">订单已送达</view>
</view>
<view class="page-title-container" wx:elif="{{ orderStatusCode == '' }}">
  <view class="page-title-emoji">⏳</view>
  <view class="page-title">请稍候</view>
</view>
<view class="page-title-container" wx:else>
  <view class="page-title-emoji">❓</view>
  <view class="page-title">未知状态</view>
</view>

<!-- 订单总金额 -->
<view style="text-align: center;">
  <view class="good-price good-price-counter">
    <view class="good-price-symbol" style="font-size: 40rpx;">¥</view>
    <view class="good-price-number" style="font-size: 60rpx;">{{ orderPrice }}</view>
  </view>
</view>

<view class="order-info">
  <view>订单号：{{order.id}}</view>
  <view>订单创建时间：{{orderTime}}</view>
  <view wx:if="{{payDate}}">订单支付时间：{{order.payDate}}</view>
  <view>订单总金额：{{order.orderPrice}} 元</view>
  <view>订单状态：{{order.orderStatus}}</view>
</view>

<view class="good-list-title">订单详情</view>

<view class="good-card-container" wx:for="{{orderGoodList}}" wx:for-item="item" wx:key="wxid" goodinfo="{{item}}">
  <!-- 商品图片 -->
  <view class="good-card-image" style="background-image: {{ 'url(' + item.good.picUrl + ');'}};">
  </view>

  <!-- 商品标题 -->
  <view class="good-card-info good-title-container">
    <text class="good-title line-wrap">{{ item.good.brief }}</text>
  </view>

  <!-- 下单时刻商品单价 -->
  <view class="good-card-info">
    <view class="good-price good-price-counter">
      <view class="good-price-symbol">¥</view>
      <view class="good-price-number">{{ item.unitPrice }}</view>
    </view>
  </view>

  <!-- 商品个数 -->
  <view class="good-card-info">
    <view>x{{ item.goodCount }}</view>
  </view>
</view>

<view style="height: 110px;">
  <!-- 占位用 -->
</view>

<view class="bottom-controlbox">
  <!-- 屏幕底部 -->
  <view class="bottom-buttons">
    <!-- Pending -->
    <view wx:if="{{ orderStatusCode == 'Pending' }}" class="btn btn-hollow" bindtap="cancelPayment">取消订单</view>
    <view wx:if="{{ orderStatusCode == 'Pending' }}" class="btn btn-solid" bindtap="confirmPayment">确认支付</view>
    <!-- Cancelled -->
    <view wx:if="{{ orderStatusCode == 'Cancelled' }}" class="txt txt-disabled">❕无法操作已取消订单</view>
    <!-- Processing -->
    <view wx:if="{{ orderStatusCode == 'Processing' }}" class="btn btn-hollow" bindtap="cancelPayment">取消订单</view>
    <!-- Shipped -->
    <view wx:if="{{ orderStatusCode == 'Shipped' }}" class="txt txt-disabled">当前订单不可取消，请耐心等待</view>
    <!-- Delivered -->
    <view wx:if="{{ orderStatusCode == 'Delivered' }}" class="txt txt-done">✅订单已送达</view>
  </view>
</view>