<template>
  <Layout class="sub-layout">
    <Sider ref="sider" hide-trigger :width="200" :collapsed-width="80" collapsible>
      <div class="side-menu-wrapper" v-if="menu_type">
        <Menu v-if="menus" class="side-menu" ref="menu" :active-name="getActive()" width="auto">
          <template v-for="(item,index) in menus">
            <template>
              <MenuItem :name="item.menu_url.split('/')[1]" :to="item.menu_url" v-if="item.is_show_menu == 'YES'">
              <Icon :custom="item.menu_icon" class="v-2 mr-15 iconfont" size="22"></Icon>
              <span class="f-16">{{item.menu_name}}</span>
              </MenuItem>
            </template>
          </template>
        </Menu>
      </div>
      <div class="side-menu-wrapper" v-else>
          <Menu theme="light" v-if="menus" class="side-menu" ref="menu" :open-names="[active]" :active-name="getActive()" width="auto">
            <template v-for="(item,index) in menus" >
                <Submenu :key="item.menu_url" :name="submenu_name(item.menu_url)"   v-if="getChildren(item.children).length && item.menu_type == 'MENU'">
                  <template slot="title">
                      <Icon type="ios-analytics"></Icon>
                      {{item.menu_name}} 
                  </template>
                  <MenuItem :name="item.menu_url" :to="item.menu_url" v-for="item in getChildren(item.children)" :key="item.menu_url">
                    <Icon :custom="item.menu_icon" class="v-2 mr-15 iconfont" size="22"></Icon>
                    <span class="f-16">{{item.menu_name}}</span>
                  </MenuItem>
                </Submenu>
                <MenuItem :name="item.menu_url" :to="item.menu_url" v-else>
                  <Icon :custom="item.menu_icon" class="v-2 mr-15 iconfont" size="22"></Icon>
                  <span class="f-16">{{item.menu_name}}</span>
                </MenuItem>
            </template>                                
          </Menu>
      </div>
    </Sider>
    <slot></slot>
  </Layout>
</template>

<script>
export default {
  props: {
    code: {
      type: String,
    },
    // 菜单层级
    menu_type: {
      type: Boolean,
      default: true 
    }
  },
  data() {
    return {
      menus: [],
    };
  },
  computed: {
    submenu_name() {
      return (value) => {
       return value.split("/")[1]
      }
    },
    active() {
      return this.$route.path.split("/")[1]
    },
    getChildren(){
      return (value) => {
        return value.filter(item => item.is_show_menu == 'YES' && item.menu_type == 'MENU')
      }
    }
  },
  created() {
    utils.refreshMenuInfo(["PC_OPEN"], (menus) => {
      menus.forEach((item) => {
        if (item.menu_code == this.code) {
          this.menus = item.children;
          console.log(item.children);
          return;
        }
      });
    });
  },
  methods: {
    getActive() {
      if(this.menu_type) return this.$route.path.split("/")[1]
      return this.$route.path
    },
  },
};
</script>

<style scoped lang="less">
@import "~@/assets/less/variable";

.ivu-layout-sider {
  background: #f0f1f2;
}
</style>
