<template>
  <div class="hotkeys-wrapper">
    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane
        v-for="item of $d.ReadingTool"
        :key="item.id"
        :label="item.label"
        :name="item.id"
      >
        <HotKeysList
          v-if="activeTab == item.id"
          :reading-tool="item.value"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import HotKeysList from './components/HotKeysList'
export default {
  name: 'HotKeys',
  components: {
    HotKeysList
  },
  data() {
    return {
      activeTab: this.$d.ReadingTool[0].id
    }
  }
}
</script>
<style lang="scss">
.hotkeys-wrapper{
  height: 100%;
  background-color: #fff;
  .el-tabs{
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .el-tabs__header {
    height: 40px;
    margin-bottom:5px;
  }
  .el-tabs__content{
    flex: 1;
    .el-tab-pane{
      height: 100%;
      overflow-y: auto;
    }
  }
}
</style>

