<template>
  <scroll-view class="scroll-Y" scroll-y >
    <!-- <wx-points-commit ref='wxPointsCommit'></wx-points-commit> -->
    <div>
      <div class="part" v-if="header.invoiceTitleType === 'COMPANY'">
      <div class="part-item">
        <span class="part-item-key">抬头类型</span>
        <div class="part-item-value">单位</div>
      </div>
      <div class="part-item">
        <span class="part-item-key">抬头名称</span>
        <span class="part-item-value">{{ header.titleName }}</span>
      </div>
      <div class="part-item">
        <span class="part-item-key">公司税号</span>
        <span class="part-item-value">{{ header.taxNo }}</span>
      </div>
      <div class="part-item">
        <span class="part-item-key">公司地址</span>
        <span class="part-item-value">{{ header.companyAddress }}</span>
      </div>
      <div class="part-item">
        <span class="part-item-key">公司电话</span>
        <span class="part-item-value">{{ header.companyTel }}</span>
      </div>
      <div class="part-item">
        <span class="part-item-key">开户银行</span>
        <span class="part-item-value">{{ header.depositBank }}</span>
      </div>
      <div class="part-item">
        <span class="part-item-key">开户账户</span>
        <span class="part-item-value">{{ header.depositAccount }}</span>
      </div>
    </div>
      <div class="part" v-else>
        <div class="part-item">
          <span class="part-item-key">抬头类型</span>
          <div class="part-item-value">{{ header.invoiceTitleType === 'COMPANY' ? '单位' : '个人/非企业单位'}}</div>
        </div>
        <div class="part-item">
          <span class="part-item-key">抬头名称</span>
          <span class="part-item-value">{{ header.titleName }}</span>
        </div>
      </div>
    </div>
  </scroll-view>
</template>

<script>
import parkingHeaderDetailJs from '../../../mixins/parkingReceipt/parkingHeaderDetail';

export default {
  mixins: [parkingHeaderDetailJs],
};
</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;
        > image {
          width: 30px;
        }
      }
    }
  }

}

</style>
