<template>
    <pro-layout
        :collapsed="collapsed"
        :menu-items="menuItems"
        :top-menu-items="topMenuItems"
        :active-menu="activeMenu"
        :menu-router="true"
        :title="title"
        :logo="logo"
        :fixed-header="fixedHeader"
        :show-header-search="true"
        :show-header="false"
        :show-sider="false"
        @update:collapsed="collapsed = $event"
    >
        <template #header-right>
            <div style="display: flex; align-items: center; gap: 4px; cursor: pointer">
                <span>小明</span>
                <el-icon>
                    <component :is="ArrowDownIcon" />
                </el-icon>
            </div>
        </template>
        <div class="layout-content">
            <el-card>
                <template #header>
                    <span>ProLayout 组件示例</span>
                </template>
                <p>这是 ProLayout 组件的示例页面。</p>
                <p>当前路由: {{ activeMenu }}</p>
                <p>当前页面已经通过 BaseLayout 继承了 ProLayout 布局。</p>

                <el-divider />

                <h3>功能特性：</h3>
                <ul>
                    <li>支持侧边栏折叠/展开</li>
                    <li>支持多级菜单</li>
                    <li>支持路由模式</li>
                    <li>可自定义头部和页脚</li>
                    <li>响应式布局</li>
                </ul>

                <el-divider />

                <h3>使用说明：</h3>
                <p>点击左上角的折叠按钮可以收起/展开侧边栏。</p>
                <p>点击侧边栏菜单项可以切换当前激活的菜单。</p>
                <p>所有路由都通过 BaseLayout 继承了 ProLayout 布局，无需在每个页面中重复使用。</p>
            </el-card>
        </div>
    </pro-layout>
</template>

<script setup>
import { ref, computed, markRaw, onMounted } from 'vue';
import { ProLayout } from '@deppon/deppon-template';
import { ElCard, ElDivider, ElIcon } from '@deppon/deppon-ui';
import { ArrowDown } from '@deppon/deppon-ui/icons-vue';

const ArrowDownIcon = markRaw(ArrowDown);

const props = defineProps({
    /** 标题 */
    title: {
        type: String,
        default: 'JDL-CRM',
    },
    /** Logo 图片，可以是字符串（路径）或对象（包含 src 和 size） */
    logo: {
        type: [String, Object],
        default: () => ({
            src: 'https://jdl-oss.s3-cache-accelerate.cn-north-1.jdcloud-oss.com/static/images/home/logo-s.png',
            size: { width: 129, height: 22 }, // 可以是数字（宽高相同）、字符串（如 '24px'）或对象（{ width: 24, height: 24 }）
        }),
    },
    /** 是否固定头部 */
    fixedHeader: {
        type: Boolean,
        default: true,
    },
    /** 菜单项（可选，如果不传则使用默认菜单） */
    menuItems: {
        type: Array,
        default: null,
    },
});

const collapsed = ref(false);

// 根据当前路径自动设置激活菜单
// 使用 window.location.pathname 替代 vue-router
// 确保始终返回有效的字符串值
const getCurrentPath = () => {
    if (typeof window !== 'undefined' && window.location && window.location.pathname) {
        const path = window.location.pathname;
        return String(path || '/');
    }
    return '/';
};

const activeMenu = ref(getCurrentPath());

// 在组件挂载后更新路径（确保获取最新值）
onMounted(() => {
    activeMenu.value = getCurrentPath();
});

// 监听路径变化（如果需要支持浏览器前进后退）
if (typeof window !== 'undefined') {
    window.addEventListener('popstate', () => {
        activeMenu.value = getCurrentPath();
    });
}

// 默认菜单配置
const defaultMenuItems = [
    {
        type: 'common',
        title: '常用菜单',
        children: [
            {
                key: 'common-home',
                path: '/home',
                title: '首页',
            },
            {
                key: 'common-generic-insert-detail-workflow',
                path: '/examples/contract-detail',
                title: '通用新建、详情、工作流模板页',
            },
            {
                key: 'common-pro-table',
                path: '/examples/pro-table',
                title: 'ProTable',
            },
            {
                key: 'common-pro-form',
                path: '/examples/pro-form',
                title: 'ProForm',
            },
            {
                key: 'common-pro-form-group',
                path: '/examples/pro-form-group',
                title: 'ProForm 表单组',
            },
            {
                key: 'common-pro-field',
                path: '/examples/pro-field',
                title: 'ProField',
            },
        ],
    },
    {
        type: 'menu',
        title: '导航菜单',
        children: [
            {
                key: 'home',
                path: '/home',
                title: '首页',
            },
            {
                key: 'quote-management',
                path: '/quote-management',
                title: '报价管理',
                children: [
                    {
                        key: 'multi-product-quote',
                        path: '/quote-management/multi-product',
                        title: '多产品报价管理',
                    },
                    {
                        key: 'service-quote',
                        path: '/quote-management/service',
                        title: '服务+报价管理',
                    },
                    {
                        key: 'market-scattered-quote',
                        path: '/quote-management/market-scattered',
                        title: '市场散单报价管理',
                    },
                    {
                        key: 'calculation-management',
                        path: '/quote-management/calculation',
                        title: '测算管理',
                    },
                    {
                        key: 'inquiry-management',
                        path: '/quote-management/inquiry',
                        title: '询价单管理',
                    },
                    {
                        key: 'price-comparison',
                        path: '/quote-management/price-comparison',
                        title: '我要比价',
                    },
                    {
                        key: 'cloud-warehouse-quote',
                        path: '/quote-management/cloud-warehouse',
                        title: '云仓报价管理',
                    },
                    {
                        key: 'product-special-approval',
                        path: '/quote-management/product-special',
                        title: '产品特批管理',
                    },
                    {
                        key: 'personal-quote-template',
                        path: '/quote-management/personal-template',
                        title: '个人报价模板',
                    },
                    {
                        key: 'smart-price-comparison',
                        path: '/quote-management/smart-comparison',
                        title: '智能比价',
                    },
                ],
            },
            {
                key: 'components',
                path: '/components',
                title: '组件示例',
                children: [
                    {
                        key: 'pro-layout',
                        path: '/examples/pro-layout',
                        title: 'ProLayout',
                    },
                    {
                        key: 'pro-table',
                        path: '/examples/pro-table',
                        title: 'ProTable',
                    },
                    {
                        key: 'pro-table-nofixed',
                        path: '/examples/pro-table-nofixed',
                        title: 'ProTableNofixed',
                    },
                    {
                        key: 'pro-table-editable',
                        path: '/examples/pro-table-editable',
                        title: 'ProTable 编辑',
                    },
                    {
                        key: 'pro-field',
                        path: '/examples/pro-field',
                        title: 'ProField',
                    },
                    {
                        key: 'pro-form',
                        path: '/examples/pro-form',
                        title: 'ProForm',
                    },
                    {
                        key: 'pro-form-group',
                        path: '/examples/pro-form-group',
                        title: 'ProForm 表单组',
                    },
                    {
                        key: 'pro-table-multi-header',
                        path: '/examples/pro-table-multi-header',
                        title: 'ProTable 多级表头',
                    },
                    {
                        key: 'pro-dialog',
                        path: '/examples/pro-dialog',
                        title: 'ProDialog',
                    },
                    {
                        key: 'card',
                        path: '/examples/card',
                        title: 'Card',
                    },
                ],
            },
            {
                key: 'order-management',
                path: '/order-management',
                title: '订单管理',
                children: [
                    {
                        key: 'order-list',
                        path: '/order-management/list',
                        title: '订单列表',
                    },
                    {
                        key: 'order-detail',
                        path: '/order-management/detail',
                        title: '订单详情',
                    },
                    {
                        key: 'order-statistics',
                        path: '/order-management/statistics',
                        title: '订单统计',
                    },
                ],
            },
            {
                key: 'customer-management',
                path: '/customer-management',
                title: '客户管理',
                children: [
                    {
                        key: 'customer-list',
                        path: '/customer-management/list',
                        title: '客户列表',
                    },
                    {
                        key: 'customer-detail',
                        path: '/customer-management/detail',
                        title: '客户详情',
                    },
                ],
            },
        ],
    },
];

// 使用传入的菜单项或默认菜单
const menuItems = computed(() => props.menuItems || defaultMenuItems);

// 顶部菜单项配置
const topMenuItems = [
    {
        key: 'home',
        path: '/home',
        title: '首页',
        label: '首页',
    },
    {
        key: 'components',
        path: '/components',
        title: '组件示例',
        label: '组件示例',
        children: [
            {
                key: 'pro-layout',
                path: '/examples/pro-layout',
                title: 'ProLayout',
                label: 'ProLayout',
            },
            {
                key: 'pro-table',
                path: '/examples/pro-table',
                title: 'ProTable',
                label: 'ProTable',
            },
            {
                key: 'pro-table-nofixed',
                path: '/examples/pro-table-nofixed',
                title: 'ProTableNofixed',
                label: 'ProTableNofixed',
            },
            {
                key: 'pro-table-editable',
                path: '/examples/pro-table-editable',
                title: 'ProTable 编辑',
                label: 'ProTable 编辑',
            },
            {
                key: 'pro-table-multi-header',
                path: '/examples/pro-table-multi-header',
                title: 'ProTable 多级表头',
                label: 'ProTable 多级表头',
            },
            {
                key: 'pro-field',
                path: '/examples/pro-field',
                title: 'ProField',
                label: 'ProField',
            },
            {
                key: 'pro-form',
                path: '/examples/pro-form',
                title: 'ProForm',
                label: 'ProForm',
            },
            {
                key: 'pro-form-group',
                path: '/examples/pro-form-group',
                title: 'ProForm 表单组',
                label: 'ProForm 表单组',
            },
            {
                key: 'pro-dialog',
                path: '/examples/pro-dialog',
                title: 'ProDialog',
                label: 'ProDialog',
            },
            {
                key: 'card',
                path: '/examples/card',
                title: 'Card',
                label: 'Card',
            },
        ],
    },
];
</script>

<style scoped lang="less">
.layout-content {
    .el-card {
        margin-bottom: 20px;
    }

    ul {
        padding-left: 20px;

        li {
            margin: 8px 0;
        }
    }

    h3 {
        margin-top: 20px;
        margin-bottom: 10px;
        color: #333;
    }

    p {
        margin: 10px 0;
        line-height: 1.6;
        color: #666;
    }
}
</style>
