<template>
  <div class="wrap">
    <div class="navBar">
      <van-nav-bar
        title="查看发票"
        left-arrow
        left-arrow-color="#FFFFFF"
        :border="false"
        :fixed="true"
        :safe-area-inset-top="true"
        @click-left="h5GoBack"
      />
    </div>
    <div class="contentWrap">
      <div class="content_tab">
        <div class="tab_content">
          <div class="item_wrap">
            <div class="item_label">付款方</div>
            <div class="item_content">中道汽车救援股份有限公司</div>
          </div>
          <div class="item_wrap">
            <div class="item_label">收款方</div>
            <div class="item_content">{{invoiceInfo.accountName}}</div>
          </div>
          <div class="item_wrap">
            <div class="item_label">发票号码</div>
            <div class="item_content">
              {{invoiceInfo.invoiceNumber}}
            </div>
          </div>
          <div class="item_wrap">
            <div class="item_label">发票金额</div>
            <div class="item_content">￥{{invoiceInfo.invoiceMoney}}</div>
          </div>
          <div class="item_wrap">
            <div class="item_label">税率</div>
            <div class="item_content">{{invoiceInfo.taxRate}}%</div>
          </div>
          <div class="item_wrap">
            <div class="item_label">税额</div>
            <div class="item_content">{{invoiceInfo.taxAmount}}</div>
          </div>
          <div class="item_wrap">
            <div class="item_label">未税金额</div>
            <div class="item_content">{{invoiceInfo.afterTaxAmount}}</div>
          </div>
          <div class="item_wrap">
            <div class="item_label">发票类型</div>
            <div class="item_content">{{invoiceInfo.invoiceTypeCodeString}}</div>
          </div>
          <div class="item_wrap">
            <div class="item_label">开票日期</div>
            <div class="item_content">{{invoiceInfo.invoiceDate}}</div>
          </div>
          <div class="item_wrap">
            <div class="item_label">发票影像</div>
            <div class="item_content">
              <div class="invoice_btn" @click="showInvoiceHandler(invoiceInfo.path)">查看发票</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { myMixins } from "@/utils/myMixins"
  export default {
    name: "showInvoice",
    mixins:[ myMixins ],
    data() {
      return {
        invoiceInfo: {},
      }
    },
    mounted() {
      let invoiceDetail = localStorage.getItem('invoiceDetail')
      this.invoiceInfo = invoiceDetail ? JSON.parse(invoiceDetail) : {};
      console.log('this.invoiceInfo', this.invoiceInfo)
    },
    methods: {
      showInvoiceHandler(path) {
        window.open(path)
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/mixin.scss";
  @import "@/styles/common.scss";
  .wrap{
    @include wh(100%,100%);
    background-color: #F4F5F7;
  }
  .navBar{
    height: 46px;
  }
  .contentWrap{
    .mt_cls {
      margin-top: 10px;
    }
    .content_tab {
      background-color: #fff;
      width: 100%;
      padding: 15px 15px;
      .tab_title {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      .tab_content {
        .item_wrap {
          display: flex;
          align-items: center;
          line-height: 30px;
          font-size: 12px;
          .item_label {
            color: rgba(0,0,0,0.5);
            margin-right: 5px;
            width: 60px;
          }
          .item_content {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
  .copyIcon {
    width: 35px;
    height: 15px;
    margin-left: 10px
  }
  .invoice_btn {
    padding: 0 15px;
    background-color: #354D93;
    border-radius: 4px;
    height: 28px;
    color: #fff;
  }
</style>
