<template>
  <div :class="classNames">
    <div ref="headRef" :class="headerClassName">
      <div :class="`${prefixedClassName}-main-left`" @click="handleMenuHeaderClick">
        <div :class="`${prefixedClassName}-logo`" key="logo" id="logo">
          <slot v-if="hasLogoSlot" name="logo" />
          <div v-else>
            <router-link :to="{ name: 'index' }">
              <!-- <img src="@/assets/logo.png" alt="logo" /> -->
              <h1>3DPLAZA</h1>
            </router-link>
          </div>
        </div>
      </div>
      <div :style="{ flex: 1 }" :class="`${prefixedClassName}-menu`">
        <!-- <h-button @click="showLeft">象限1</h-button>
        <h-button @click="showLeft">象限2</h-button>
        <h-button @click="showLeft">象限3</h-button>
        <h-button @click="showLeft">象限4</h-button>
        <h-button @click="addTab">+++</h-button> -->
        <!-- <base-menu
          v-if="menus && menus.length > 0"
          mode="horizontal"
          :theme="theme"
          :menus="menus"
          :open-keys="openKeys"
          :selected-keys="selectedKeys"
          @update:openKeys="handleOpenKeys"
          @update:selectedKeys="handleSelectedKeys"
        /> -->
      </div>
      <util-content>
        <slot name="utilContent" />
      </util-content>
      <right-content>
        <slot name="rightContent" />
      </right-content>
    </div>
  </div>
</template>

<script lang="ts">
import type { PropType, InjectionKey } from 'vue';
import { defineComponent, computed, toRefs, inject, provide } from 'vue';
import { useProProvider } from '../pro-provider/index';
import BaseMenu from '@/components/base-layouts/base-menu/index.vue';
import RightContent from '../top-nav-header/right-content.vue';
import UtilContent from '../top-nav-header/util-content.vue';
import type { RouteProps } from '../typing';
import type { MenuTheme } from 'ant-design-vue';
import { useStore } from 'vuex';
import { SET_LAYOUT, SET_FIXED_HEADER } from '@/store/modules/app/mutations';
import type { RouteLocationNormalized, RouteRecordNormalized } from 'vue-router';
export type CacheKey = string;

export interface CacheItem {
  path: CacheKey;
  route: Omit<RouteLocationNormalized, 'matched'>;
  key?: string;
  lock?: boolean;
  tabTitle?: string;
  tabPath?: string;
}
export interface MultiTabStore {
  cacheList: CacheItem[];
  current: CacheKey;
  include: string[];
  exclude: string[];
}
export default defineComponent({
  props: {
    prefixCls: {
      type: String,
      default: undefined,
    },
    layout: {
      type: String,
      default: 'side',
    },
    theme: {
      type: String as PropType<MenuTheme>,
      default: 'dark',
    },
    contentWidth: {
      type: String,
      default: 'Fluid',
    },

    // menu
    menus: {
      type: Array as PropType<RouteProps[]>,
      default: () => [],
    },
    openKeys: {
      type: Array as PropType<string[]>,
      required: true,
    },
    selectedKeys: {
      type: Array as PropType<string[]>,
      required: true,
    },
  },
  emits: ['update:openKeys', 'update:selectedKeys'],
  setup(props, { slots, emit }) {
    const store = useStore();
    const { theme, contentWidth, prefixCls: customizePrefixCls } = toRefs(props);
    const { getPrefixCls } = useProProvider();
    const prefixedClassName = customizePrefixCls.value || getPrefixCls('top-nav-header');

    const hasMix = computed(() => props.layout === 'mix');
    const classNames = computed(() => {
      return {
        [prefixedClassName]: true,
        ['light']: theme.value === 'light',
      };
    });
    const headerClassName = computed(() => {
      return {
        [`${prefixedClassName}-main`]: true,
        ['wide']: contentWidth.value === 'Fixed',
      };
    });
    const { logo: hasLogoSlot } = slots;

    /** events */
    const handleSelectedKeys = (selectedKeys: string[]): void => {
      emit('update:selectedKeys', selectedKeys);
    };
    const handleOpenKeys = (openKeys: string[]): void => {
      emit('update:openKeys', openKeys);
    };
    const handleMenuHeaderClick = (): void => {};
    const MULTI_TAB_STORE_KEY: InjectionKey<MultiTabStore> = Symbol('multi-tab-store');
    const state = inject(MULTI_TAB_STORE_KEY)!;
    const addTab = (): void => {
      state.cacheList.push({});
      provide(MULTI_TAB_STORE_KEY, state);
    };

    const showLeft = (): void => {
      store.commit(`app/${SET_FIXED_HEADER}`, false);
      store.commit(`app/${SET_LAYOUT}`, 'mix');
    };

    return {
      classNames,
      headerClassName,
      prefixedClassName,
      hasMix,
      hasLogoSlot,

      handleSelectedKeys,
      handleOpenKeys,
      handleMenuHeaderClick,
      addTab,
      showLeft,
    };
  },
  components: {
    BaseMenu,
    RightContent,
    UtilContent,
  },
});
</script>

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