<template>
  <Layout style="min-height: 100vh;">
    <LayoutSider 
      :style="{ overflow: 'auto', height: '100vh', background: '#fff'}"
    >
      <div class="logo">沙鲁大屏设计器</div>
      <Menu theme="light" mode="inline" v-model:selected-keys="menuSelectedKeys">
        <MenuItem key="1" :icon="() => h(FundProjectionScreenOutlined)">大屏管理</MenuItem>
        <MenuItem key="2" :icon="() => h(DatabaseOutlined)">数据源管理</MenuItem>
      </Menu>
    </LayoutSider>
    
    <LayoutContent style="max-height: 100vh; overflow: auto;">
      <BigscreenManagement v-if="menuSelectedKeys.includes('1')"/>
      <DataSourceManagement v-if="menuSelectedKeys.includes('2')"/>
    </LayoutContent>
  </Layout>
</template>

<script lang="ts" setup>
import { ref, h } from 'vue'
import type { Ref } from 'vue'
import { 
  FundProjectionScreenOutlined,
  DatabaseOutlined,
} from '@ant-design/icons-vue'
import { 
  Layout,
  LayoutContent,
  LayoutSider,
  Menu,
  MenuItem,
} from 'ant-design-vue'
import BigscreenManagement from './component/BigscreenManagement.vue'
import DataSourceManagement from './component/DataSourceManagement.vue'

// 菜单选中项
const menuSelectedKeys: Ref<string[]> = ref(['1'])
</script>

<style lang="less" scoped>
.logo {
  text-align: center;
  color: #333;
  font-size: 20px;
  font-weight: bold;
  line-height: 62px;
}
</style>