<template>
  <a-row style="height: 100%; width: 100%;">
    <a-col :style="hideMenu ? { width: '40px' } : { overflow: 'auto' }" id="frame-body-left" v-bind="menuProps"
      class="dnymenu">
      <a-layout style="height: 100%">
        <a-layout-header style="height: 30px; padding: 0px">
          <menu-btn :showMode="showMode" @menu-btn-click="handleChangeMenu" />
        </a-layout-header>
        <a-layout-content>
          <left-menu :style="hideMenu ? { width: '40px' } : ''" @show-menu="handleShowMenu"
            @menuitem-click="handleMenuClick" @menu-search="handleSearch" :menu-tree="showModules" :showMode="showMode"
            :theme="theme" :showQueryMenu="showQueryMenu" :collapsed="hideMenu" />
        </a-layout-content>
      </a-layout>
    </a-col>
    <a-col v-bind="mainProps" :style="hideMenu ? { width: collapseWidth } : {}">
      <tab-menu ref="reftabMenu" :ifShowTab="ifShowTab" :selectKey="selectKey" :menu-tree="showModules" />
    </a-col>
  </a-row>
</template>

<script lang="ts">
import leftMenu from './left-menu.vue';
import tabMenu from './tab-menu.vue';
import menuBtn from './menu-btn.vue';
import { defineComponent, ref, computed, PropType } from "vue"

interface menuItem {
  title: string;
  key: string | number;
  icon: string;
  component?: any;
  children?: children[];
}

interface children {
  title: string;
  key: string | number;
  icon: string;
  component?: any; //子菜单的组件一定要
  children?: children[];
}
export default defineComponent({
  components: {
    leftMenu,
    tabMenu,
    menuBtn
  },
  props: {
    showMode: {
      type: String as PropType<string>,
      default: 'inline', //vertical | horizontal | inline   垂直|水平|内嵌
    },
    hideMenu: {
      type: Boolean,
    },
    xs: {
      type: Number,
      default: 5
    },
    sm: {
      type: Number,
      default: 4
    },
    md: {
      type: Number,
      default: 4
    },
    lg: {
      type: Number,
      default: 4
    },
    xl: {
      type: Number,
      default: 4
    },
    xxl: {
      type: Number,
      default: 2
    },
    xxxl: {
      type: Number,
      default: 2
    },
    ifShowTab: {
      type: Boolean,
      default: true,
    },
    selectKey: {
      type: String
    },
    showQueryMenu: {
      type: Boolean,
      default: false, //是否显示菜单过滤项
    },
    theme: {
      type: String as PropType<string>,
      default: 'dark',
    },
    modules: {
      //默认显示模块必须传进来
      type: Array as PropType<menuItem[]>,
      default: () => [],
      isRequired: true,
    },
    searchName: {
      type: String
    },
    collapseWidth: {
      type: String
    }
  },
  emits: ['menu-btn-click', 'show-menu', 'menu-search'],
  setup(props, { emit }) {
    const reftabMenu = ref<InstanceType<typeof tabMenu>>()
    const getMenuByInput = function (list: any) {

      if (!list) list = menuInfoWithIndex(); //第一次进来时list不赋值，取所有
      if (props.searchName) {
        var display = [] as any[];
        for (var i = 0; i < list.length; i++) {
          var title = list[i].title || list[i].name || '';

          if (title.indexOf(props.searchName) != -1) {
            display[display.length] = list[i];
          } else if (list[i].children) {
            var children = getMenuByInput(list[i].children);
            if (children.length > 0) {
              var temp: menuItem = {
                title: '',
                key: '',
                icon: '',
                component: {},
                children: [],
              };
              // temp=Object.assign(temp, list[i]); //深度拷贝，但是无法实现对象里面复杂对象的拷贝
              temp = JSON.parse(JSON.stringify(list[i]));
              temp.children = children;
              display[display.length] = temp; //{ name: list[i].name||list[i].title,title: list[i].name||list[i].title, key: list[i].key, children: children };
            }
          }
        }
        return display;
      } else {
        return list;
      }
    }

    const menuInfoWithIndex = function () {
      var list: Array<menuItem> = [];
      list = list.concat(props.modules);
      for (var i = 0; i < list.length; i++) {
        addIndex(list[i], i + '');
      }
      return list;
    }
    const addIndex = function (item: menuItem, index: string | number) {
      item.key = index;
      if (item.children) {
        for (var i = 0; i < item.children.length; i++) {
          addIndex(item.children[i], index + '-' + i);
        }
      }
    }
    const handleChangeMenu = function () {
      emit("menu-btn-click", 1)
    }
    const handleShowMenu = function (status: boolean) {
      emit("show-menu", status)
    }
    const handleMenuClick = function (key: string) {
      reftabMenu.value?.addTab(key) //父组件调用子组件方法
    }
    const handleSearch = function (name: string) {
      emit("menu-search", name)
    }

    const showModules = computed(() => {
      return getMenuByInput(props.modules)
    })

    return {
      reftabMenu, //父组件调用子组件方法的时候，一定要在setup里面将子组件的实例暴露出去
      showModules,
      handleChangeMenu,
      handleSearch,
      handleMenuClick,
      handleShowMenu
    }

  },
  computed: {
    menuProps: function () {
      if (this.hideMenu) {
        return {}
      } else {
        return {
          xs: this.xs,
          sm: this.sm,
          md: this.md,
          lg: this.lg,
          xl: this.xl,
          xxl: this.xxl,
          xxxl: this.xxxl
        }
      }
    },
    mainProps: function () {
      if (this.hideMenu) {
        return {}
      } else {
        return {
          xs: 24 - this.xs,
          sm: 24 - this.sm,
          md: 24 - this.md,
          lg: 24 - this.lg,
          xl: 24 - this.xl,
          xxl: 24 - this.xxl,
          xxxl: 24 - this.xxxl
        }
      }
    }
  },
  watch: {

  },

  onMounted() {

  },

})
</script>

<style scoped>
.dnymenu:deep(.ant-layout-sider.ant-layout-sider-dark.ant-layout-sider-collapsed) {
  min-width: 40px !important;
  flex: 0 0 0px !important;
}
</style>