<template>
  <div class="te-frame-plus">
    <div class="te-main">
      <te-menu
        :showLogo="true"
        :menus="menus"
        :system="system"
        @menuChanged="menuChanged"
      ></te-menu>
      <div class="te-content">
        <te-navbar
          :showLogo="false"
          :system="system"
          :dropdowns="dropdowns"
          @navChanged="navChanged"
          @themeChanging="themeChanging"
          @setting="setting"
        ></te-navbar>
        <te-page :page="page"></te-page>
        <te-footer :system="system"></te-footer>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TeFramePlus",
  props: {
    system: {
      type: Object,
      default: () => {
        return {};
      },
    },
    menus: {
      type: Array,
    },
    dropdowns:{
      type: Array,
    }
  },
  data() {
    return {
      page: {},
    };
  },
  mounted() {},
  methods: {
    themeChanging() {
      this.$emit("themeChanging");
    },
    setting() {
      this.$emit("setting");
    },
    navChanged(item) {
      this.$emit("navChanged", item);
    },
    menuChanged(item) {
      this.page = item;
      this.$emit("menuChanged", item);
    },
  },
};
</script>

<style>
body {
  overflow: hidden;
}
.te-frame-plus {
  width: 100%;
  height: 100%;
  background-color: var(--bg-color);
}

/* 主体内容区域 */
.te-main {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: left;
  -ms-flex-align: left;
  align-items: left;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  height: 100vh;
  width: 100%;
}

/* 内容区域 */
.te-content {
  display: block;
  width: 100%;
  height: calc(100% - var(--footer-height) - 40px);
}
</style>
