<template>
  <a-card size="small" :bordered="false" class="purchaseReceiptReportList-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <!-- 标签页 -->
      <a-tabs type="card" :default-active-key="nowKey" @change="handleTabChange" class="purchaseReceiptReportList-tabs ">
        <a-tab-pane v-for="item in tabPaneData" :key="item.val">
          <span slot="tab">{{ item.name }}</span>
        </a-tab-pane>
      </a-tabs>
      <purchaseReceiptOrder v-show="nowKey=='1'" @spinning="spinningFun" />
      <purchaseReceiptDetail v-show="nowKey=='2'" @spinning="spinningFun" />
    </a-spin>
  </a-card>
</template>

<script>
import purchaseReceiptOrder from './purchaseReceiptOrder.vue'
import purchaseReceiptDetail from './purchaseReceiptDetail.vue'
export default {
  components: { purchaseReceiptOrder, purchaseReceiptDetail },
  data () {
    return {
      spinning: false,
      tabPaneData: [
        { name: '采购入库单报表', val: '1' },
        { name: '采购入库明细报表', val: '2' }
      ],
      nowKey: '1'
    }
  },
  methods: {
    spinningFun (val) {
      this.spinning = val
    },
    // tab切换
    handleTabChange (key) {
      this.nowKey = key
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.nowKey = '1'
    }
  },
  activated () {
    // 如果是新页签打开，则重置当前页面
    if (this.$store.state.app.isNewTab) {
      this.nowKey = '1'
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {})
  }
}
</script>
<style lang="less">
	.purchaseReceiptReportList-wrap{
		.purchaseReceiptReportList-tabs.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container{
      height: 30px!important;
		}
    .purchaseReceiptReportList-tabs.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active{
      height: 30px!important;
    }
    .purchaseReceiptReportList-tabs.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
      line-height: 26px!important;
      height: 30px!important;
    }
	}
</style>
