import React, { useState, useEffect } from 'react'
import { history, Outlet, useLocation, matchRoutes, useModel } from '@umijs/max'
import { Menu, Tabs, Select } from 'antd'
import './SystemContentList.less'
import { formatRoute, getDefaultRoute } from '@/utils/routeUtils'
import styles from './TopNavBar.less'
import { Row, Col, Avatar, Dropdown, Button } from 'antd'
import { userInfo } from '@/utils/globalCommon'
import { HomeOutlined, LogoutOutlined, AppstoreOutlined, UserOutlined, SettingOutlined, DatabaseOutlined, FileTextOutlined, LockOutlined, AreaChartOutlined, CaretDownOutlined, BellOutlined, SearchOutlined, QuestionCircleOutlined } from '@ant-design/icons'
import { getPageQuery } from '@/utils/utils'
import menuTitle from '@/assets/img/智能管控平台.svg'
import menuTitle1 from '@/assets/img/智能管控平台-1.svg'
import fireHydrant from '@/assets/img/fireHydrant.svg'
import fireHydrant1 from '@/assets/img/fireHydrant1.svg'
import fireKeynoteArea from '@/assets/img/fire_keynote_area.svg'
import firewarning from '@/assets/img/icon_firewarning.svg'
import trouble from '@/assets/img/trouble.svg'
import book from '@/assets/img/book.svg'
import danger from '@/assets/img/danger.svg'
import danger1 from '@/assets/img/danger1.svg'
import license from '@/assets/img/license.svg'
import people from '@/assets/img/people.svg'
import risk from '@/assets/img/risk.svg'
import icon1 from '@/assets/img/icon1.svg'

import { CustomBreadcrumb } from '@/components/GlobalComponent'


// 自定义菜单项渲染组件，支持根据激活状态显示不同图片
const CustomMenuItem = ({ item, selectedKeys }) => {
    const isActive = selectedKeys.includes(item.key);

    // 为每个菜单项定义激活状态的图片
    // 如果没有专门的激活状态图片，则使用默认图片
    const getActiveIcon = (baseIcon) => {
        // 这里可以根据需要为每个图标定义对应的激活状态图片
        // 目前暂时使用相同的图片，用户可以根据实际情况替换
        return baseIcon;
    };

    const renderIcon = () => {
        if (item.icon && typeof item.icon === 'object' && item.icon.props && item.icon.props.src) {
            const iconSrc = isActive ? getActiveIcon(item.icon.props.src) : item.icon.props.src;
            return <img
                src={iconSrc}
                alt={item.icon.props.alt || 'menu icon'}
                style={item.icon.props.style || { width: '16px', height: '16px' }}
            />
        }
        return item.icon;
    };

    const renderMenuItem = (menuItem) => ({
        ...menuItem,
        icon: renderIcon(),
        children: menuItem.children?.map(child => renderMenuItem(child))
    });

    return renderMenuItem(item);
};


const SystemContentList = (props) => {
    const dynamicRoute = window.dynamicRoute
    const location = useLocation()
    const pathName = location.pathname
    const [openKey, setOpenKey] = useState([])
    const [selectedKey, setSelectedKey] = useState([])
    const [menuItems, setMenuItems] = useState([])
    const [isMenuCollapsed, setIsMenuCollapsed] = useState(false); // 添加菜单收缩状态
    let defaultKey = ''

    useEffect(() => {
        console.log('dynamicRoute structure:', dynamicRoute)
        if (!dynamicRoute || dynamicRoute?.length === 0) return
        let newList = []
        let routes = []

        if (dynamicRoute?.length) {
            let tempRoute = dynamicRoute?.filter(item => pathName.indexOf(item.key) !== -1) ?? []

            newList = formatRoute(tempRoute[0]?.children)
            routes = formatRoute(tempRoute[0]?.children, true)
            defaultKey = getDefaultRoute(routes)
            const mathRoute = matchRoutes(routes, pathName)

            setRouteActive({ key: mathRoute?.length ? pathName : defaultKey }, routes)
        }

        setMenuItems(newList)

        const fixedMenuItems = [
            {
                path: '/topnavbar00/business/homepage',
                icon: <img
                    src={icon1}
                    alt="首页"
                    style={{
                        width: '16px',
                        height: '16px',
                        opacity: selectedKey.includes('/topnavbar00/business/home') ? 1 : 0.6
                    }}
                />,
                key: "/topnavbar00/business/homepage",
                "label": "首页"
            },
            {
                path: '/topnavbar00/business/assetmanagement',
                icon: <img
                    src={icon1}
                    alt="资产管理"
                    style={{
                        width: '16px',
                        height: '16px',
                        opacity: selectedKey.includes('/topnavbar00/business/assetmanagement') ? 1 : 0.6
                    }}
                />,
                key: "/topnavbar00/business/assetmanagement",
                "label": "资产管理",
                children: [
                    {
                        path: '/topnavbar00/business/assetmanagement/assetlist',
                        key: "/topnavbar00/business/assetmanagement/assetlist",
                        "label": "资产列表"
                    },
                    {
                        path: '/topnavbar00/business/assetmanagement/assetgrouping',
                        key: "/topnavbar00/business/assetmanagement/assetgrouping",
                        "label": "资产分组"
                    },
                    // 资产属性定义
                    {
                        path: '/topnavbar00/business/assetmanagement/assetdefined',
                        key: "/topnavbar00/business/assetmanagement/assetdefined",
                        "label": "资产属性定义"
                    },
                    {
                        path: '/topnavbar00/business/assetmanagement/maintenance',
                        key: "/topnavbar00/business/assetmanagement/maintenance",
                        "label": "维保管理"
                    },
                ]
            },
            // 设备监控
            {
                path: '/topnavbar00/business/devicemonitoring',
                icon: <img
                    src={icon1}
                    alt="设备监控"
                    style={{
                        width: '16px',
                        height: '16px',
                        opacity: selectedKey.includes('/topnavbar00/business/devicemonitoring') ? 1 : 0.6
                    }}
                />,
                key: "/topnavbar00/business/devicemonitoring",
                "label": "设备监控",
                children: [
                    {
                        path: '/topnavbar00/business/devicemonitoring/statemanagement',
                        key: "/topnavbar00/business/devicemonitoring/statemanagement",
                        "label": "状态管理"
                    },
                    // 设备地图
                    {
                        path: '/topnavbar00/business/devicemonitoring/devicemap',
                        key: "/topnavbar00/business/devicemonitoring/devicemap",
                        "label": "设备地图"
                    },
                    // 视频监控
                    {
                        path: '/topnavbar00/business/devicemonitoring/video',
                        key: "/topnavbar00/business/devicemonitoring/video",
                        "label": "视频监控"
                    },
                ]
            },
            // 运维工单
            {
                path: '/topnavbar00/business/serviceticket',
                icon: <img
                    src={icon1}
                    alt="运维工单"
                    style={{
                        width: '16px',
                        height: '16px',
                        opacity: selectedKey.includes('/topnavbar00/business/serviceticket') ? 1 : 0.6
                    }}
                />,
                key: "/topnavbar00/business/serviceticket",
                "label": "运维工单",
                children: [
                    {
                        path: '/topnavbar00/business/serviceticket/list',
                        key: "/topnavbar00/business/serviceticket/list",
                        "label": "工单列表"
                    },
                    {
                        path: '/topnavbar00/business/serviceticket/todo',
                        key: "/topnavbar00/business/serviceticket/todo",
                        "label": "代办工单"
                    },
                    {
                        path: '/topnavbar00/business/serviceticket/history',
                        key: "/topnavbar00/business/serviceticket/history",
                        "label": "已办工单"
                    },
                    {
                        path: '/topnavbar00/business/serviceticket/my',
                        key: "/topnavbar00/business/serviceticket/my",
                        "label": "我的工单"
                    },
                    {
                        path: '/topnavbar00/business/serviceticket/analysis',
                        key: "/topnavbar00/business/serviceticket/analysis",
                        "label": "统计分析"
                    },
                ]
            },
            {
                path: '/topnavbar00/business/inspection',
                icon: <img
                    src={icon1}
                    alt="智能巡检"
                    style={{
                        width: '16px',
                        height: '16px',
                        opacity: selectedKey.includes('/topnavbar00/business/inspection') ? 1 : 0.6
                    }}
                />,
                key: "/topnavbar00/business/inspection",
                "label": "智能巡检",
                children: [
                    {
                        path: '/topnavbar00/business/inspection/inspectionTemplate',
                        key: "/topnavbar00/business/inspection/inspectionTemplate",
                        "label": "巡检模板"
                    },
                    // 巡检任务
                    {
                        path: '/topnavbar00/business/inspection/inspectionTasks',
                        key: "/topnavbar00/business/inspection/inspectionTasks",
                        "label": "巡检任务"
                    },
                    // 巡检记录
                    {
                        path: '/topnavbar00/business/inspection/inspectionRecords',
                        key: "/topnavbar00/business/inspection/inspectionRecords",
                        "label": "巡检记录"
                    },
                ]
            }
        ]
        setMenuItems(fixedMenuItems)
        // 初始化默认路由
        const defaultRoute = fixedMenuItems[0]?.key || ''
        const mathRoute = matchRoutes(fixedMenuItems, pathName)
        setRouteActive({ key: mathRoute?.length ? pathName : defaultRoute }, fixedMenuItems)
    }, [pathName])

    const setRouteActive = (value, menu) => {
        const curKey = value.key
        const tempMenu = menu ?? menuItems ?? []
        const mathRoute = matchRoutes(tempMenu, curKey)
        let openKeys = []
        let selectedKeys = []

        mathRoute?.map((item, index) => {
            mathRoute?.length !== index + 1 && (openKeys = [...openKeys, item.pathname])
            mathRoute?.length === index + 1 && (selectedKeys = [...selectedKeys, item.pathname])
        })

        setOpenKey(openKeys)
        setSelectedKey(selectedKeys)
        history.replace(curKey)
    }

    const selectChange = (value) => {
        console.log(value)
        window.location.href = 'http://localhost:8888/'
    }

    // 切换菜单收缩状态
    const toggleMenu = () => {
        setIsMenuCollapsed(!isMenuCollapsed);
    };

    const { initialState: { menu }, setInitialState } = useModel('@@initialState')

    const loginOut = async () => {
        // await outLogin()
        const { redirect } = getPageQuery()

        if (window.location.pathname !== '/login/login' && !redirect) {
            history.replace({
                pathname: '/login',
                // search: stringify({
                //   redirect: window.location.href,
                // }),
            })

            setInitialState({ currentUser: null, menu: null, menuMap: null })
            window.dynamicRoute = null
            localStorage.clear()
        }
    }

    const handleMenuClick = (e) => {
        switch (e.key) {
            case 'logout':
                loginOut()
                break
            default:
                break
        }
    }

    const dropDownMenuItems = [
        {
            label: <><LogoutOutlined style={{ marginRight: '8px' }} />退出登录</>,
            key: 'logout'
        }
    ]

    const dropDownMenu = () => (
        <Menu items={dropDownMenuItems} onClick={handleMenuClick} selectedKeys={[]} className={styles.tabBarMenu} />
    )

    return (
        <div className='pageContainer systemContent'>
            <div
                className='leftMenu'
                style={{
                    width: isMenuCollapsed ? '80px' : '230px',
                    transition: 'width 0.3s ease',
                    position: 'relative', // 添加相对定位，使按钮可以相对于菜单定位
                    overflow: 'unset',

                }}
            >
                <div className='menuTitle' style={{
                    marginBottom: '10px',
                    display: isMenuCollapsed ? 'none' : 'flex'
                }}>
                    <img src={menuTitle} alt='menuTitle' style={{ marginTop: '20px', marginBottom: '2px', width: '172.44px', height: '51.28px' }} />
                    <img src={menuTitle1} alt='menuTitle1' style={{ width: '172.44px', height: '51.28px' }} />
                </div>
                <style jsx>{`
                    .custom-select .ant-select-selector {
                        height: 42px !important;
                        border-radius: 0 !important;
                        border-color: #3D81FF !important;
                        background-color: #003AA7 !important;
                        color: #fff !important;
                        fontSize: 22px !important;
                        fontWeight: 600 !important;
                    }
                    .custom-select .ant-select-selection-item {
                        color: #fff !important;
                        fontSize: 22px !important;
                        fontWeight: 600 !important;
                        display: flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        padding: 0 !important;
                        padding-right: 50px !important;
                        font-size: 16px !important;
                        font-weight: 500 !important;
                    }
                    .custom-select .ant-select-arrow {
                        opacity: 0.66 !important;
                        color: #fff !important;
                    }
                    .custom-select-dropdown .ant-select-item-option-selected {
                        background-color: #3D81FF !important;
                        color: #fff !important;
                    }
                    .custom-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-selected) {
                        background-color: rgba(61, 129, 255, 0.1) !important;
                        color: #fff !important;
                    }
                    .custom-select-dropdown .ant-select-item-option-content {
                        color: #fff !important;
                        font-size: 16px !important;
                        font-weight: 600 !important;
                    }
                    .menuToggleBtn {
                        position: absolute;
                        right: -15px;
                        top: 50%;
                        width: 30px;
                        height: 30px;
                        background: rgba(0, 154, 152, 1);
                        color: #fff;
                        border: 0.5px solid;
                        border-image-source: linear-gradient(98.03deg, #75F7F5 2.41%, rgba(117, 247, 245, 0) 51.5%, rgba(117, 247, 245, 0) 76.06%, rgba(117, 247, 245, 0.5) 94.15%);
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        z-index: 9999; /* 增加z-index确保按钮在最上层 */
                        font-size: 16px;
                        font-weight: bold;
                        outline: none;
                        transition: all 0.3s ease;
                        box-shadow: 0 0 5px 3px rgba(169, 185, 255, 0.33);
                    }
                    .menuToggleBtn:hover {
                        //border: 1px solid #3D81FF;
                        background: color-mix(in srgb, rgba(0, 154, 152, 1) , #fff 30%);
                        //color: white;
                        transform: scale(1.1);
                    }
                `}</style>
                {/* 菜单收缩按钮 */}
                <button
                    className="menuToggleBtn"
                    onClick={toggleMenu}
                    aria-label={isMenuCollapsed ? "展开菜单" : "收缩菜单"}
                >
                    {isMenuCollapsed ? ">" : "<"}
                </button>

                <Menu
                    openKeys={openKey}
                    selectedKeys={selectedKey}
                    // 使用自定义的itemRender方法处理激活状态的图标切换
                    items={menuItems.map(item => {
                        const isActive = selectedKey.includes(item.key);

                        // 处理当前项的图标
                        let icon = item.icon;
                        if (icon && typeof icon === 'object' && icon.props && icon.props.src) {
                            let iconSrc = icon.props.src;

                            // 根据激活状态切换不同的图片
                            if (isActive) {
                                // 工时仪表盘：激活态使用fireHydrant1
                                if (item.key === '/topnavbar00/business/timesheet' && typeof fireHydrant !== 'undefined') {
                                    iconSrc = fireHydrant;
                                }
                                // 隐患排查：激活态使用danger1
                                else if (item.key === '/topnavbar00/business/hiddentrouble' && typeof danger1 !== 'undefined') {
                                    iconSrc = danger1;
                                }
                                // 激活态使用danger1
                                else if (item.key === '/topnavbar00/business/staffsheet' && typeof danger1 !== 'undefined') {
                                    iconSrc = danger1;
                                }
                            }

                            icon = <img
                                src={iconSrc}
                                alt={icon.props.alt}
                                style={icon.props.style}
                            />;
                        }

                        // 递归处理子项
                        const children = item.children?.map(child => {
                            const childIsActive = selectedKey.includes(child.key);
                            return { ...child };
                        });

                        return {
                            ...item,
                            icon,
                            children,
                            // 根据菜单收缩状态决定是否显示标签文本
                            label: isMenuCollapsed ? null : item.label
                        };
                    })}
                    onClick={value => setRouteActive(value)}
                    onOpenChange={value => setOpenKey(value)}
                    mode={isMenuCollapsed ? 'vertical' : 'inline'}
                />
            </div>

            <div
                className='rightContent'
                style={{
                    width: isMenuCollapsed ? 'calc(100% - 80px)' : 'calc(100% - 230px)',
                    transition: 'width 0.3s ease'
                }}
            >
                {/* <div style={{ width: '100%', backgroundColor: '#fff', marginBottom: '10px' }}> */}
                <div className='tabBarHeader'>
                    <Row className='tabBarRow'>
                        {/* <Col xs={16} sm={16} md={16} lg={16} xl={16} className='tabBarLeft'>
                            <img src={Logo} alt='logo' className='leftLogo' />

                            <Menu mode='horizontal' className='leftMenu' selectedKeys={[activeKey]} items={menuItems} onClick={value => setRouteActive(value)} />
                        </Col> */}

                        <Col xs={20} sm={20} md={20} lg={20} xl={20} className='tabBarLeft'>
                            <CustomBreadcrumb />
                        </Col>
                        <Col xs={4} sm={4} md={4} lg={4} xl={4} className='tabBarRight'>
                            <Button type='text' className='tabBarRightBtn'><BellOutlined /></Button>
                            <Button type='text' className='tabBarRightBtn'><SearchOutlined /></Button>
                            <Button type='text' className='tabBarRightBtn'><QuestionCircleOutlined /></Button>
                            <Avatar className='tabBarRightAvaTor' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F31%2F20170731021444_2YUfe.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669779871&t=ec025ed48a1668dee9cfa0e803b6f787' />

                            <span className='tabBarRightName'>{userInfo?.user_name_cn ? userInfo.user_name_cn : (userInfo?.user_name || '')}</span>

                            <Dropdown dropdownRender={dropDownMenu}>
                                <Button type='text' className='tabBarRightBtn'><SettingOutlined /></Button>
                            </Dropdown>
                        </Col>
                    </Row>
                </div>
                {/* </div> */}
                <div style={{ padding: '12px', height: '100%' }}>
                    <div className='rightContentMain'>
                        <Outlet />
                    </div>
                </div>

            </div>
        </div>
    )
}

export default SystemContentList