<template>
  <div class="layout">
    <Layout>
      <Sider :collapsed-width="64" :width="256" class="layout-sider" collapsible hide-trigger v-model="collapsed">
        <side-menu :collapsed="collapsed"></side-menu>
      </Sider>

      <Layout id="layout">
        <Header :style="left" class="layout-head theme-two">
          <header-bar :collapsed.sync="collapsed">
            <top-menu></top-menu>
          </header-bar>
        </Header>

        <Content>
          <Layout v-if="apps_info.show_navs && tagnavs.length">
            <div :style="left" class="tag-nav-wrapper">
              <tag-nav></tag-nav>
            </div>
          </Layout>

          <Content :style="top" class="layout-content-wrap">
            <div class="layout-content">
              <keep-alive :include="cache_page">
                <router-view :key="key"></router-view>
              </keep-alive>
            </div>
          </Content>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 控制左侧菜单收缩
      collapsed: false
    };
  },
  components: {
    sideMenu: resolve => require(['views/layout/menu/side_menu'], resolve),
    topMenu: resolve => require(['views/layout/menu/top_menu'], resolve),
    headerBar: resolve =>
      require(['views/layout/header_bar/header_bar'], resolve),
    tagNav: resolve => require(['views/layout/tags_nav/index'], resolve)
  },
  computed: {
    key() {
      return this.$route.fullPath;
    },
    left() {
      return {
        paddingLeft: this.collapsed ? '64px' : '256px'
      };
    },
    top() {
      // 是否显示滚动菜单，中心内容样式控制
      if (this.apps_info.show_navs && this.tagnavs.length) {
        return {
          paddingTop: '104px'
        };
      } else {
        return {
          paddingTop: '64px'
        };
      }
    }
  }
};
</script>

<style scoped>
>>> .ivu-layout-has-sider {
  width: 100%;
  height: 100%;
}
</style>
