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

    <view class="parking-info">
      <view class="parking-price">
        <view class="price">{{ (detail.payfee / 100) | currency }}</view>
        <view class="price-text">{{
          detail.refundStatus === 1
            ? '已退款'
            : detail.payStatus === 1
            ? '支付成功'
            : '支付失败'
        }}</view>
      </view>
      <view class="parking-part parking-detail">
        <view class="parking-info-item">
          <text class="info-key">支付方式</text>
          <text class="info-value">{{ detail.paykind || '' }}</text>
        </view>

        <view class="parking-info-item">
          <text class="info-key">支付时间</text>
          <text class="info-value">{{ detail.createDate || '' }}</text>
        </view>
        <view class="parking-info-item">
          <text class="info-key">车牌号</text>
          <text class="info-value">{{ detail.carno | formatCarno }}</text>
        </view>
        <view class="parking-info-item">
          <text class="info-key">停车场</text>
          <text class="info-value">{{ detail.parkname }}</text>
        </view>
      </view>
      <view class="parking-part parking-detail">
        <view class="parking-info-item">
          <text class="info-key">订单号</text>
          <text class="info-value">{{ detail.orderno }}</text>
        </view>
        <view class="parking-info-item">
          <text class="info-key">入场时间</text>
          <text class="info-value">{{ detail.entertime }}</text>
        </view>
        <!-- <view class="parking-info-item">
          <text class="info-key">离场时间</text>
          <text class="info-value">{{ detail.outtime || "" }}</text>
        </view> -->
        <view class="parking-info-item">
          <text class="info-key">停车时长</text>
          <text class="info-value">{{ parkingTime }}</text>
        </view>
        <view class="parking-info-item">
          <text class="info-key">开票状态</text>
          <text class="info-value">{{ isInvoiceName }}</text>
        </view>
      </view>
    </view>
    <view class="parking-info mgb-40">
      <view class="parking-part">
        <view class="parking-info-item" v-if="false"
          ><!--todo: 杭州首停不显示暂时根据groupId写死-->
          <text class="info-key">首停优惠</text>
          <text class="info-value">{{
            (detail.firstParkFee / 100) | currency
          }}</text>
        </view>
        <view class="parking-info-item">
          <text class="info-key">会员等级减免</text>
          <text class="info-value">{{
            (detail.memberGradeFee / 100) | currency
          }}</text>
        </view>
        <view class="parking-info-item">
          <text class="info-key">消费减免</text>
          <text class="info-value">{{
            (detail.consumeFee / 100) | currency
          }}</text>
        </view>
        <view class="parking-info-item">
          <text class="info-key">新会员积分减免</text>
          <text class="info-value">{{
            (detail.newMemeberBonusFee / 100) | currency
          }}</text>
        </view>
        <view class="parking-info-item">
          <text class="info-key">积分减免</text>
          <text class="info-value">{{
            (detail.bonusfee / 100) | currency
          }}</text>
        </view>
        <view class="parking-info-item">
          <text class="info-key">会员卡券</text>
          <text class="info-value">{{
            (detail.couponfee / 100) | currency
          }}</text>
        </view>
        <view class="parking-info-item" v-if="detail.paperCouponCode">
          <text class="info-key">纸质优惠券</text>
          <text class="info-value">{{
            (detail.paperCouponFee / 100) | currency
          }}</text>
        </view>
        <view class="parking-info-item">
          <text class="info-key">使用优惠总计</text>
          <text class="info-value">{{
            ((detail.usetotalfee || 0) / 100) | currency
          }}</text>
        </view>
        <view
          class="parking-info-item"
          v-if="detail.usetotalfee > detail.totalfee"
        >
          <text class="info-key">实际优惠总计</text>
          <text class="info-value">{{
            (detail.totalfee / 100) | currency
          }}</text>
        </view>
      </view>
      <view class="parking-part parking-detail">
        <view class="parking-info-item">
          <text class="info-key">应缴</text>
          <text class="info-value">{{
            (detail.servicefee / 100) | currency
          }}</text>
        </view>
        <view class="parking-info-item">
          <text class="info-key">实缴</text>
          <text class="info-value red">{{
            (detail.payfee / 100) | currency
          }}</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      orderNo: '',
      isInvoiceName: '',
      detail: {},
      groupId: app.globalData.groupId,
    };
  },
  onLoad(params) {
    this.orderNo = params.orderNo;
  },
  onShow() {
    this.getData();
  },
  computed: {
    parkingTime() {
      const time = this.detail.serviceMin;
      const days = parseInt(time / 60 / 24);
      const hours = parseInt((time / 60) % 24);
      const minutes = parseInt(time % 60);
      if (days > 0) {
        return `${days}天 ${hours}小时 ${minutes}分钟`;
      }
      if (hours > 0) {
        return `${hours}小时 ${minutes}分钟`;
      }
      return `${minutes}分钟`;
    },
  },
  methods: {
    getData() {
      const params = {
        orderno: this.orderNo,
      };
      uni.showLoading({
        title: '加载中',
      });
      this.$md(params);
      uni.request({
        url: this.$baseURL + 'api/1.0/park/parkOrderDetail',
        data: params,
        method: 'POST',
        header: JSON.parse(uni.getStorageSync('handleUser')),
        success: (res) => {
          uni.hideLoading();
          if (res.data.code == 0) {
            this.detail = res.data.data;
            const isInvoice = this.detail.isInvoice;
            if (isInvoice == 0) {
              this.isInvoiceName = '未开票';
            } else if (isInvoice == 1) {
              this.isInvoiceName = '已申请开票';
            } else if (isInvoice == 2) {
              this.isInvoiceName = '开票中';
            } else if (isInvoice == 3) {
              this.isInvoiceName = '开票完成';
            } else if (isInvoice == 4) {
              this.isInvoiceName = '开票失败';
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: 'none',
            });
          }
        },
        fail: (err) => {
          uni.hideLoading();
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: 'none',
          });
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f2f2f2;
  padding-bottom: 20rpx;
  .parking-info {
    margin: 20rpx;
    padding: 20rpx;
    border-radius: 30rpx;
    background-color: #ffffff;
    .parking-price {
      text-align: center;
      padding: 20rpx 0rpx 40rpx;
      .price {
        color: rgb(255, 0, 0);
        font-weight: 600;
        font-size: 52rpx;
      }
      .price-text {
        font-weight: 300;
        font-size: 30rpx;
      }
    }
    .parking-detail {
      border-top: 2rpx solid #f5f5f5;
    }
    .parking-part {
      padding: 20rpx;
      .parking-info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0rpx;
        font-size: 32rpx;
        .info-key {
          text-align: left;
          color: #242424;
        }
        .info-value {
          text-align: right;
          color: #999999;
        }
        .red {
          color: #ee2c34;
        }
      }
    }
  }
  .mgb-40 {
    margin-bottom: 20px;
  }
}
</style>
