<template>
  <a-layout-sider collapsible>
    <a-menu theme="dark" mode="inline" v-model:selectedKeys="state.selectedKeys" @select="handleSelect">
      <a-menu-item :key="'/' + ERouterName.DEVICES">
        <HddOutlined />
        <span>
          设备管理
        </span>
      </a-menu-item>
      <a-menu-item :key="'/' + ERouterName.WORKSPACE">
        <CodepenOutlined />
        <span>
          项目工作空间
        </span>
      </a-menu-item>
      <a-menu-item :key="'/' + ERouterName.TASK">
        <ContainerOutlined />
        <span>
          远程计划任务
        </span>
      </a-menu-item>
      <a-menu-item :key="'/' + ERouterName.MEDIA">
        <PictureOutlined />
        <span>
          媒体管理
        </span>
      </a-menu-item>
      <a-menu-item :key="'/' + ERouterName.TRAJECTORY">
        <GatewayOutlined />
        <span>
          轨迹回放
        </span>
      </a-menu-item>
      <a-menu-item :key="'/' + ERouterName.MEMBER">
        <TeamOutlined />
        <span>
          成员管理
        </span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>
<script lang="ts" setup>
import { reactive, watchEffect } from 'vue';
import { GatewayOutlined, CodepenOutlined, ContainerOutlined, HddOutlined, PictureOutlined, VideoCameraOutlined, TeamOutlined } from '@ant-design/icons-vue';
import { ERouterName } from '/@/types/enums';
import router from '/@/router';

interface State {
  selectedKeys: string[],
}

const state: State = reactive({
  selectedKeys: [],
})

watchEffect(() => {
  const path = router.currentRoute.value.fullPath;
  const firstKey = path.split('/')[1];
  state.selectedKeys = ['/' + firstKey];
});

// 选择菜单
const handleSelect = (item: any) => {
  router.push({ path: item.key })
}
</script>

<style lang="scss" scoped></style>