<template>
  <scroll-view
    scroll-y="true"
    class="scroll-Y"
    style="background-color: #f4f7ff"
  >
    <div class="detail-box">
      <div class="parking-info mgb-40">
        <div class="parking-price">
          <div class="price">{{ (detail.payfee / 100) | currency }}</div>
          <div class="price-text">
            {{
              detail.refundStatus === 1
                ? '已退款'
                : detail.payStatus === 1
                ? '支付成功'
                : '支付失败'
            }}
          </div>
        </div>
        <div class="parking-part">
          <div class="parking-info-item">
            <span class="info-key">支付方式</span>
            <span class="info-value">{{ detail.paykind || '' }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">支付时间</span>
            <span class="info-value">{{ detail.createDate || '' }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">车牌号</span>
            <span class="info-value">{{ detail.carno | formatCarno }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">停车场</span>
            <span class="info-value">{{ detail.parkname }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">订单号</span>
            <span class="info-value">{{ detail.orderno }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">入场时间</span>
            <span class="info-value">{{ detail.entertime }}</span>
          </div>
          <!-- <uni-view class="parking-info-item">
            <span class="info-key">离场时间</span>
            <span class="info-value">{{ detail.outtime || "" }}</span>
          </uni-view> -->
          <div class="parking-info-item">
            <span class="info-key">停车时长</span>
            <span class="info-value">{{ parkingTime }}</span>
          </div>
          <div class="parking-info-item pb0">
            <span class="info-key">开票状态</span>
            <span class="info-value">{{ isInvoiceName }}</span>
          </div>
        </div>
      </div>
      <div class="parking-info mb-save">
        <div class="parking-part">
          <div class="parking-info-item" v-if="false">
            <!--todo: 杭州首停不显示暂时根据groupId写死-->
            <span class="info-key">首停优惠</span>
            <span class="info-value fw">{{
              (detail.firstParkFee / 100) | currency
            }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">会员等级减免</span>
            <span class="info-value fw">{{
              (detail.memberGradeFee / 100) | currency
            }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">消费减免</span>
            <span class="info-value fw">{{
              (detail.consumeFee / 100) | currency
            }}</span>
          </div>

          <div class="parking-info-item">
            <span class="info-key">积分减免</span>
            <span class="info-value fw">{{
              (detail.bonusfee / 100) | currency
            }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">会员卡券</span>
            <span class="info-value fw">{{
              (detail.couponfee / 100) | currency
            }}</span>
          </div>
          <div class="parking-info-item" v-if="detail.paperCouponCode">
            <span class="info-key">纸质优惠券</span>
            <span class="info-value fw">{{
              (detail.paperCouponFee / 100) | currency
            }}</span>
          </div>
          <div class="parking-info-item pb0">
            <span class="info-key">使用优惠总计</span>
            <span class="info-value fw">{{
              ((detail.usetotalfee || 0) / 100) | currency
            }}</span>
          </div>
          <div
            class="parking-info-item"
            v-if="detail.usetotalfee > detail.totalfee"
          >
            <span class="info-key">实际优惠总计</span>
            <span class="info-value fw">{{
              (detail.totalfee / 100) | currency
            }}</span>
          </div>
        </div>
        <div class="parking-detail"></div>
        <div class="parking-part">
          <div class="parking-info-item">
            <span class="info-key">应缴</span>
            <span class="info-value fw">{{
              (detail.servicefee / 100) | currency
            }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">实缴</span>
            <span class="info-value fw">{{
              (detail.payfee / 100) | currency
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </scroll-view>
</template>

<script>
// const app = getApp()
// const app = {};
// import moment from 'moment';
// import {detail as mockDetail, detailError as mockDetailSuccess} from './list'
import { mapState } from 'vuex';
import uni from '@/utils/uniHooks';
export default {
  data() {
    return {
      orderNo: '',
      isInvoiceName: '',
      detail: {},
      // groupId: app.globalData.groupId
    };
  },

  mounted() {
    setTimeout(() => {
      uni.setNavigationBarTitle({
        title: '缴费详情',
      });
    }, 300);
    this.orderNo = this.$route.query.orderNo;
    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}分钟`;
    },
    ...mapState({
      // custTypeId: (state) => state.custTypeId,
      // paramsScene: (state) => state.paramsScene,
      // mallid: (state) => state.mallId,
      // openId: (state) => state.openid,
      // member: (state) => state.member,
      groupId: (state) => state.groupId,
      // mobile: (state) => state.mobile,
      // projectId: (state) => state.projectId,
    }),
  },
  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;
            // this.detail = mockDetailSuccess.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: 20px;
  .detail-box {
    padding: 30px;
    .parking-info {
      // margin: 20px;
      // border-radius: 30px;
      // background-color: #ffffff;
      background: #fafbff;
      border-radius: 4px;
      border: 1px solid #d8dae0;

      .parking-price {
        text-align: center;
        padding: 30px 0px 50px;
        .price {
          font-size: 60px;
          font-weight: 600;
          color: #333333;
          line-height: 84px;
        }
        .price-text {
          font-weight: 300;
          font-size: 30px;
        }
      }
      .parking-detail {
        border-top: 2px solid #f5f5f5;
        width: calc(100% - 60px);
        margin-left: 30px;
      }
      .parking-part {
        padding: 30px;
        .parking-info-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 32px;
          padding-bottom: 30px;
          &.pb0 {
            padding-bottom: 0;
          }
          .info-key {
            text-align: left;
            color: #242424;
            font-size: 30px;
            font-weight: 400;
            color: #999999;
            line-height: 42px;
          }
          .info-value {
            text-align: right;
            font-size: 30px;
            font-weight: 400;
            color: #333333;
            line-height: 42px;
            &.fw {
              font-weight: 600;
            }
          }
          .red {
            color: #333333;
          }
        }
      }
    }
    .mgb-40 {
      margin-bottom: 24px;
    }
    .mb-save {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}
</style>
