import Vue from 'vue'
import { Menu, MenuItem } from 'kpc/components/menu'
import VueRouter, { Route, RouteConfig , RouteMeta } from 'vue-router';
import { Breadcrumb, BreadcrumbItem } from 'kpc/components/breadcrumb'
import { Button, ButtonGroup } from 'kpc/components/button'
import Message from 'kpc/components/message'
import _ from 'lodash'
export default Vue.extend({
  name: 'index',
  data (): IData {
    return {
      toggle: false,
      activeNav: '',
      breadTitle: [],
      menus: [],
      showMenu: true,
      showBread: true,
      regions: ['机房1','机房2'],
      region:''
    }
  },

  computed: {
  
  },
  watch :{
    
  },
  methods: {
    setActiveMenu(to: Route) {
      let {
        belong = null,
        title = '',
        showMenuTitle = false,
        showMenu = true,
        showBread = true,
        breadcrumbs = [],
      } : RouteMeta = _.get(to, 'meta', {});
      let breadTitle  = [{ title, name: to?.name }] as  breadTitle[];
      if (belong) {
        let belongMenu= _.find(this.menus, item => item.name === belong )  as RouteConfig;
        breadTitle.unshift( { title : belongMenu?.meta?.title , name:belongMenu?.name as string | ''} )
      }

      if (_.isArray(breadcrumbs) && breadcrumbs.length > 0) {
        breadTitle = []
        _.map(breadcrumbs, (bread) => {
          breadTitle.push({ title: bread?.title, name: bread?.name });
        });
      }

      this.breadTitle = breadTitle;
      this.activeNav = (showMenuTitle ? belong : to.name) as string;
      this.showMenu = showMenu;
      this.showBread = showBread;
    },

    registerMenu() {
      const router: VueRouter = this.$router; 
      let _router = (_.get(router, ['options', 'routes'], []) as RouteConfig[]).find((item) => item.name);
      let children = _.get(_router, 'children', []) as RouteConfig[];
      _.remove(children,  (item) => item?.meta?.showMenuTitle);
      let second = _.remove(children, (item) => item?.meta?.belong );
      // children  一级菜单  second 二级+ 菜单
      _.map(second, (item) => {
        let _index: number = _.findIndex(children, (itm) => {
          return itm.name === item?.meta?.belong && !item?.meta?.showMenuTitle;
        });
        if (_index > -1) {
          children[_index]['children'] = children[_index]['children'] || [];
          (children[_index]['children'] as RouteConfig[]).push(item);
        }
      });
      this.menus = children;
    },

    goLink(to : RouteConfig  ){
      this.$router.push({name : to.name })
    },
  
  },
  components: {
    KsMenu: Menu,
    MenuItem,
    Breadcrumb,
    BreadcrumbItem,
    Button,
    ButtonGroup
  },
  created () {
    this.registerMenu();
    this.setActiveMenu(this.$route)
  },
  beforeRouteUpdate (to, from, next) {
    this.breadTitle = [ to.meta?.title ] ;
    this.setActiveMenu(to)
    next()
  },
  //render error only works in dev mode
  renderError (h, err) {
    return h('pre', { style: { color: 'red' } }, err.stack)
  },
  errorCaptured (e) {
    
  }
})

interface IData {
  toggle: boolean
  activeNav: string
  breadTitle: breadTitle[];
  menus: (( RouteConfig & routeChildren ) | breadTitle )[]
  regions: string[] | object[]
  region: string | object 
  showMenu: boolean;
  showBread: boolean;
}

interface routeChildren{
  children ? : RouteConfig[]
}
interface breadTitle {
  title: string;
  name: string;
}

interface routerMeta{
  title: string
  belong?: string 
  showMenuTitle?: boolean 
  showMenu?: boolean
  showBread? : boolean 
  breadcrumbs: breadTitle[]
}