<template>
  <div class="ticket" :class="{ manage: activeIndex != 1 }">
    <div class="ticket-top">
      <!-- <cr-notice-bar
        left-icon="bullhorn-o"
        right-icon="arrow"
        text="发票补开、换开、抬头管理维护收到规则限制"
        @click="helpClickEvent"
      /> -->
      <cr-tabs
        v-model="activeIndex"
        title-bg-color="#ffffff"
        title-inactive-color="#999999"
        @change="tabChange"
      >
        <cr-tab
          v-for="(tabItem, tabIndex) in tabList"
          :key="tabIndex"
          :name="tabIndex"
          :title="tabItem.title"
        />
      </cr-tabs>
    </div>
    <div class="ticket-container">
      <components :is="templateName" :dropdown-index.sync="dropdownIndex" />
    </div>
  </div>
</template>
<script>
import OrderProductList from './orderProductList.vue';
import OrderRecordList from './orderRecordList.vue';
import OrderRiseList from './orderRiseList.vue';
import { TAB_LIST } from '../config';
import localStorageService from '@/service/localStorage.service';
import jumpAppMixin from '../mixins/jumpApp.mixin';
export default {
  components: {
    OrderProductList,
    OrderRecordList,
    OrderRiseList
  },
  mixins: [jumpAppMixin],
  data() {
    // const query = this.$route.query;
    // const state = query.state ||
    const state = localStorageService.get('invoiceTab') || 0;
    const activeIndex = +state;
    return {
      activeIndex,
      dropdownIndex: 1,
      tabList: TAB_LIST
    };
  },
  computed: {
    templateName() {
      return TAB_LIST[this.activeIndex].name;
    }
  },
  methods: {
    tabChange(state) {
      localStorageService.set('invoiceTab', state);
    },
    helpClickEvent() {
      this.jumpAppUrl('/electronicReceipt/invoiceHelp');
    }
  }
};
</script>

<style lang="less" src="./index.less" scoped></style>
