<template>
  <div class="tabsReportList-wrap">
    <div style="background-color: #fff;margin-bottom: 5px;">
      <a-tabs default-active-key="1" v-model="curTab">
        <a-tab-pane key="1" tab="连锁销售报表" v-if="$hasPermissions('M_chainSalesReportList')"></a-tab-pane>
        <a-tab-pane key="2" tab="连锁销售明细报表" v-if="$hasPermissions('M_chainSalesDetailReportList')" force-render></a-tab-pane>
      </a-tabs>
    </div>
    <a-card size="small" :bordered="false">
      <salesReport v-show="curTab==1&&$hasPermissions('M_chainSalesReportList')"></salesReport>
      <salesDetailReport v-show="curTab==2&&$hasPermissions('M_chainSalesDetailReportList')"></salesDetailReport>
    </a-card>
  </div>
</template>

<script>
import salesReport from './list.vue'
import salesDetailReport from '@/views/chainReportData/chainSalesDetailReport/list.vue'
export default {
  name: 'ChainSalesReportIndex',
  components: {
    salesReport,
    salesDetailReport
  },
  data () {
    return {
      curTab: '1'
    }
  }
}
</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>
