<template>
  <scroll-view class="scroll-Y" scroll-y>
    <!--    <wx-points-commit ref='wxPointsCommit'></wx-points-commit>-->
    <div>
      <div class="part top">
        <div class="part-item lines header">
          <span class="part-item-key">抬头</span>
          <div class="part-item-value" @click="showHeader">
            {{ order.invoiceTitle.titleName || 'order' }}
            <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
          </div>
        </div>
        <div class="part-item">
          <span class="part-item-key">开票订单号</span>
          <span class="part-item-value">{{ order.invoiceOrderNo }}</span>
        </div>
        <div class="part-item">
          <span class="part-item-key">发票类型</span>
          <span class="part-item-value">增值税普通发票</span>
        </div>
        <div class="part-item">
          <span class="part-item-key">开票日期</span>
          <span class="part-item-value">{{
              order.invoiceDate ? order.invoiceDate : '-'
            }}</span>
        </div>
        <div class="part-item">
          <span class="part-item-key">发票号码</span>
          <span class="part-item-value">{{
              order.invoiceNumber ? order.invoiceNumber : '-'
            }}</span>
        </div>
        <div class="part-item">
          <span class="part-item-key">发票代码</span>
          <span class="part-item-value">{{
              order.invoiceCode ? order.invoiceCode : '-'
            }}</span>
        </div>
        <div class="part-item">
          <span class="part-item-key">备注</span>
          <span class="part-item-value">{{ order.remark }}</span>
        </div>
      </div>
      <div class="part middle">
        <div class="part-item">
          <span class="part-item-key">总金额</span>
          <span class="part-item-value"
          ><span class="purple">{{ order.invoiceTotalAmount }}</span
          >元</span
          >
        </div>
        <div class="part-item">
        <span class="part-item-key"
        >共<span class="purple">{{ order.totalOrderCount }}笔</span>缴费记录</span
        >
          <div class="part-item-value" @click="gotoRecordDetail">
            <span>查看详情</span>
            <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
          </div>
        </div>
      </div>
      <div class="footer">
        <div
          :class="{
          btn: true,
          'push-again-btn': true,
          'blue-push-again-btn': custTypeId === 1,
          'green-push-again-btn': custTypeId === 2,
        }"
          @click="showInvoiceDetail"
        >
          查看发票
        </div>
      </div>
    </div>

  </scroll-view>
</template>

<script>
import parkingInvoiceJs from '../../../mixins/parkingReceipt/parkingInvoice';

export default {
  mixins: [parkingInvoiceJs],
};
</script>

<style lang="less" scoped>
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f2f2f2;
  padding: 20px;
  box-sizing: border-box;
  .part {
    background-color: #ffffff;
    padding: 0 30px;
    border-radius: 20px;
    .part-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      box-sizing: border-box;
      .part-item-key {
        color: #4c4c4d;
      }
      .part-item-value {
        color: #6f6f70;
        text-align: right;
        display: flex;
        align-items: center;
        > img {
          width: 30px;
        }
      }
    }
    .tab-title {
      color: #676767;
      padding: 30px 0px;
    }
    .lines {
      border-bottom: 2px solid #ececec;
    }
    .invoice-more {
      padding-bottom: 8px;
    }
  }
  .top {
    padding-top: 20px;
  }
  .middle {
    margin: 20px 0;
    > .part-item {
      background-color: #ffffff;
    }
    .purple {
      color: #ed1c24;
    }
  }
  .footer {
    padding-top: 20px;
    .btn {
      margin: 20px 60px;
      color: #ffffff;
      border-radius: 50px;
      text-align: center;
      padding: 20px 0;
    }
    .push-again-btn {
      background-image: linear-gradient(to right, #7d4ea1, #40397c);
    }
    .blue-push-again-btn {
      .color-background-color('blue');
    }
    .green-push-again-btn {
      .color-background-color('green');
    }
  }
}
</style>
