<template>
  <div class="ai-invoice" :class="'is-type-' + data.fplx">
    <template v-if="featureType === 'default'">
      <!-- 发票 -->
      <ai-invoice-header :data="listData"></ai-invoice-header>
      <!-- 详情 -->
      <ai-invoice-msg :data="listData">
        <ai-invoice-feature :data="listData" @showList="showListHandler"></ai-invoice-feature>
      </ai-invoice-msg>
      <ai-invoice-footer v-if="drawerVisible" :data="listData"></ai-invoice-footer>
    </template>
    <template v-if="featureType === 'reel'">
      <ai-invoice-reel :data="listData" :remarkVisible="remarkVisible"></ai-invoice-reel>
    </template>
    <template v-if="featureType === 'motor'">
      <ai-invoice-motor :data="listData" :remarkVisible="remarkVisible"></ai-invoice-motor>
    </template>
    <template v-if="featureType === 'used'">
      <ai-invoice-used :data="listData" :remarkVisible="remarkVisible"></ai-invoice-used>
    </template>
    <template v-if="featureType === 'air'">
      <ai-invoice-air :qrcode="qrcode" :data="listData"></ai-invoice-air>
    </template>
    <template v-if="featureType === 'railway'">
      <ai-invoice-railway :qrcode="qrcode" :data="listData">
        <template slot="cover">
          <slot name="cover">
          </slot>
        </template>
      </ai-invoice-railway>
    </template>
  </div>
</template>

<script>
import AiInvoiceHeader from './invoice-header.vue';
import AiInvoiceMsg from './invoice-msg.vue';
import AiInvoiceFeature from './invoice-feature.vue';
import AiInvoiceFooter from './invoice-footer.vue';
import AiInvoiceReel from './invoice-reel.vue';
import AiInvoiceMotor from './invoice-motor.vue';
import AiInvoiceUsed from './invoice-used.vue';
import AiInvoiceAir from './invoice-air.vue';
import AiInvoiceRailway from './invoice-railway.vue';

export default {
  name: 'AiInvoice',
  data() {
    return {};
  },
  components: {
    AiInvoiceMsg,
    AiInvoiceHeader,
    AiInvoiceFeature,
    AiInvoiceFooter,
    AiInvoiceReel,
    AiInvoiceMotor,
    AiInvoiceUsed,
    AiInvoiceAir,
    AiInvoiceRailway
  },
  props: {
    // 发票数据
    data: {
      type: Object,
      default: null,
      required: true
    },
    // 发票展示最大条目数
    invoiceSize: {
      type: Number,
      default: 8
    },
    // 开票方显隐
    drawerVisible: {
      type: Boolean,
      default: true
    },
    // 卷票是否显示备注
    remarkVisible: {
      type: Boolean,
      default: true
    },
    // 二维码地址
    qrcode: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 发票类型
    type() {
      if (this.data && this.data.fplx) return this.data.fplx;
    },
    // 展示清单选项
    showList() {
      return this.data && this.data.detailInfos.length > this.invoiceSize;
    },
    // 发票清单数据
    listData() {
      return this.data;
    },
    // 发票类型样式
    featureType() {
      const featureType = {
        11: 'reel', // 卷票
        '03': 'motor', // 机动车
        15: 'used', // 二手车
        62: 'railway', // 电子发票（铁路电子客票）
        61: 'air' // 电子发票（航空运输电子客票行程单）
      };
      return featureType[this.type] || 'default';
    }
  },
  methods: {
    // 展示清单按钮触发
    showListHandler(e) {
      this.$emit('listShow', e);
    }
  }
};
</script>
