<template>
  <el-tabs v-model="evealuationType" class="evealuation">
    <el-tab-pane label="科目场次成绩" :name="1">
      <TrainEvaluation v-if="evealuationType === 1"></TrainEvaluation>
    </el-tab-pane>
    <el-tab-pane label="个人训练成绩" :name="2">
      <UserEvaluation v-if="evealuationType === 2"></UserEvaluation>
    </el-tab-pane>
    <el-tab-pane label="科目训练成绩" :name="3"
      >
      <SubjectEvaluation v-if="evealuationType === 3"></SubjectEvaluation>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import TrainEvaluation from './train-evaluation/index.vue'
import UserEvaluation from './user-evaluation/index.vue'
import SubjectEvaluation from './subject-evaluation/index.vue'
export default {
  components: { TrainEvaluation, UserEvaluation, SubjectEvaluation },
  data () {
    return {
      evealuationType: 1
    }
  }
}
</script>

<style lang="scss" scoped>
.evealuation {
  height: 100%;
  display: flex;
  flex-direction: column;

  ::v-deep .el-tabs__content {
    flex: 1;
    .el-tab-pane {
      height: 100%;
    }
    .train-evealuation {
      height: 100%;
      overflow: auto;
    }
  }
}
</style>
