<template>
  <a-layout style="height: 100%">
    <a-layout-header v-if="showHeader" style="padding: 0px 10px">
      <a-row id="frame-header" v-if="showHeader">
        <a-col :span="24">
          <div>
            <div id="frame-a-header-title">
              {{ moduleName }}
              <span id="frame-header-title-d"> {{ designBy }}</span>
            </div>
            <div id="frame-header-menu">
              <slot name="frame-header-menu"></slot>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-layout-header>
    <a-layout-content v-if="showMode == 'vertical' || showMode == 'inline'">
      <a-row
id="frame-body" :style="{
        top: showHeader == true ? '48px' : '0px',
        height: '100%',
      }">
        <!-- 菜单不收起来的时候，采用响应式布局 -->
        <!-- 垂直菜单布局 -->
        <main-show
:hideMenu="state.hideMenu" :xs="state.xs" :sm="state.sm" :md="state.md" :lg="state.lg" :xl="state.xl"
          :xxl="state.xxl" :xxxl="state.xxxl" :showQueryMenu="showQueryMenu" :theme="theme"
          :searchName="state.searchName" :collapseWidth="state.collapseWidth" :showMode="showMode"
          :ifShowTab="ifShowTab" :selectKey="state.selectKey" :modules="showModules" @menu-btn-click="handleChangeMenu"
          @show-menu="handleShowMenu" @menuitem-click="handleMenuClick" @menu-search="handleSearch" />
      </a-row>
    </a-layout-content>

    <a-layout-content v-else>
      <a-layout style="height: 100%">
        <a-layout-header style="padding: 0px">
          <left-menu
ref="leftMenu" @show-menu="handleShowMenu" @menuitem-click="handleMenuClick"
            @menu-search="handleSearch" :menu-tree="showModules" :showMode="showMode" :theme="theme"
            :showQueryMenu="showQueryMenu" />
        </a-layout-header>
        <a-layout-content>
          <tab-menu ref="tabMenu" :ifShowTab="ifShowTab" :selectKey="state.selectKey" :menu-tree="showModules" />
        </a-layout-content>
      </a-layout>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, PropType, computed, onMounted } from 'vue';
import leftMenu from './left-menu.vue';
import tabMenu from './tab-menu.vue';
import menuBtn from './menu-btn.vue';
import mainShow from "./vertical-menu.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({
  name: 'ltAFrame',
  components: {
    leftMenu,
    tabMenu,
    menuBtn,
    mainShow
  },
  props: {
    //是否显示头部信息(design by)
    showHeader: {
      type: Boolean,
      default: false,
    },
    showQueryMenu: {
      type: Boolean,
      default: false, //是否显示菜单过滤项
    },
    showMode: {
      type: String as PropType<string>,
      default: 'inline', //vertical | horizontal | inline   垂直|水平|内嵌
    },
    theme: {
      type: String as PropType<string>,
      default: 'dark',
    },
    modules: {
      //默认显示模块必须传进来
      type: Array as PropType<menuItem[]>,
      default: () => [],
      isRequired: true,
    },
    logOutUrl: {
      type: String,
      default: '/UserSystemService/Logout',
    },
    moduleName: {
      type: String,
      default: '基本UI测试',
    },
    designBy: {
      type: String,
      default: 'Design by Longtec',
    },
    ifShowTab: {
      type: Boolean,
      default: true,
    },
    leftXS: {
      type: Number,
      default: 5,
    },
    leftSM: {
      type: Number,
      default: 4,
    },
    leftMD: {
      type: Number,
      default: 4,
    },
    leftLG: {
      type: Number,
      default: 4,
    },
    leftXL: {
      type: Number,
      default: 4,
    },
    leftXXL: {
      type: Number,
      default: 2,
    },
    leftXXXL: {
      type: Number,
      default: 2,
    },
  },

  setup(props) {
    const state = reactive({
      // collapsed: ref<boolean>(false),
      xs: props.leftXS,
      sm: props.leftSM,
      md: props.leftMD,
      lg: props.leftLG,
      xl: props.leftXL,
      xxl: props.leftXXL,
      xxxl: props.leftXXXL,
      hideMenu: ref<boolean>(false),
      selectKey: '',
      searchName: ref<string>(''),
      collapseWidth: '100%'
    });

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

    const handleSearch = function (name: string) {
      state.searchName = name;
    };

    const getMenuByInput = function (list: any) {

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

          if (title.indexOf(state.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 handleShowMenu = function (status: boolean) {
      //展开菜单
      if (status) {
        state.xs = 1;
        state.xs = 1;
        state.sm = 1;
        state.md = 1;
        state.lg = 1;
        state.xl = 1;
        state.xxl = 1;
        state.xxxl = 1;
        state.hideMenu = true;
      } else {
        state.hideMenu = false;
        state.xs = props.leftXS;
        state.sm = props.leftSM;
        state.md = props.leftMD;
        state.lg = props.leftLG;
        state.xl = props.leftXL;
        state.xxl = props.leftXXL;
        state.xxxl = props.leftXXXL;
        state.hideMenu = false;
      }
    };

    const handleMenuClick = function (key: string) {
      state.selectKey = key;
    };

    const handleChangeMenu = function () {
      state.hideMenu = !state.hideMenu;
    };

    const setMainConponetWidth = function () {
      let tempCell = $("#frame-body")
      let targetWidth = ""
      if (tempCell[0]) {
        targetWidth = tempCell[0].clientWidth - 40 + 'px'
      }
      state.collapseWidth = targetWidth
    }
    onMounted(() => {
      setMainConponetWidth()
    })

    window.onresize = function () {
      //浏览器界面大小改变的时候，重新计算主窗体大小
      setMainConponetWidth()
    }



    return {
      state,
      leftMenu,
      tabMenu,
      menuBtn,
      handleShowMenu,
      handleMenuClick,
      handleChangeMenu,
      handleSearch,
      showModules,
    };
  },
});
</script>

<style scoped>
.hide-menu {
  width: 40px;
}

#frame-a-header-title {
  color: white;
  font-weight: bold;
  font-size: 30px;
}

#frame-header-title-d {
  margin-left: 15px;
}

#frame-header-title {
  color: white;
  font-size: 25px;
  padding: 8px;
  padding-left: 30px;
  font-weight: bold;
  height: 44px;
}

#frame-header-menu {
  position: absolute;
  top: 0px;
  right: 10px;
}

#frame-body {
  display: flex;
  width: 100%;
}
</style>

|<style>
html,
body {
  margin: 0px;
  font-size: 12px;
  height: 100%;
}
</style>
