<template>
  <scroll-view class="scroll-Y" scroll-y>
    <wx-points-commit ref="wxPointsCommit"></wx-points-commit>

    <view class="order-price">
      <view class="text">开票金额</view>
      <view class="price">￥{{ parFee }}元</view>
    </view>
    <view class="tab-header"
      >缴费订单总数 <text class="red">{{ orderList.length }}单</text></view
    >
    <view class="order-list">
      <view
        class="order-item"
        v-for="(item, index) in orderList"
        :key="index"
        @click="gotoDetail(item)"
      >
        <!-- 0：停车缴费  1:活动报名 2:积分兑换 -->
        <template v-if="item.invoiceCategory === 0">
          <view class="item-header">
            <view>{{ item.orderNo }}-{{ item.carNo }}</view>
            <view class="red">￥{{ getOrderItemPrice(item) }}</view>
          </view>
          <view class="item-bottom">
            <view>{{ item.parkName }}</view>
            <view>入场时间: {{ item.enterTime }}</view>
            <view>停车时长: {{ item.serviceHour }}分钟</view>
          </view>
        </template>
        <template v-else-if="item.invoiceCategory === 1"></template>
        <template v-else-if="item.invoiceCategory === 2"></template>
      </view>
    </view>
  </scroll-view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      picUrl: this.$picUrl,
      order: {},
      parFee: '',
      id: '',
      orderList: [],
      optionsQuery: null,
      useParkingOrderCache: false,
    };
  },
  onLoad(options) {
    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;
    }
  },
  onShow() {
    if (!this.useParkingOrderCache) {
      this.getInvoicedDetail(this.id);
    }
  },
  methods: {
    gotoDetail(item) {
      uni.navigateTo({
        url:
          '/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: #f2f2f2;
  padding: 20rpx;
  box-sizing: border-box;
  .order-price {
    border-radius: 10rpx;
    text-align: center;
    background-color: #ffffff;
    padding: 20rpx 0;
    margin-bottom: 20rpx;
    .text {
      color: #4d4d4d;
      padding: 10rpx 0;
    }
    .price {
      color: #000000;
      font-weight: 400;
      font-size: 32rpx;
      padding: 10rpx 0;
    }
  }
  .tab-header {
    color: #808080;
    padding: 10rpx 20rpx 20rpx;
  }
  .order-list {
    .order-item {
      border-radius: 20rpx;
      background-color: #ffffff;
      padding: 20rpx;
      margin-bottom: 20rpx;
      .item-header {
        padding-top: 6rpx;
        padding-bottom: 6rpx;
        font-size: 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 400;
        border-bottom: 1px solid #f8f8f8;
        padding-bottom: 20rpx;
        padding-left: 10rpx;
      }
      .item-bottom {
        color: #808080;
        padding-top: 20rpx;
        padding-left: 10rpx;
        > view {
          padding: 10rpx 0;
        }
      }
    }
  }
  .red {
    color: #ed1c24;
  }
}
</style>
