<template>
  <Layout :class="prefixCls">
    <!-- <LayoutHeader fixed /> -->
    <Layout :class="[layoutClass]">
      <LayoutSider>
        <Menu
          :inline-collapsed="collapsed"
          theme="dark"
          mode="inline"
          v-model:selectedKeys="selectedKeys"
          :style="{ lineHeight: '64px', marginTop: '20px' }"
          @select="onMenuClick"
        >
          <SubMenu v-for="item in menu" :key="item.path">
            <template #title>{{ item.title }}</template>

            <MenuItem v-for="child in item.children" :key="`/${item.path}/${child.path}`">
              <span>{{ child.title }}</span>
            </MenuItem>
          </SubMenu>
        </Menu>
      </LayoutSider>
      <Layout :class="`${prefixCls}-main`">
        <LayoutContent />
        <!-- <LayoutFooter style="text-align: center">
          bz-antd-ui ©2022 Created by Format-qi
        </LayoutFooter> -->
      </Layout>
    </Layout>
  </Layout>
</template>
<script lang="ts">
  import { defineComponent, computed, ref } from 'vue';
  import { Layout, LayoutFooter, LayoutSider, Menu, SubMenu, MenuItem } from 'ant-design-vue';
  // import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';

  import LayoutHeader from './header/index.vue';
  import LayoutContent from './content/index.vue';

  import { UserOutlined, VideoCameraOutlined, UploadOutlined } from '@ant-design/icons-vue';

  import { useDesign } from '/@/hooks/web/useDesign';
  import { useRouter } from 'vue-router';
  import { menu } from './menu.data';

  export default defineComponent({
    name: 'DefaultLayout',
    components: {
      Layout,
      LayoutFooter,
      LayoutSider,
      Menu,
      MenuItem,
      SubMenu,
      LayoutHeader,
      LayoutContent,
      UserOutlined,
      VideoCameraOutlined,
      UploadOutlined,
    },
    setup() {
      const { prefixCls } = useDesign('default-layout');
      const router = useRouter();

      const layoutClass = computed(() => {
        let cls: string[] = ['ant-layout'];
        cls.push('ant-layout-has-sider');
        return cls;
      });

      const onMenuClick = (item: any) => {
        console.log(item.key);
        router.push({
          path: item.key,
        });
      };

      return {
        collapsed: false,
        selectedKeys: ref<string[]>([]),
        prefixCls,
        layoutClass,
        onMenuClick,
        menu,
      };
    },
  });
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-default-layout';

  .@{prefix-cls} {
    display: flex;
    width: 100%;
    min-height: 100%;
    background-color: @content-bg;
    flex-direction: column;

    > .ant-layout {
      min-height: 100%;
    }

    &-main {
      width: 100%;
      margin-left: 1px;
    }
  }
</style>
