<template>
  <!-- 发票 -->
  <div class="ai-invoice-msg" :class="'is-type-' + data.fplx">
    <template v-if="isBaseMsg">
      <article>
        <div class="ai-invoice-msg--left1">
          <span>购</span>
          <span>买</span>
          <span>方</span>
        </div>
        <div class="ai-invoice-msg--right1">
          <div>
            <span>名称</span>
            <span>：</span>
            <p>{{ data.gmfmc }}</p>
          </div>
          <div>
            <span>纳税人识别号</span>
            <span>：</span>
            <p>{{ data.gmfsh }}</p>
          </div>
          <div>
            <span>地址、电话</span>
            <span>：</span>
            <p class="small-font">{{ data.gmfdzdh }}</p>
          </div>
          <div>
            <span>开户行及账号</span>
            <span>：</span>
            <p class="small-font">{{ data.gmfkhhjzh }}</p>
          </div>
        </div>
        <div class="ai-invoice-msg--left2">
          <span>密</span>
          <span>码</span>
          <span>区</span>
        </div>
        <div class="ai-invoice-msg--right2">
          <p class="ai-invoice-msg__right2">
            <span v-for="(item,index) in formatMmq" :key="index">{{item}}</span>
          </p>
        </div>
      </article>
      <slot></slot>
      <article>
        <div class="ai-invoice-msg--left1">
          <span>销</span>
          <span>售</span>
          <span>方</span>
        </div>
        <div class="ai-invoice-msg--right1">
          <div>
            <span>名称</span>
            <span>：</span>
            <p>{{ data.xsfmc }}</p>
          </div>
          <div>
            <span>纳税人识别号</span>
            <span>：</span>
            <p>{{ data.xsfsh }}</p>
          </div>
          <div>
            <span>地址、电话</span>
            <span>：</span>
            <p class="small-font">{{ data.xsfdzdh }}</p>
          </div>
          <div>
            <span>开户行及账号</span>
            <span>：</span>
            <p class="small-font">{{ data.xsfkhhjzh }}</p>
          </div>
        </div>
        <div class="ai-invoice-msg--left2">
          <span>备</span>
          <span>注</span>
        </div>
        <div class="ai-invoice-msg--right2">
          <p class="remark">{{ data.bz }}</p>
        </div>
      </article>
    </template>
    <template v-if="!isBaseMsg">
      <article>
        <div class="ai-invoice-msg--left1 is-type-81">
          <span>购</span>
          <span>买</span>
          <span>方</span>
          <span>信</span>
          <span>息</span>
        </div>
        <div class="ai-invoice-msg--right1 is-type-81">
          <div>
            <span>名称</span>
            <span>：</span>
            <p>{{ data.gmfmc }}</p>
          </div>
          <div>
            <span>统一信用社会代码/纳税人识别号</span>
            <span>：</span>
            <p>{{ data.gmfsh }}</p>
          </div>
        </div>
        <div class="ai-invoice-msg--left2 is-type-81">
          <span>销</span>
          <span>售</span>
          <span>方</span>
          <span>信</span>
          <span>息</span>
        </div>
        <div class="ai-invoice-msg--right1 is-type-81">
          <div>
            <span>名称</span>
            <span>：</span>
            <p>{{ data.xsfmc }}</p>
          </div>
          <div>
            <span>统一信用社会代码/纳税人识别号</span>
            <span>：</span>
            <p>{{ data.xsfsh }}</p>
          </div>
        </div>
      </article>
      <slot></slot>
      <article>
        <div class="ai-invoice-msg--left1">
          <span>备</span>
          <span>注</span>
        </div>
        <div class="ai-invoice-msg--right1 ai-invoice-msg--right1_max is-type-81">
          <span></span>
          <p>{{data.bz}}</p>

        </div>
      </article>
    </template>
  </div>
</template>

<script>
export default {
  name: 'AiInvoiceMsg',
  data() {
    return {};
  },
  components: {},
  props: {
    // 发票数据
    data: {
      type: Object,
      default: null,
    },
  },
  computed: {
    // 发票类型
    type() {
      if (this.data && this.data.fplx) return this.data.fplx;
    },
    isBaseMsg() {
      return this.type !== '81' && this.type !== '82';
    },
    formatMmq() {
      if (!this.data.mmq) return [];
      let data = this.data.mmq.replace(/\s*/g, '');
      const length = Math.floor(data.length / 4);
      let result = [];
      for (var i = 0; i < data.length; i += length) {
        result.push(data.slice(i, i + length));
      }
      return result;
    },
  },
  methods: {},
};
</script>
