<template>
  <aside class="course-viewer-aside">
    <el-tabs v-model="activeName">
      <el-tab-pane label="章节" name="0">
        <div class="tab-pane">
          <aside-chapter :data="data" :chapters="chapters" :active="active"></aside-chapter>
        </div>
      </el-tab-pane>
      <el-tab-pane label="讲义" name="1" v-if="active && active.type === 2">
        <div class="tab-pane">
          <aside-lecture :ppts="ppts" :pptIndex="pptIndex" v-on="$listeners"></aside-lecture>
        </div>
      </el-tab-pane>
    </el-tabs>
  </aside>
</template>

<script>
import AsideChapter from './chapter.vue'
import AsideLecture from './lecture.vue'

export default {
  props: {
    // 课程详情接口返回的数据
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    // 章节
    chapters: { type: Array, default: () => [] },
    // 讲义
    ppts: { type: Array, default: () => [] },
    // 当前选中的章节
    active: {
      type: Object,
      default() {
        return {}
      }
    },
    // 当前选择的PPT
    pptIndex: { type: Number, default: 0 }
  },
  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>
