<template>
  <div class="course-viewer-aside">
    <el-tabs v-model="activeName">
      <el-tab-pane label="章节" name="0">
        <div class="tab-pane">
          <aside-chapter :data="chapters"></aside-chapter>
        </div>
      </el-tab-pane>
      <el-tab-pane label="讲义" name="1">
        <div class="tab-pane">
          <aside-lecture :data="ppts"></aside-lecture>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import AsideChapter from './asideChapter.vue'
import AsideLecture from './asideLecture.vue'

export default {
  props: {
    // 章节
    chapters: {
      type: Array,
      default() {
        return []
      }
    },
    // 讲义
    ppts: {
      type: Array,
      default() {
        return []
      }
    }
  },
  components: { AsideChapter, AsideLecture },
  data() {
    return {
      activeName: '0'
    }
  }
}
</script>

<style lang="scss" scoped>
.course-viewer-aside {
  width: 350px;
  min-height: 100vh;
  background-color: #232323;
}
.tab-pane {
  height: calc(100vh - 56px);
  overflow-y: auto;
}
::v-deep .el-tabs__header {
  margin: 0;
}
::v-deep .el-tabs__nav {
  float: none;
  display: flex;
}
::v-deep .el-tabs__item {
  flex: 1;
  height: 56px;
  font-size: 16px;
  line-height: 56px;
  color: #909090;
  text-align: center;
  &.is-active {
    color: #b49441;
  }
}
::v-deep .el-tabs__active-bar,
::v-deep .el-tabs__nav-wrap::after {
  display: none;
}
</style>
