<template>
  <div class="side-menu-wrapper">
    <slot></slot>
    <Menu
      ref="menu"
      :active-name="activeName"
      :open-names="openedNames"
      :accordion="accordion"
      :theme="theme"
      width="auto"
      @on-select="handleSelect"
    >
      <template v-for="item in menuList">
          <side-menu-item v-if="showChildren(item)" @handle-select="handleSelect" :visible="visible" :key="`menu-${item.name}`" :parent-item="item" :active-name="activeName"></side-menu-item>
          <menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`">
            <common-icon :type="item.icon || ''"/>
            <span>{{ showTitle(item) }}</span>
          </menu-item>
      </template>
    </Menu>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from "vue-property-decorator";
import SideMenuItem from "./side-menu-item.vue";
import CollapsedMenu from "./collapsed-menu.vue";
import { getUnion } from "../../libs/tools";
import mixin from './mixin'

@Component({
  components: {
    SideMenuItem,
    CollapsedMenu
  },
  mixins: [mixin],
})
export default class SideMenu extends Vue {
  openedNames: Array<string> = [];
  visible : boolean = false;
  //activeName : any = "";
  @Prop({
    type: Array,
    default() {
      return [];
    }
  })
  menuList! : Array<string>;


  @Prop({ type: String, default: "light" }) private theme!: string;

  @Prop({ type: Number, default: 20 }) private rootIconSize!: number;

  @Prop({ type: Number, default: 16 }) private iconSize!: number;

  @Prop(Boolean) private accordion!: boolean;

  // @Prop({ type: String, default: "" }) activeName!: string;

  @Prop({
    type: Array,
    default() {
      return [];
    }
  })
  openNames!: Array<string>;

  get activeName(){
    this.visible=false;
    let activeName=this.$route.name;
    let list=this.$route.matched
      .map(item => item.name);
    if(list.length>2){
      activeName=list[1];
      this.visible=true;
    }
    return activeName;
  }

  // updateActiveName(){
  //   this.$nextTick(()=>{
  //     this.visible=false;
  //     let activeName=this.$route.name;
  //     let list=this.$route.matched
  //       .map(item => item.name);
  //     if(list.length>2){
  //       activeName=list[1];
  //       this.visible=true;
  //     }
  //     this.activeName=activeName;
  //   })
    
  // }

  @Emit("on-select") select(name: string) {}
  handleSelect(name: string): void {
    let thirdMenuFlag=false;
    this.menuList.forEach(menu=>{
      let m=(menu as any);
      if(m.children&&m.children.length>0){
        for(let i=0;i<m.children.length;i++){
          if(m.children[i].name==name&&m.children[i].children&&m.children[i].children.length>0){
            thirdMenuFlag=true;
            break;
          }
        }
      }
    })
    if(!thirdMenuFlag){
      this.visible=false;
      this.select(name);
    }
  }

  getOpenedNamesByActiveName(name: any):Array<any> {
    /**
     * 由于三级菜单需要改造，这里因为第三级菜单不是用menu实现的导致刷新点击选不中第二级菜单
     */
    let list=this.$route.matched
      .map(item => item.name)
      .filter(item => item !== name);
      list.length=1;
    return list
  }

  updateOpenName(name: string) {
    if (name === "home") {
      this.openedNames = [];
    } else {
      this.openedNames = this.getOpenedNamesByActiveName(name);
    }
  }

  get textColor() {
    return this.theme === "dark" ? "#fff" : "#495060";
  }

  @Watch("activeName")
  activeNameChanged(name: string): void {
    if (this.accordion) {
      this.openedNames = this.getOpenedNamesByActiveName(name);
    } else {
      this.openedNames = getUnion(
        this.openedNames,
        this.getOpenedNamesByActiveName(name)
      );
    }
  }

  @Watch("openNames")
  openNamesChanged(newNames: Array<string>): void {
    this.openedNames = newNames;
  }

  @Watch("openedNames")
  openedNamesChanged() {
    this.$nextTick(() => {
      (this.$refs.menu as any).updateOpened();
    });
  }

   mounted () {
    this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(this.activeName))
  }
}
</script>


