<template>
  <div class="scroll-Y">
    <div>
      <div class="order-price">
        <div class="text">开票金额</div>
        <div class="price">￥{{ parFee }}元</div>
      </div>
      <div class="tab-header">缴费订单总数 <span class="red">{{ orderList.length }}单</span></div>
      <div class="order-list">
        <div class="order-item" v-for="(item, index) in orderList" :key="index" @click="gotoDetail(item)">
          <!-- 0：停车缴费  1:活动报名 2:积分兑换 v-if="item.invoiceCategory === 0"-->
          <template>
            <div class="item-header">
              <div class="carNo">{{ item.vehicleNo }}</div>
              <div class="price">￥{{item.totalPaidAmount }}</div>
              <!-- getOrderItemPrice(item) -->
            </div>
            <div class="item-bottom">
              <div>{{ item.parkName }}</div>
              <div>订单号: {{ item.orderNo }}</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>
  </div>
</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: #F4F7FF;
  padding: 20px;
  box-sizing: border-box;

  .order-price {
    // border-radius: 10px;
    text-align: center;
    // background-color: #ffffff;
    padding: 30px;
    margin-bottom: 36px;
    // width: 690px;
    // height: 189px;

    background: #FAFBFF;
    border-radius: 4px;
    border: 1px solid #D8DAE0;

    .text {
      font-size: 30px;
      font-weight: 400;
      color: #333333;
      line-height: 42px;
      margin-bottom: 20px;
    }

    .price {
      // width: 158px;
      // height: 67px;
      font-size: 48px;
      // font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 67px;
    }
  }

  .tab-header {
    color: #808080;
    padding: 10px 20px 20px;
    // width: 690px;
    // height: 189px;

    // background: #FAFBFF;
    // border-radius: 4px;
    // border: 1px solid #D8DAE0;

  }

  .order-list {
    .order-item {
      // border-radius: 20px;
      // background-color: #ffffff;
      padding: 30px;
      // margin-bottom: 20px;

      // width: 690px;
      // height: 345px;
      background: #FAFBFF;
      border-radius: 4px;
      border: 1px solid #D8DAE0;

      .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 #D8DAE0;
        padding-bottom: 20px;
        padding-left: 10px;

        .carNo {
          font-size: 36px;
          font-weight: 600;
          color: #333333;
          line-height: 50px;
        }

        .price {
          font-size: 30px;
          font-weight: 600;
          color: #333333;
          line-height: 42px;
        }
      }

      .item-bottom {
        // color: #808080;
        // padding-top: 20px;
        // padding-left: 10px;

        font-size: 28px;
        font-weight: 400;
        color: #999999;
        line-height: 40px;
        padding-top: 8px;

        > div {
          padding-top: 12px;
        }
      }
    }
  }

  .red {
    color: #064C8A;
  }
}
</style>



