<template>
  <div class="ai-invoice-header">
    <!-- 增值税专用发票 01-->
    <div v-if="type === '01'" class="is-type-01">
      <header>
        <div class="ai-invoice-header--title">{{ data.title }}</div>
        <div class="ai-invoice-header--title-line"></div>
        <div class="ai-invoice-header--sub-title">
          抵
          <span>扣</span>联
        </div>
      </header>
      <div class="ai-invoice-header--msg-center" :class="'is-type-' + data.fplx">
        <div>{{ data.fpdm }}</div>
        <div>
          <div>No</div>
          <span>{{ data.fphm }}</span>
        </div>
      </div>
      <article :class="'is-type-' + data.fplx">
        <section class="ai-invoice-header--msg-left">
          <div :class="'is-type-' + data.fplx">机器编号：</div>
          <div>{{ data.jqbh }}</div>
        </section>
        <section class="ai-invoice-header--msg-right">
          <div>
            <span>{{ data.fpdm }}</span>
            <span>{{ data.fphm }}</span>
          </div>
          <div :class="'is-type-' + data.fplx">开票日期：</div>
          <div>{{ data.kprq }}</div>
        </section>
      </article>
    </div>
    <!-- 电子普票 10 || 电子普票-通行费 14 ||  电子专票 08 ||-->
    <div v-if="type === '10'||type === '14'||type === '08'" class="is-type-10">
      <header>
        <div class="ai-invoice-header--title">{{ data.title }}</div>
        <div class="ai-invoice-header--title-line"></div>
      </header>
      <article>
        <div class="jqbh">
          <div v-if="type === '14'" class="txf">通行费</div>
          <span>机器编号</span>
          <span>：</span>
          <span>{{ data.jqbh }}</span>
        </div>
        <section>
          <div>
            <span>发票代码</span>
            <span>：</span>
            <span>{{ data.fpdm }}</span>
          </div>
          <div>
            <span>发票号码</span>
            <span>：</span>
            <span>{{ data.fphm }}</span>
          </div>
          <div>
            <span>开票日期</span>
            <span>：</span>
            <span>{{ data.kprq }}</span>
          </div>
          <div>
            <span>校验码</span>
            <span>：</span>
            <span>{{ data.jym }}</span>
          </div>
        </section>
      </article>
    </div>
    <!-- 增值税普通发票  04-->
    <div v-if="type === '04'" class="is-type-04">
      <header>
        <div class="ai-invoice-header--title">{{ data.title }}</div>
        <div class="ai-invoice-header--title-line"></div>
      </header>
      <div class="ai-invoice-header--msg-center" :class="'is-type-' + data.fplx">
        <div>{{ data.fpdm }}</div>
        <div>
          <div>No</div>
          <span>{{ data.fphm }}</span>
        </div>
      </div>
      <article :class="'is-type-' + data.fplx">
        <section class="ai-invoice-header--msg-left">
          <div :class="'is-type-' + data.fplx">校验码：{{ data.jym }}</div>
        </section>
        <section class="ai-invoice-header--msg-right">
          <div>
            <span>{{ data.fpdm }}</span>
            <span>{{ data.fphm }}</span>
          </div>
          <div :class="'is-type-' + data.fplx">开票日期：</div>
          <div>{{ data.kprq }}</div>
        </section>
      </article>
    </div>
    <!-- 电子发票（普通发票） 82 -->
    <div v-if="type === '81' || type === '82'" class="is-type-81">
      <header>
        <div class="ai-invoice-header--title">{{ data.title }}</div>
        <div class="ai-invoice-header--title-line"></div>
      </header>
      <article class="is-type-81">
        <div class="jqbh">
        </div>
        <section>
          <div>
            <span>发票号码</span>
            <span>：</span>
            <span>{{ data.fphm }}</span>
          </div>
          <div>
            <span>开票日期</span>
            <span>：</span>
            <span>{{ data.kprq }}</span>
          </div>
        </section>
      </article>
    </div>
    <!-- 增值税卷票普通发票 11 -->
    <div v-if="type === '11 '">增值税卷票普通发票</div>
  </div>
</template>

<script>
export default {
  name: 'AiInvoiceHeader',
  props: {
    // 发票头数据
    data: {
      type: Object,
    },
  },
  components: {},
  data() {
    return {};
  },
  computed: {
    // 发票类型
    type() {
      if (this.data && this.data.fplx) return this.data.fplx;
    },
  },
  mounted() {},
  watch: {},
  methods: {},
};
</script>
<style lang="scss" scoped></style>
