<template>
  <div id="app">
    <el-container class="is-vertical fullheight">
      <Navigator />
      <el-container style="overflow-x: hidden;">
        <Menu @menuChange="handleMenuChange" />
        <el-main style="padding: 10px;margin: -9px -10px -7px -20px;">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <span>{{currentMenuLabel}}</span>
            </div>
            <div class="box-body">
              <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>
              </keep-alive>
              <router-view v-if="!$route.meta.keepAlive"></router-view>
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Navigator from "@/views/Navigator.vue";
import Menu from "@/views/Menu.vue";

export default {
  name: "app",
  components: { Navigator, Menu },
  data() {
    return {
      currentMenuLabel: ""
    };
  },
  methods: {
    handleMenuChange: function(menuLabel) {
      this.currentMenuLabel = menuLabel;
    }
  },
  mounted() {
    // 因为resize事件在整个项目中只能监听一次，所以这里通过全局广播发送这个事件
    window.onresize = () => {
      this.$root.$emit("resize");
    };
  }
};
</script>
<style lang="scss" scoped>
.el-main > .el-card {
  border-radius: 0;
}

.box-body {
  height: 100%;
}
</style>