<template>
  <a-layout
:collapsible="true" :style="{
    height: '100%',
    width: collapsed == true ? '40px' : '100%',
  }">
    <a-layout-sider :width="collapsed ? '40px' : '100%'" :collapsed="collapsed">
      <a-layout>
        <a-layout-header v-if="showQueryMenu" style="padding: 0px 4px; height: 34px; line-height: 34px">
          <a-input v-model:value="state.menuName" size="small">
            <template #suffix>
              <search-outlined />
            </template>
          </a-input>
        </a-layout-header>
        <a-layout-content
:theme="theme" :style="{
          padding: '0px',
          width: collapsed == true ? '40px' : '100%',
        }">
          <a-menu
:theme="theme" v-model:selectedKeys="state.selectedKeys" :mode="showMode" :style="{
            padding: '0px',
          }" @click="menuSelect">
            <template v-for="item in menuTree" :key="item.key">
              <template v-if="!item.children">
                <a-menu-item :key="item.key">
                  <template #icon>
                    <icon :icon="item.icon ? item.icon : ''" :twoToneColor="item.color ? item.color : ''" />
                  </template>
                  {{ item.title }}
                </a-menu-item>
              </template>
              <template v-else>
                <sub-menu :menu-info="item" :key="item.key" />
              </template>
            </template>
          </a-menu>
        </a-layout-content>
      </a-layout>
    </a-layout-sider>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, PropType, watch } from 'vue';
import subMenu from './sub-menu.vue';
import type { MenuProps } from 'ant-design-vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { Icon } from './icon';
interface menuItem {
  title: string;
  key: string | number;
  icon: string;
  component?: any;
  children?: children[];
  color?: '';
}

interface children {
  title: string;
  key: string | number;
  icon: string;
  component?: any; //子菜单的组件一定要
  children?: children[];
}
export default defineComponent({
  name: 'LtALeftMenu',
  components: {
    subMenu,
    Icon,
    SearchOutlined,
  },
  props: {
    menuTree: {
      type: Array as PropType<menuItem[]>,
      default: () => [],
      isRequired: true,
    },
    showMode: {
      type: String as PropType<string>,
      default: 'vertical',
    },
    theme: {
      type: String as PropType<string>,
      default: 'dark',
    },
    collapsed: {
      type: Boolean,
      default: false,
    },
    showQueryMenu: {
      type: Boolean,
      default: false, //是否显示菜单过滤项
    },
  },
  emits: ['menuitem-click', 'menu-search'],
  setup(props, { emit }) {
    const state = reactive({
      selectedKeys: ref<string[]>(['1']),
      menuName: ref<string[]>(['']),
    });

    const menuSelect: MenuProps['onClick'] = (menuInfo) => {
      emit('menuitem-click', menuInfo.key);
    };

    watch(
      () => state.menuName,
      (newVal) => {
        //输入菜单名称过滤
        emit('menu-search', newVal);
      }

    );


    return { state, menuSelect, SearchOutlined };
  },
});
</script>
