<template>
  <div :style="show_sidebar">
    <section class="app-main">
      <!-- 只显示符合cachedViews的router组件 -->
      <keep-alive :include="cachedViews">
        <router-view :key="key"></router-view>
      </keep-alive>
    </section>
  </div>
</template>

<script>

export default {
  name: 'AppMain',
  data() {
    return {
      show_sidebar: '',
    }
  },
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.fullPath
    }
  },
  watch:{
    $route(to,from){
      if(to.path === '/index' || to.path === '/workbench_blank'){
        this.show_sidebar = 'height: 100%;'
      }else{
        this.show_sidebar = "width: calc(100% - 200px);margin-left: 200px;padding: 20px;padding-right: 0;height: 100%;"
      }
    }
  },
  created(){
    if(this.$route.path === '/index' || this.$route.path === '/workbench_blank'){
      this.show_sidebar = 'height: 100%;'
    }else{
      this.show_sidebar = "width: calc(100% - 200px);margin-left: 200px;padding: 20px;padding-right: 0;height: 100%;"
    }
  }
}
</script>

<style scoped>
.app-main {
  height: 100%;
  position: relative;
  cursor: default;
  font-size: 14px;
  background-color: #F5F7FA;
  /* overflow: auto; */
}
/*滚动条的宽度*/

.app-main::-webkit-scrollbar {
  width:9px;
  height:9px;
}

/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/

.app-main::-webkit-scrollbar-track {
  width: 3px;
  background-color:#fff0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
}

/*滚动条的设置*/

.app-main::-webkit-scrollbar-thumb {
  background-color:#fff0;
  background-clip:padding-box;
  min-height:28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
}
/*滚动条移上去的背景*/

.app-main:hover::-webkit-scrollbar-thumb{
  background-color:rgba(144,147,153,.3);
}
</style>

