<template>
  <!-- 发票 -->
  <div class="ai-invoice-feature" :class="`ai-invoice-feature-${featureSpaceClass}-ul`">
    <!-- 清单竖线 -->
    <ul class="ai-invoice-feature--line">
      <li v-for="(item,index) in lineCount" :key="index"></li>
    </ul>
    <!-- 发票要素标题 -->
    <ul v-if="featureType=== 1" class="ai-invoice-feature--header">
      <li>{{type!=='08'?"货物或应税劳务、服务名称":'项目名称'}}</li>
      <li>规格型号</li>
      <li>单位</li>
      <li>数量</li>
      <li>单价</li>
      <li>金额</li>
      <li>税率</li>
      <li :class="{'ai-invoice-feature__add-width':isScroll}">税额</li>
    </ul>
    <!-- 通行费-发票要素标题 -->
    <ul v-if="featureType=== 2" class="ai-invoice-feature--header">
      <li>项目名称</li>
      <li>车牌号</li>
      <li>类型</li>
      <li>通行日期起</li>
      <li>通行日期止</li>
      <li>金额</li>
      <li>税率</li>
      <li :class="{'ai-invoice-feature__add-width':isScroll}">税额</li>
    </ul>
    <!-- 全电发票-发票要素标题 -->
    <ul v-if="featureType=== 3" class="ai-invoice-feature--header">
      <li>项目名称</li>
      <li>规格型号</li>
      <li>单位</li>
      <li>数量</li>
      <li>单价</li>
      <li>金额</li>
      <li>税率/征收率</li>
      <li :class="{'ai-invoice-feature__add-width':isScroll}">税额</li>
    </ul>
    <!-- 清单 -->
    <ul v-if="isList" :class="'is-type-' + type" class="ai-invoice-feature--btn">
      <li @click="showList">
        *详见销货明细清单
        <span :class="'is-type-' + type" class="ai-invoice-feature--btn">{{ "查看明细清单" }}</span>
      </li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li>{{ data.listrow.je }}</li>
      <li>{{ data.listrow.sl }}</li>
      <li>{{ data.listrow.se }}</li>
    </ul>

    <!-- 要素 -->
    <template v-if="!isList">
      <div ref="feature" :class="{'ai-invoice-feature--list-scroll':isScroll}">
        <ul v-for="(item, index) in data.detailInfos" :key="index" :class="['is-type-' + type,
          {'ai-invoice-feature--list-txf':type==='14'
          }]" class="ai-invoice-feature--list">
          <li>{{ item.xmmc }}</li>
          <li>{{ item.ggxh }}</li>
          <li>{{ item.dw }}</li>
          <li>{{ item.sl_count }}</li>
          <li>{{ item.dj }}</li>
          <li>{{ item.je }}</li>
          <li>{{ item.sl | percentage }}</li>
          <li>{{ item.se }}</li>
        </ul>
      </div>
      <!-- 不足8行补全 -->
      <ul v-if="data.detailInfos && data.detailInfos.length < 8 && blankHeight && !isScroll" :style="blankHeight">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li :class="{'ai-invoice-feature__add-width':isScroll}"></li>
      </ul>
    </template>

    <!-- 发票要素列表合计 -->
    <ul class="ai-invoice-feature--list-end">
      <li>合计</li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li :class="'is-type-' + type">￥{{ data.je }}</li>
      <li></li>
      <li :class="[{'ai-invoice-feature__add-width':isScroll},fplxClass]">￥{{ data.se }}</li>
    </ul>

    <!-- 价税合计 -->
    <div class="ai-invoice-feature--footer">
      <div class="footer-title" :class="`footer-title-${featureSpaceClass}`">价税合计(大写)</div>
      <div>
        <span :class="'is-type-' + type">ⓧ</span>
        <span :class="'is-type-' + type">{{ data.jshj | convertCurrency }}</span>
      </div>
      <div>
        (小写)
        <span :class="'is-type-' + type">￥{{ data.jshj }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { convertCurrency, percentage } from './util';
export default {
  name: 'AiInvoiceFeature',
  data() {
    return {
      originFeatureHeight: 0,
      blankHeight: {
        height: '0px',
      },
      isScroll: false,
    };
  },
  filters: {
    convertCurrency,
    percentage,
  },
  components: {},
  props: {
    // 发票数据
    data: {
      type: Object,
      default: null,
    },
  },
  mounted() {
    this.setFeatureHeight();
  },
  watch: {
    data: {
      handler() {
        this.setFeatureHeight();
      },
      deep: true,
    },
  },
  computed: {
    // 发票类型
    type() {
      if (this.data && this.data.fplx) return this.data.fplx;
    },
    // 是否显示清单
    isList() {
      if (
        this.data &&
        this.data.detailtype - 0 === 1 &&
        Object.keys(this.data.listrow).length > 0
      ) {
        return !!this.data.detailtype;
      }
    },
    fplxClass() {
      return 'is-type-' + this.type;
    },
    // 发票要素类型
    featureType() {
      if (this.type === '14') return 2;
      if (this.type === '81' || this.type === '82') return 3;
      return 1;
    },
    // 清单竖线个数
    lineCount() {
      return this.featureType === 3 ? 1 : 8;
    },
    // 要素宽度类型
    featureSpaceClass() {
      if (this.type === '14') return 'txf';
      if (this.type === '81' || this.type === '82') return 'qd';
      return 'default';
    },
  },
  methods: {
    // 展示清单
    showList(e) {
      this.$emit('showList', e);
    },
    setFeatureHeight() {
      if (
        this.isList ||
        !this.$refs.feature ||
        !this.$refs.feature.scrollHeight
      ) {
        return;
      }
      this.blankHeight = null;
      this.isScroll = false;
      this.$nextTick(() => {
        this.originFeatureHeight = this.$refs.feature.scrollHeight;
        if (!this.originFeatureHeight || this.originFeatureHeight === 160) {
          return;
        }
        if (this.originFeatureHeight > 160) {
          this.isScroll = true;
          this.blankHeight = null;
          return;
        }
        if (this.originFeatureHeight < 160) {
          this.blankHeight = { height: 160 - this.originFeatureHeight + 'px' };
          this.isScroll = false;
          return;
        }
      });
    },
  },
};
</script>
