<view class="scenic-order-detail">
  <view class="scenic-order-detail-tabs">
    <tabs
      tabs="{{tabs}}"
      tabsName="value"
      activeTab="{{activeTab}}"
      onTabClick="onTabClick"
      capsule="{{false}}"
    />
  </view>
  <scroll-fetch
    ref="saveRef"
    onService="onService"
    className="scroll-fetch-list"
    style="min-height: calc(100vh - {{titleBarHeight + 'px'}} - 48rpx);"
  >
    <view slot-scope="props">
      <view a:for="{{props.list}}" a:key="*this">
        <view class="item-box" onTap="onDetails" data-record="{{item}}">
          <view class="header">
            <view>{{item.createDateTime}}</view>
            <block a:for="{{status}}" a:key="*this" a:for-item="statusRecord">
              <view a:if="{{item.status === statusRecord.value}}" style="color: {{statusRecord.color}};">
                {{statusRecord.typeTitle}}
              </view>
            </block>
          </view>
          <view class="body">
            <view class="img">
              <image src="{{item.thumbImageUrl}}" />
            </view>
            <view class="desc">
              <view class="title">{{item.title}}</view>
              <view class="product-type">{{item.productType}}</view>
              <view class="plan-date-time">出行日期：{{item.planDateTime}}</view>
            </view>
            <view class="total">
              <view class="product-price">¥{{item.productPrice}}</view>
              <view class="quantity">x{{item.quantity}}</view>
            </view>
          </view>
          <view class="footer">
            <view class="quantity">共{{item.quantity}}件 合计</view>
            <view class="order-pay-amount">￥{{item.orderPayAmount}}</view>
          </view>
          <view class="actions">
            <!--  <view class="button">删除订单</view>  -->
            <button
              a:if="{{item.status === '0'}}"
              class="button"
              hover-class="hover-class"
              catchTap="onCancel"
              data-record="{{item}}"
            >
              取消订单
            </button>
            <button
              a:if="{{item.status === '0' && item.tradeNo}}"
              class="button primary"
              hover-class="hover-class"
              catchTap="onPayment"
              data-record="{{item}}"
            >
              立即支付
            </button>
          </view>
        </view>
      </view>
    </view>
  </scroll-fetch>
</view>
