<template>
  <div class="tireSubsidySetting-mainBox">
    <a-tabs default-active-key="SERVICE_FEE" id="tireSubsidySetting-index" @change="handleChange" class="tireSubsidySetting-tabs">
      <a-tab-pane key="SERVICE_FEE" tab="服务费">
      </a-tab-pane>
      <a-tab-pane key="SHIPPING_FEE" tab="运费补贴" force-render>
      </a-tab-pane>
      <a-tab-pane key="SUBSIDY_QUARTER_FEE" tab="增量补贴（季度）" force-render>
      </a-tab-pane>
      <a-tab-pane key="SUBSIDY_YEAR_FEE" tab="增量补贴（年度）" force-render>
      </a-tab-pane>
    </a-tabs>
    <div v-if="tabVal=='SERVICE_FEE' || tabVal=='SHIPPING_FEE'">
      <costCollectionList ref="costCollection" :pageType="tabVal"></costCollectionList>
    </div>
    <div v-else>
      <addSubsidyList ref="addSubsidy" :pageType="tabVal"></addSubsidyList>
    </div>
  </div>
</template>
<script>
import { commonMixin } from '@/utils/mixin'
// 组件
import costCollectionList from './costCollectionList.vue'
import addSubsidyList from './addSubsidyList.vue'

export default {
  name: 'TireFeeReportIndex',
  mixins: [commonMixin],
  components: { costCollectionList, addSubsidyList },
  data () {
    return {
      tabVal: 'SERVICE_FEE' // tab值  1轮胎月度费用报表 2轮胎季度费用报表 3轮胎年度费用报表 4轮胎费用明细报表
    }
  },
  methods: {
    // 切换tab值  change
    handleChange (val) {
      this.tabVal = val
      this.$nextTick(() => {
        if (val == 'SERVICE_FEE' || val == 'SHIPPING_FEE') {
          this.$refs.costCollection.pageInit()
        } else {
          this.$refs.addSubsidy.pageInit()
        }
      })
    },
    // 初始化
    pageInit () {
      if (this.tabVal == 'SERVICE_FEE') {
        this.$refs.costCollection.pageInit()
      }
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.pageInit()
    }
  },
  activated () {
    // 如果是新页签打开，则重置当前页面
    if (this.$store.state.app.isNewTab) {
      this.pageInit()
    }
  }
}
</script>
<style lang="less" scoped>
  .tireSubsidySetting-mainBox{
    .tireSubsidySetting-tabs{
      background:#ffffff;
    }
  }
</style>
