import * as React from 'react';
import { Layout, MenuProps, Modal, Dropdown, Select } from 'antd';
import { CaretDownOutlined, PoweroffOutlined } from '@ant-design/icons';
import logoSrc from '@/assets/public/logo.png';
import router from '@/router';
import { debounce, set } from 'lodash';

const { Header: AntdHeader } = Layout;

interface Props {
    userName: string,
    onClickLogout: () => Promise<any>,
    onSelectChange: (value: number) => void; // 新增回调函数
    currentMenuType: number;
};

const Header: React.FC<Props> = (props: Props) => {
    const {
        userName,
        onClickLogout,
        onSelectChange,
        currentMenuType
    } = props;

    const items: MenuProps['items'] = [
        {
            key: 'logout',
            label: (
                <a onClick={(e) => {
                    e.preventDefault(); // 阻止默认行为
                    Modal.confirm({
                        title: '提示',
                        content: '确定退出平台吗？',
                        async onOk() {
                            await onClickLogout();
                        }
                    });
                }}>
                    <PoweroffOutlined style={{ marginRight: 5 }} />
                    退出登录
                </a>
            ),
        }
    ];

    const fruits = [
        { id: 1, name: 'DeepSeek' },
        { id: 2, name: '智普' },
    ];
    const [open, setOpen] = React.useState(false); // 控制下拉框展开状态
    const onDropdownVisibleChange = (visible: boolean) => {
        setOpen(visible);
      };
    const onChange = (value: number) => {
        // 只调用父组件传递的处理函数
        onSelectChange(value);
        if (!open) return; // 确保只在真正选择时触发
        props.onSelectChange(value);
        setOpen(false);
    };

    return (
        <AntdHeader className='header'>
            <div className='header-logo' onClick={() => {
                router.navigate({ pathname: '/deepseek/questionAnswer' });
            }}>
                <img className='header-logo-picture' src={logoSrc} />
                <div className='header-logo-text'>
                    建科•小智后台管理系统
                </div>
                <Select style={{ width: 200, marginLeft: 20 }}
                    open={open}
                    value={currentMenuType}
                    onChange={onSelectChange}
                    placeholder="请选择"
                    onDropdownVisibleChange={onDropdownVisibleChange}
                    onClick={(e) => e.stopPropagation()} // 阻止事件冒泡
                >
                    {fruits.map(fruit => (
                        <Select.Option key={fruit.id} value={fruit.id}>
                            {fruit.name}
                        </Select.Option>
                    ))}
                </Select>
            </div>

            <Dropdown menu={{ items }}>
                <div className='header-operation'>
                    <div className='header-operation-picture'>
                        {userName.slice(0, 1)}
                    </div>
                    <div className='header-operation-name'>
                        {userName}
                    </div>
                    <CaretDownOutlined className='header-operation-down' />
                </div>
            </Dropdown>
        </AntdHeader>
    );
};

export default Header;