<template>
  <div class="te-frame-plus">
    <div class="te-main">
      <te-menu :showLogo="true" :mini="mini" ref="menu" :menus="menus" :system="system" @menuChanged="menuChanged"></te-menu>
      <div class="te-content" >
        <te-navbar v-if="showBanner" :showLogo="false" :system="system" :dropdowns="dropdowns" @navChanged="navChanged"
          @themeChanging="themeChanging" @setting="setting"></te-navbar>
        <div class="te-middle">
          <te-sub-menu v-if="mix" :system="system" :menu="currentChildrenMenus" @menuItemChanged="menuItemChanged"></te-sub-menu>
          <te-page :page="page"></te-page>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TeFrame",
  props: {
    system: {
      type: Object,
      default: () => {
        return {};
      },
    },
    menus: {
      type: Array,
      default: () => {
        return [];
      },
    },
    dropdowns: {
      type: Array,
    },
    mini: {
      type: Boolean,
      default: false,
    },
    mix:{
      type: Boolean,
      default: false,
    },
    showBanner:{
      type: Boolean,
      default: false,
    },
    childrenMenus: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      page: {},
      currentChildrenMenus: this.childrenMenus,
    };
  },
  mounted() {
    let url = this.$route.path

    let mlst = this.getMenuList(this.menus)

    let m = this.selectMenuItemByMenus(mlst, url)
    this.menuChanged(m);
  },
  methods: {
    themeChanging() {
      this.$emit("themeChanging");
    },
    getMenuList(menus) {
      let m = []
      let mlst = menus || []
      mlst.forEach((v) => {
        m.push(v)
        let lst = this.getMenuList(v.children)
        lst.forEach((x) => {
          x.__parent = v
        })
        m.push(...lst)
      })
      return m
    },
    selectMenuItemByMenus(menus, url) {
      let f = {}
      for (let i = 0; i < menus.length; i++) {
        let v = menus[i]
        if (v.url == url || v.path == url) {
          v.selected = true
          f = v
          break
        }
      }
      let selectMenu = f.__parent && f.__parent.__parent ? f.__parent.__parent : (f.__parent || f)
      selectMenu.selected = true
      return selectMenu

    },
    setting() {
      this.$emit("setting");
    },
    navChanged(item) {
      this.$emit("navChanged", item);
    },
    menuChanged(item) {
      this.currentChildrenMenus = item;
      this.$emit("menuChanged", item);
      if (item.path) {
        this.menuItemChanged(item)
      }
    },
    menuItemChanged(item) {
      this.page = item;
      this.$emit("menuItemChanged", 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: 100%;
  width: 100%;
}

/* 内容区域 */
.te-content {
  display: block;
  width: 100%;
  height: 100%;
}

.te-middle {
  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: 100%;
  width: 100%;
}
</style>
