<template>
  <div class="tabsReportList-wrap">
    <div style="background-color: #fff;margin-bottom: 5px;">
      <!-- 选项卡 1订单差价表 2订单经销商差价表 3产品差价表 -->
      <a-tabs default-active-key="1" v-model="curTab" @change="changeTab">
        <a-tab-pane key="1" tab="订单差价表"></a-tab-pane>
        <a-tab-pane key="2" tab="订单经销商差价表"></a-tab-pane>
        <a-tab-pane key="3" tab="产品差价表" force-render></a-tab-pane>
      </a-tabs>
    </div>
    <div>
      <report v-show="curTab==1"></report>
      <dealerReport ref="detailList" v-show="curTab==2"></dealerReport>
      <detailReport ref="dealerList" v-show="curTab==3"></detailReport>
    </div>
  </div>
</template>

<script>
// 引入组件
import report from './list.vue'
import detailReport from './detailList.vue'
import dealerReport from './dealerList.vue'
export default {
  name: 'ProductRebateReportIndex',
  components: { report, detailReport, dealerReport },
  data () {
    return {
      curTab: '1'// 切换tab值
    }
  },
  methods: {
    // 选项卡切换 事件
    changeTab (v) {
      if (v == 2) {
        this.$refs.dealerList.setTableH()
      } else if (v == 3) {
        this.$refs.detailList.setTableH()
      }
    }
  }
}
</script>

<style lang="less">
  .tabsReportList-wrap{
    display: flex;
    flex-direction: column;
    height: 100%;
    .ant-tabs-bar{
      margin: 0;
    }
    .ant-card{
      flex-grow: 1;
      overflow: auto;
    }
  }
</style>
