<template>
  <div class="mod-config">
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane label="按金额统计" name="amount" />
      <el-tab-pane label="按课程统计" name="course" />
      <el-tab-pane label="按分类统计" name="label" />
    </el-tabs>
    <keep-alive>
      <component :is="currentComponent" />
    </keep-alive>
  </div>
</template>

<script>
import amountStatistics from './amountStatistics'
import courseStatistics from './courseStatistics'
import labelStatistics from './labelStatistics'

export default {
  components: { amountStatistics, courseStatistics, labelStatistics },
  data() {
    return {
      activeTab: 'amount'
    }
  },
  computed: {
    currentComponent() {
      return `${this.activeTab}Statistics`
    }
  }
}
</script>

<style scoped lang="less">
@import '../styles/statistics-common.less';

.sb-form-item-ten();
</style>
