<template>
  <div id="invoiecHead">
    <div class="content">
      <div class="taxIncluded">
        <div class="taxAmount">￥{{invoiceItem.totalTaxAmount}}</div>
        <div class="taxAmountSub">含税金额</div>
      </div>
      <div class="noTaxInfo">
        <div class="noTax">
          <div class="noTaxAmount">￥{{invoiceItem.totalTaxFreeAmount}}</div>
          <div class="noTaxAmountSub">无税金额</div>
        </div>
        <div class="taxNumber">
          <div class="tax">￥{{invoiceItem.totalTaxFee}}</div>
          <div class="taxSub">税额</div>
        </div>
      </div>
      <van-divider :style="{ color: '#FFFFFF', borderColor: '#FFFFFF', margin: '10PX 0 10PX 0'}"/>
      <div class="invoiecInfo">
        <div class="cellInfo">
          <div class="title">发票号：</div>
          <div class="info">{{invoiceItem.invoiceNo}}</div>
        </div>
        <!-- <div class="cellInfo">
          <div class="title">发票代码：</div>
          <div class="info">837418787438178</div>
        </div> -->
        <div class="cellInfo">
          <div class="title">发票日期：</div>
          <div class="info">{{invoiceItem.invoiceDate}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getFormateDate} from '@/utils/common'
export default {
  name: 'InvoiecHead',
  components: {               
  },
  data() {
    return {
      tabsTitle: [],
      moreSearchShow: false,
      activeTab: 'home',
      moreSearchInfo: {
        //接收搜索更多回传的数据
        supplier: { comPartyId: "" }, //供应商ID
        goods: { comGoodsId: "" }, //商品ID
        orderNo: "", //订单编号
        time: {
          //起始时间
          start: getFormateDate(new Date(), "yyyy-MM-dd"),
          end: getFormateDate(new Date(), "yyyy-MM-dd"),
        },
      },
      invoiceList: []
    }
  },
  props: {
    invoiceItem: {
      type: Object,
      default: () => {
        return {
        }
      }
    }
  },
  computed: {
    linkInfo () {
      return this.$store.state.linkInfo
    },
    routKey() {
      return this.$route.path
    },
    searchTime() {
      let time = this.time.start + '/' + this.time.end
      return time
    }
  },
  mounted() {
  },
  methods: {
    onBrowserBack() {
      this.$router.go(-1)
    },
    onSearch() {

    },
  }
}
</script>

<style lang="scss" scoped>
  #invoiecHead {
    .content{
      height: 250PX;
      width: 100%;
      background-color: $main1;
      padding: 10pX;
      color: white;
      .taxIncluded{
        text-align: center;
        margin-bottom: 10PX;
        .taxAmount{
          font-size: 26PX;
          font-weight: 550;
          line-height: 40px;
          height: 40PX
        }
        .taxAmountSub{
          font-size: 16PX;
          line-height: 30px;
          height: 30PX
        }
      }
      .noTaxInfo{
        display: flex;
        text-align: center;
        font-size: 16PX;
        line-height: 25PX;
        .noTax{
          width: 50%;
          border-right:1px solid #ffffff;
          .noTaxAmount{
            font-weight: 550;
          }
        }
        .taxNumber{
          width: 50%;
          .tax{
            font-weight: 550;
          }
        }
      }
      .invoiecInfo{
        font-size: 15PX;
        .cellInfo{
          display: flex;
          line-height: 24PX;
          .title{
            width: 25%;
            text-align: right;
          }
          .info{
            width: 60%;
            .price{
              font-size: 16PX;
              font-weight: 600;
              color: red;
            }
          }
          .btn {
            width: 10%;
          }
        }
      }
    }
  }
</style>
