<template>
  <template v-if="computedMenus.length">
    <div
      v-if="fixed"
      class="ant-pro-fixed-stuff"
      :style="{
        width: `${runtimeSideWidth}px`,
        overflow: 'hidden',
      }"
    />
    <h-layout-sider
      v-bind="$attrs"
      :class="{
        [prefixCls]: true,
        [`${prefixCls}-${runtimeTheme}`]: true,
        [`${prefixCls}-${layout}`]: true,
        [`${prefixCls}-fixed`]: fixed,
      }"
      :breakpoint="breakpoint"
      :width="runtimeSideWidth"
      :collapsed="collapsed"
      :collapsible="false"
      :collapsed-width="collapsedWidth"
      :theme="runtimeTheme"
      :style="{
        overflow: 'hidden',
        paddingTop: isMix ? `${headerHeight}px` : undefined,
      }"
    >
      <div class="sider-menu-left__put">
        <h-input-search
          v-model:value="siderSearchValue"
          :placeholder="siderSearchPlaceholder || $t('platform.common.placeholder')"
          enter-button
          @search="siderOnSearch"
          style="width: 150px"
        />
        <h-button @click="showLeft">X</h-button>
      </div>
      <applicationContainer style="margin-top: 48px"></applicationContainer>
    </h-layout-sider>
  </template>
</template>

<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent, computed, toRefs, ref } from 'vue';
import { useProProvider } from '../pro-provider/index';
import BaseMenu, { BaseMenuProps } from '../base-menu/index.vue';
import applicationContainer from './applications/index.vue';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
import { findMenuChildren } from '@/utils/menu-util';
import { useRoute } from 'vue-router';
import type { LayoutType } from '../typing';
import type { MenuTheme } from 'ant-design-vue';
import type { Breakpoint } from '@/typing';
import { useStore } from 'vuex';
import { SET_LAYOUT, SET_FIXED_HEADER } from '@/store/modules/app/mutations';
const SiderMenuProps = Object.assign({}, BaseMenuProps, {
  prefixCls: {
    type: String,
    default: () => undefined,
  },
  breakpoint: {
    type: String as PropType<Breakpoint>,
    default: 'lg',
  },
  siderWidth: {
    type: Number,
    default: 208,
  },
  splitMenus: {
    type: Boolean,
    default: false,
  },
  collapsedButton: {
    type: Boolean,
    default: () => true,
  },
  collapsedWidth: {
    type: Number,
    default: 48,
  },
  headerHeight: {
    type: Number,
    default: 48,
  },
  theme: {
    type: String as PropType<MenuTheme>,
    default: () => undefined,
  },
  layout: {
    type: String as PropType<LayoutType>,
    default: 'side',
  },
  fixed: {
    type: Boolean,
    default: () => false,
  },
  collapsible: {
    type: Boolean,
    default: false,
  },
  collapsed: {
    type: Boolean,
    default: false,
  },
  customItem: {
    type: Function,
    default: undefined,
  },
  // 搜索事件
  siderOnSearch: {
    type: Function,
    default: () => {
      console.log('搜索事件');
    },
  },
  // 搜索框的placeholder
  siderSearchPlaceholder: {
    type: String,
    default: '',
  },
});

export default defineComponent({
  name: 'SiderMenu',
  props: SiderMenuProps,
  inheritAttrs: false,
  emits: [
    'update:openKeys',
    'update:selectedKeys',
    'update:collapsed',
    'mouseenter',
    'mouseleave',
    'itemHover',
  ],
  setup(props, { emit }) {
    const {
      prefixCls: propPrefixCls,
      theme,
      layout,
      collapsed,
      collapsedWidth,
      siderWidth,
      splitMenus,
      siderSearchPlaceholder,
    } = toRefs(props);
    const route = useRoute();
    const store = useStore();
    // 左侧菜单搜索框输入值
    const siderSearchValue = ref('');
    const { getPrefixCls } = useProProvider();
    const prefixCls = propPrefixCls.value || getPrefixCls('sider');

    const isMix = computed(() => layout.value === 'mix');
    const runtimeTheme = computed<MenuTheme>(() =>
      layout.value === 'mix' ? 'light' : theme.value,
    );
    const runtimeSideWidth = computed(() =>
      collapsed.value ? collapsedWidth.value : siderWidth.value,
    );
    const computedMenus = computed(() =>
      splitMenus.value ? findMenuChildren(props.menus, route.matched[1].name) : props.menus,
    );

    const handleSelectedKeys = (selectedKeys: string[]): void => {
      emit('update:selectedKeys', selectedKeys);
    };
    const handleOpenKeys = (openKeys: string[]): void => {
      emit('update:openKeys', openKeys);
    };
    const handleCollapse = () => {
      emit('update:collapsed', !collapsed.value);
    };
    const showLeft = (): void => {
      store.commit(`app/${SET_FIXED_HEADER}`, true);
      store.commit(`app/${SET_LAYOUT}`, 'top');
    };

    return {
      prefixCls,
      isMix,
      runtimeTheme,
      runtimeSideWidth,
      computedMenus,

      handleSelectedKeys,
      handleOpenKeys,
      handleCollapse,
      showLeft,
      siderSearchValue,
      siderSearchPlaceholder,
    };
  },
  components: {
    BaseMenu,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    // [Menu.name]: Menu,
    // [Menu.Item.name]: Menu.Item,
    applicationContainer,
  },
});
</script>

<style lang="less">
body {
  @import url('./index.less');
}
</style>
