<template>
  <div  :class="['scroll-Y', theme]">
    <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="carno-box">
          <div class="carno">{{ item.orderNo  }}</div>
          <!-- <div class="servicefee">{{ item.actualPayFee | currency }}</div> -->
        </div>
        <div class="van-hairline--bottom"></div>
        <div class="choice_card_index orderno-box">
          <div class="orderno">{{ item.vehicleNo }}</div>
          <!-- <van-icon name="arrow" /> -->
        </div>
        <div class="choice_card_index">
          <div class="choice_card_index_icon">
            <img
                class="car-icon"
                :src="require(`../static/images/vector.png`)"
              />
          <div class="choice_card_index_text">入场时间</div>
          </div>
          <div class="choice_card_index_icon">
            <img
                class="car-icon"
                :src="require(`../static/images/car_time.png`)"
              />
          <div class="choice_card_index_text">停车时长</div>
          </div> 
          <!-- {{ item.enterTime }} -->
        </div>
        <div class="choice_card_index time-box">
          <div class="choice_card_index_icon">
            {{ item.enterTime }}
          </div>
          <div class="choice_card_index_icon">
            {{ item.serviceMin | parkingTime }}
          </div> 
          <!-- {{ item.enterTime }} -->
        </div>
        <div class="choice_card_index"  style="padding-bottom:40px;" >
          <div class="choice_card_index_icon bg_parkingRoom">
            <img
                class="car-icon"
                :src="require(`../static/images/parking_room.png`)"
              />
          <div class="choice_card_index_text2">{{item.parkName}}</div>
          </div>
          <!-- {{ item.enterTime }} -->
        </div>
        <div class="van-hairline--bottom"></div>
        <div class="choice_card_index orderno-box2">
          <div class="orderFee">¥{{ item.totalPaidAmount }}</div>
          <!-- <div class="orderDetail">查看详情</div> -->
          <!-- <van-icon name="arrow" /> -->
        </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'
import baseMixins from '../mixins/base'
export default {
  mixins:[baseMixins, 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;
  .choice_card_index {
    // width: calc(100% - 48px);
    font-size: 28px;
    font-weight: 400;
    color: #999999;
    line-height: 40px;
    //margin-bottom: 12px;
    display: flex;
    padding: 14px 35px 0px;
    margin-top: 10px;
    &.time-box {
      margin-top: 0;
    }
    
    .choice_card_index_icon {
      width: 50%;
      height:40px;
      line-height: 40px;
      display: flex;
      color:#333;
      .car-icon {
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }
    }
    .bg_parkingRoom {
      background-color: #F4F7FF;
      width: 100%;
      padding: 15px 0 15px 8px;

    }
    .choice_card_index_text {
      display: inline-block;
      line-height: 40px;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 28px;
      color:#666;

    }
    .choice_card_index_text2 {
      display: inline-block;
      line-height: 40px;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 28px;
      color:#333;

    }
    // justify-content: space-between;
    &.mt0 {
      margin-top: 0;
    }
    &.mb0 {
      margin-bottom: 0;
    }
    &.pb0 {
      padding-bottom: 0;
    }
    .status-box {
      font-size: 30px;
      font-weight: 400;
      color: #064c8a;
      line-height: 42px;
      &.other {
        color: #999999;
      }
    }
  }
  .choice_card {
  width: calc(100% - 48px);
  margin:43px 24px;
  // margin-top: 30px;
  // padding: 30px;
  // border-radius: 20px;
  position: relative;
  background-color: #fafbff;
  border-radius: 4px;
  // border: 1px solid #d8dae0;
  &.mt30 {
    margin-top: 30px;
  }
  
  
  .choice_card_index {
    // width: calc(100% - 48px);
    font-size: 28px;
    font-weight: 400;
    color: #999999;
    line-height: 40px;
    margin-bottom: 12px;
    display: flex;
    padding: 11px 35px;
    
    .choice_card_index_icon {
      width: 50%;
      height:40px;
      line-height: 40px;
      display: flex;
      color:#333;
      .car-icon {
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }
    }
    .bg_parkingRoom {
      background-color: #F4F7FF;
      width: 100%;
      padding: 15px 0;

    }
    .choice_card_index_text {
      display: inline-block;
      line-height: 40px;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 28px;
      color:#666;

    }
    .choice_card_index_text2 {
      display: inline-block;
      line-height: 40px;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 28px;
      color:#333;

    }
    // justify-content: space-between;
    &.mt0 {
      margin-top: 0;
    }
    &.mb0 {
      margin-bottom: 0;
    }
    &.pb0 {
      padding-bottom: 0;
    }
    .status-box {
      font-size: 30px;
      font-weight: 400;
      color: #064c8a;
      line-height: 42px;
      &.other {
        color: #999999;
      }
    }
  }
  .orderno-box {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: #333;
    padding-top: 31px;
    line-height:28px;
  }
  .orderno-box2 {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: #333;
  }
  .orderFee {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 34px;
    line-height:40px;
    // vertical-align: middle;
    align-self: center;
    color: #333;
    // margin-top:5px;
    // padding: 10px 0;
  }
  .orderDetail {
    border: 1px solid #333333;
    border-radius: 32.5px;
    padding: 5px 33px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
  
  }
}
  .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:0  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;
        }
      }
    }
  }
  .orderno-box2 {
    padding-bottom: 20px;
    font-size: 34px;
  }
  .red {
    color: var(--k-color-primary-01);
  }
  .orderFee {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 34px;
    line-height:40px;
    // vertical-align: middle;
    align-self: center;
    color:#333;
    // margin-top:5px;
    // padding: 10px 0;
  }
  .orderDetail {
    border: 1px solid #333333;
    border-radius: 32.5px;
    padding: 5px 33px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
  
  }
  .orderno-box {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: #333;
    padding-top: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height:28px;
    font-size: 36px;
  }
  .carno-box {
    display: flex;
    padding-bottom: 18px;
    // border-bottom: 1px solid #d8dae0;`
    justify-content: space-between;
    padding: 20px 35px;
    color:#999;
    
    .servicefee {
      font-size: 30px;
      font-weight: 600;
      color: #333333;
      line-height: 42px;
    }
    .status-box {
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 30px;
      color: var(--k-color-primary-01);
      line-height: 42px;
      &.other {
        color: #B15124;
      }
    }
  }
}
</style>



