<template>
  <div class="layout">
    <Layout :style="{ height: '100%' }">
      <Header>
        <div class="layout-logo">@mapcatch/ui</div>
      </Header>
      <Layout :style="{ height: 'calc(100% - 65px)' }">
        <Sider hide-trigger>
          <Menu
            :active-name="currentPage"
            theme="dark"
            width="auto"
            :open-names="openNames"
          >
            <Submenu :name="submenu.name" v-for="submenu in menus" :key="submenu.name">
              <template #title>
                <Icon type="md-menu"></Icon>
                {{submenu.title}}
              </template>
              <MenuItem :name="item.name" :to="{name:item.router}" v-for="item in submenu.items" :key="item.name">
                <div>{{item.title}}</div>
                <div class="label">{{item.label}}</div>
              </MenuItem>
            </Submenu>
          </Menu>
        </Sider>
        <Layout :style="{ padding: '0 24px 24px', height: '100%',overflow: 'auto' }">
          <Content
            :style="{ padding: '24px'}"
          >
            <router-view />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import menus from './libs/menus.js'
import router from './router'

let currentPage = ref('')
let openNames = reactive(['guide', 'components'])

watch(router.currentRoute, (val) => {
  currentPage.value = val.name
  if (!openNames.length) {
    for(let i = 0;i < menus.length;i++) {
      for(let j = 0;j < menus[i].items.length;j++) {
        if (menus[i].items[j].name === val.name) {
          openNames.push(menus[i].name)
          break
        }
      }
    }
  }
})

</script>

<style lang="less" scoped>
.layout {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
}
.layout-logo {
  width: 100px;
  height: 30px;
  // background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  color: #ffffff;
  line-height: 40px;
  text-align: center;
  font-size: 32px;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.label{
  color: #bcbcbc;
}
</style>

<style>
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) .label{
  color: #2d8cf0;
}
</style>

