import { computed, defineComponent, ref } from 'vue';
import { useRouter, useRoute, RouterView } from 'vue-router';
import { Layout, Menu } from 'ant-design-vue';
import type { MenuProps } from 'ant-design-vue';
import {
  DashboardOutlined,
  InfoCircleOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons-vue';
import styles from './BasicLayout.module.less';

const { Header, Sider, Content, Footer } = Layout;

/**
 * 基础布局:左侧导航 + 顶部栏 + 内容区 + 页脚
 */
export default defineComponent({
  name: 'BasicLayout',
  setup() {
    const route = useRoute();
    const router = useRouter();
    const collapsed = ref(false);

    const selectedKeys = computed<string[]>(() => [route.path]);

    const menuItems: MenuProps['items'] = [
      { key: '/dashboard', icon: () => <DashboardOutlined />, label: '工作台' },
      { key: '/about', icon: () => <InfoCircleOutlined />, label: '关于' },
    ];

    const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
      router.push(key as string);
    };

    const toggleCollapsed = () => {
      collapsed.value = !collapsed.value;
    };

    return () => (
      <Layout class={styles.container}>
        <Sider class={styles.sider} collapsed={collapsed.value} trigger={null} collapsible>
          <div class={styles.logo}>
            <span class={styles.logoText}>{collapsed.value ? 'CPMS' : 'CPMS 运营平台'}</span>
          </div>
          <Menu
            theme="dark"
            mode="inline"
            selectedKeys={selectedKeys.value}
            items={menuItems}
            onClick={handleMenuClick}
          />
        </Sider>

        <Layout>
          <Header class={styles.header}>
            <span class={styles.trigger} onClick={toggleCollapsed}>
              {collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            </span>
          </Header>

          <Content class={styles.content}>
            <RouterView />
          </Content>

          <Footer class={styles.footer}>CPMS 运营平台 ©{new Date().getFullYear()}</Footer>
        </Layout>
      </Layout>
    );
  },
});