<template>
  <scroll-view class="scroll-Y" scroll-y>
    <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:积分兑换 -->
        <template v-if="item.invoiceCategory === 0">
          <div class="item-header">
            <div class="carNo">{{ item.carNo }}</div>
            <div class="price">￥{{ getOrderItemPrice(item) }}</div>
          </div>
          <div class="item-bottom">
            <div>{{ item.parkName }}</div>
            <div>订单号: {{ item.orderNo }}</div>
            <div>入场时间: {{ item.enterTime }}</div>
            <div>停车时长: {{ item.serviceHour }}分钟</div>
          </div>
        </template>
        <template v-else-if="item.invoiceCategory === 1"></template>
        <template v-else-if="item.invoiceCategory === 2"></template>
      </div>
    </div>
  </scroll-view>
</template>

<script>
// const app = getApp()
import uni from '@/utils/uniHooks'

export default {
  data() {
    return {
      picUrl: this.$picUrl,
      order: {},
      parFee: '',
      id: '',
      orderList: [],
      optionsQuery: null,
      useParkingOrderCache: false,
    }
  },
  created() {
    const options = this.$route.query
    this.optionsQuery = options;
    this.id = options.id;
    const useParkingOrderCache = options?.useParkingOrderCache || 'false';
    // 如果是通过"发票申请"页面进入的，可以适用本地缓存直接获取数据
    if ( useParkingOrderCache == 'true' ) {
      this.useParkingOrderCache = true;
      const tempParkingOrder = this.$store.state?.tempParkingOrder;
      this.parFee = ( tempParkingOrder.invoiceAmount / 100 ).toFixed(2);
      const orderList = tempParkingOrder.list;
      orderList.forEach(item => {
        item.invoiceCategory = 0;
      });
      this.orderList = orderList;
    } else {
      this.useParkingOrderCache = false;
    }
  },
  mounted() {
    setTimeout(() => {
      uni.setNavigationBarTitle({
        title: '支付订单详情',
      });
    },300);
    if ( !this.useParkingOrderCache ) {
      this.getInvoicedDetail(this.id);
    }
  },
  methods: {
    gotoDetail( item ) {
      console.log(this.orderList);
      // this.$router.push({ path: '/pages/parkingFee/parkingFeeDetailSuccess?orderNo=' + item.orderNo });
    },
    // 根据发票id获取支付记录详情信息
    getInvoicedDetail( id ) {
      const self = this;
      const data = {
        id: id
      }
      self.$md(data);
      uni.request({
        url: self.$baseURL + 'api/1.0/invoice/myParkOrderListByInvoiceId?id=' + id,
        method: 'POST',
        data: data,
        header: JSON.parse(uni.getStorageSync('handleUser')),
        success: ( res ) => {
          console.log('获取订单详情信息',res.data)
          if ( res.data.code === 0 ) {
            self.order = res.data.data.list[0];
            self.parFee = ( res.data.data.invoiceAmount / 100 ).toFixed(2);
            self.orderList = res.data.data.list;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '服务器开小差了呢，请您稍后再试',
            icon: 'none'
          });
        },
      });
    },
    getOrderItemPrice( item ) {
      if ( this.useParkingOrderCache ) {
        const payFee = item.serviceFee;
        return ( payFee / 100 ).toFixed(2)
      } else {
        const payFee = item.invoiceAmount;
        return ( payFee / 100 ).toFixed(2)
      }
    },
  }
}
</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>



