<template>
  <scroll-view class="scroll-Y" scroll-y >
    <div>
      <div style="height:20px"></div>
      <!-- <wx-points-commit ref='wxPointsCommit'></wx-points-commit> -->
      <div class="order-price">
        <div class="text">开票金额</div>
        <div class="price">￥{{ parFee }}元</div>
      </div>
      <div class="tab-header">缴费订单总数 <sapn class="red">{{orderList.length}}单</sapn></div>
      <div class="order-list">
        <div class="order-item" v-for="(item, index) in orderList" :key="index" @click="gotoDetail(item)">
          <!-- 0：停车缴费  1:活动报名 2:积分兑换 -->
          <template>
            <div class="item-header">
              <div>{{ item.orderNo }}-{{ item.vehicleNo }}</div>
              <div class="red">￥{{ item.totalPaidAmount }}</div>
            </div>
            <div class="item-bottom">
              <div>{{ item.parkName }}</div>
              <div>入场时间: {{ item.enterTime }}</div>
              <div>停车时长: 停车时长: {{ item.serviceMin | parkingTime }}</div>
            </div>
          </template>
          <!-- <template v-else-if="item.invoiceCategory === 1"></template>
          <template v-else-if="item.invoiceCategory === 2"></template> -->
        </div>
      </div>
    </div>
  </scroll-view>
</template>

<script>
import parkingOrderDetailJs from '../../../mixins/parkingReceipt/parkingOrderDetail'
export default {
  mixins:[parkingOrderDetailJs]
}
</script>

<style lang="less" scoped>
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f2f2f2;
  padding: 20px;
  box-sizing: border-box;
  .order-price {
    border-radius: 10px;
    text-align: center;
    background-color: #ffffff;
    padding: 20px 0;
    margin-bottom: 20px;
    .text {
      color: #4D4D4D;
      padding: 10px 0;
    }
    .price {
      color: #000000;
      font-weight: 400;
      font-size: 32px;
      padding: 10px 0;
    }
  }
  .tab-header {
    color: #808080;
    padding: 10px 20px 20px;

  }
  .order-list {
    .order-item {
      border-radius: 20px;
      background-color: #ffffff;
      padding: 20px;
      margin-bottom: 20px;
      .item-header {
        padding-top: 6px;
        padding-bottom: 6px;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 400;
        border-bottom: 1px solid #F8F8F8;
        padding-bottom: 20px;
        padding-left: 10px;
      }
      .item-bottom {
        color: #808080;
        padding-top: 20px;
        padding-left: 10px;
        > div {
          padding: 10px 0;
        }
      }
    }
  }
  .red {
    color: #ED1C24;
  }
}
</style>
