<template>
  <div class="home">
    <a-layout class="home-page">
      <a-layout-header class="header">
        <div class="header-right">
          <bell-outlined />
        </div>
        <div class="header-right">
          <RadarChartOutlined /><span>{{ info.name }}</span>
        </div>
        <div class="header-right">
          <DashOutlined />
        </div>
      </a-layout-header>
      <a-layout>
        <a-layout-sider width="200" style="background: #ebebeb">
          <a-menu
            v-model:selectedKeys="selectedKeys"
            mode="inline"
            style="background: #ebebeb"
          >
            <a-menu-item
              v-for="item in store.state.routerList"
              :key="item"
              @click="goNewPage(item)"
            >
              <div style="display: flex; align-items: center" >
                <i :class="getText(item)" style="font-size:30px;"> </i>
                <span class="nav-text" >{{ item.name }}</span>
              </div>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout style="padding: 0 24px 24px">
          <a-layout-content
            :style="{
              background: '#fff',
              padding: '24px',
              margin: 0,
            }"
          >
            <router-view></router-view>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {
  BellOutlined,
  RadarChartOutlined,
  DashOutlined,
  AlipaySquareFilled,
  DatabaseFilled,
} from "@ant-design/icons-vue";
import { getRouters } from "@/api/index";
import { onSetRouter} from  "@/utils/userInfo"
interface FormUser {
  name: String;
  password: String;
}

const router = useRouter();
const store = useStore();
const selectedKeys = ref<string[]>(["1"])
const info = reactive<FormUser>(store.getters.getUserInfo);
const goNewPage = (e: any) => {
  const { path } = e;
  router.push({
    path,
    query:{
    }
  });
};
const setRoutet = (list: any) => {
  store.commit("setRoutet", list);
};
const getText = (item:any)=>{
  return `iconfont ${item.meta.icon}` 
}
onMounted(async() => {
  const list: any = await getRouters();
  const newList:any = router.options.routes[2].children
  setRoutet(newList.splice(1,3));
  // onSetRouter(list.data)
});
defineExpose({
  selectedKeys,
  openKeys: ref<string[]>(["sub1"]),
  goNewPage,
  setRoutet,
  info,
  store,
});
</script>
<style>
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}

.ant-menu-submenu-arrow {
  display: none;
}

</style>
<style scoped>
.custom-icons-list :deep(.anticon) {
  margin-right: 6px;
}
</style>
<style lang="less">
.home {
  width: 100%;
  height: 100%;

  .ant-layout {
    height: 871px;
    overflow-y: hidden;
    padding: 0px !important;
    background-color: white;
    height: 100%;
  }
  .ant-layout-sider-children {
    background: rgb(235, 235, 235);
  }
  .ant-layout-has-sider {
    overflow: hidden;
  }

  .home-page {
    height: 100%;
    overflow: hidden;

    .header {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      background-color: @primary-color;

      .header-right {
        margin-right: 40px;
      }
    }
  }
}
</style>