<view>
  <view a:if="{{!noData && !loading}}" class="scenic-order-detail-details">
    <view class="header-bj">
      <view style="background-color: {{bannerColor}}; height: calc(428rpx - {{titleBarHeight + 'px'}});"></view>
    </view>
    <view class="content-body">
      <block a:for="{{status}}" a:key="*this">
        <view class="title" a:if="{{item.value === record.orderStatus}}">
          <view class="status">{{item.title}}</view>
          <view class="desc">{{item.desc}}</view>
        </view>
      </block>
      <!--  状态为2才展示入园凭证  -->
      <block a:if="{{record.orderStatus === '2'}}">
        <view class="body" style="margin-bottom: 24rpx;">
          <view class="mount">
            <view class="mount-desc">入园凭证</view>
          </view>
          <view class="hr"></view>
          <qrcode touristList="{{record.qrcodeList}}" />
        </view>
      </block>
      <view class="body">
        <!--  状态为0才展示应付金额  -->
        <block a:if="{{record.orderStatus === '0'}}">
          <view class="mount">
            <view class="mount-desc">应付金额</view>
            <view class="order-pay-amount">￥{{record.orderPayAmount}}</view>
          </view>
          <view class="hr"></view>
        </block>
        <view class="item-title">{{record.scenicName}}</view>
        <view class="item-details">
          <view class="key">游玩日期</view>
          <view class="value">{{record.playDate}}</view>
        </view>
        <view class="item-details">
          <view class="key">购买数量</view>
          <view class="value">{{record.quantity}}</view>
        </view>
        <view class="item-details">
          <view class="key">入园时间</view>
          <view class="value">{{record.scenicBizHours}}</view>
        </view>
        <view class="hr"></view>
        <view class="item-title">游客信息</view>
        <view class="item-details">
          <view class="key">游玩人</view>
          <view class="value">
            <block a:for="{{record.touristList}}" a:key="*this">
              <view class="user">
                <view class="tourist">{{item.name}}</view>
                <view class="tourist">{{item.idCardNo}}</view>
                <view class="tourist">{{item.mobile}}</view>
              </view>
            </block>
          </view>
        </view>
        <view class="hr" style="padding-top: 8rpx;"></view>
        <view class="item-title">订单信息</view>
        <view class="item-details">
          <view class="key">订单编号</view>
          <view class="value">{{record.orderId}}</view>
        </view>
        <view class="item-details">
          <view class="key">下单时间</view>
          <view class="value">{{record.gmtCreate}}</view>
        </view>
      </view>
    </view>
    <view class="actions">
      <view class="left">
        <view class="total">总额：</view>
        <view class="value">¥{{record.orderPayAmount}}</view>
      </view>
      <view class="right">
        <button
          a:if="{{record.orderStatus === '0'}}"
          class="button"
          hover-class="hover-class"
          catchTap="onCancel"
          data-record="{{record}}"
        >
          取消订单
        </button>
        <button
          a:if="{{(record.orderStatus === '1' || record.orderStatus === '2') && record.allowRefund}}"
          class="button"
          hover-class="hover-class"
          catchTap="showRefund"
        >
          申请退款
        </button>
        <button
          a:if="{{record.orderStatus === '0'}}"
          class="button primary"
          hover-class="hover-class"
          catchTap="onPayment"
          data-record="{{record}}"
        >
          立即支付
        </button>
      </view>
    </view>
    <popup
      show="{{visibleRefund}}"
      position="bottom"
      onClose="hideRefund"
      className="my-am-popup-mask"
      disableScroll="{{true}}"
    >
      <view class="refund">
        <view>
          <view class="title">申请退款</view>
          <view class="hr" style="padding-top: 0;"></view>
          <view class="refund-amount">
            <view class="left">
              <text>申请金额</text>
              <text class="star">*</text>
            </view>
            <view class="right">¥{{refund.refundAmount}}</view>
          </view>
          <view class="service-charge">该商品取消将收取手续费¥{{refund.refundCharge}}</view>
        </view>
        <view class="refund-actions">
          <button
            class="button"
            hover-class="hover-class"
            catchTap="hideRefund"
            style="margin-right: 24rpx;"
          >
            取消
          </button>
          <button
            class="button primary"
            hover-class="hover-class"
            catchTap="refund"
          >
            确认提交
          </button>
        </view>
      </view>
    </popup>
  </view>
  <view class="scenic-order-detail-loading" a:if="{{loading}}">
    <loading />
  </view>
  <view a:if="{{noData}}" style="margin-top: 300rpx;">
    <empty onRefresh="scenicOrderDetail" showRefresh="true" />
  </view>
</view>
