import { IdcardFilled } from "@ant-design/icons"
import { Menu, Select, Spin } from "antd"
import React, { useEffect, useState } from "react"
import style from './index.less'

interface Props {
    allOfMember: any
    onChange?: (id?: number) => void
    value?: number
    heightDiffer?: number
}
/**
 * 选择组员左菜单
 */
const TeamMembers: React.FC<Props> = ({ onChange, value, allOfMember }) => {

    /*************************/
    const [userAll, setUserAll] = useState([])
    const [userId, setUserId] = useState<number>()
    /*************************/

    useEffect(() => {
        if (value) {
            setUserId(value)
        }
    }, [value])

    /** 获取组员 */
    useEffect(() => {
        getUserAll()
    }, [])

    const getUserAll = async () => {
        const res = allOfMember?.data || await allOfMember.run()
        if (res?.data) {
            const useAll: any = []
            res?.data?.forEach((item: { userId: number; nickname: any; }) => {
                const obj = {
                    key: item.userId,
                    label: item.nickname,
                    icon: <IdcardFilled />,
                }
                useAll.push(obj)
            })
            if (!value && useAll.length > 0) {
                setUserId(useAll[0].key)
                onChange?.(useAll[0].key)
            }
            setUserAll(useAll)
        }
    }

    /** 初始跳转到自己的名称 */
    useEffect(() => {
        if (userAll?.length > 0 && userId) {
            const topEq = userAll?.findIndex((item: any) => item.key == userId)
            const em: any = document.getElementById('myMenus')
            if (em) em.scrollTop = (39) * topEq
        }
    }, [userId, userAll])

    return <div className={style.teamMembers}>
        <Select
            placeholder='名称搜索'
            style={{ width: 'calc(100% - 10px)', margin: '4px 5px' }}
            showSearch
            value={userId ? Number(userId) : undefined}
            filterOption={(input: any, option: any) => {
                return (option!?.children as unknown as string)?.toLowerCase()?.includes(input?.toLowerCase())
            }}
            loading={allOfMember.loading}
            onChange={(value: any) => {
                if (value) {
                    setUserId(value)
                }
                onChange?.(value)
            }}
        >
            {userAll.map((item: any) => {
                return <Select.Option value={Number(item.key)} key={item.key}>{item.label}</Select.Option>
            })}
        </Select>
        {/* <Spin className="menus" spinning={allOfMember.loading}>
           
        </Spin> */}
        <div className={style.menus} id='myMenus'>
            <Menu
                theme='light'
                onClick={(e: any) => {
                    setUserId(e.key ? Number(e.key) : undefined)
                    onChange?.(e.key)
                }}
                selectedKeys={userId ? [userId.toString()] : undefined}
                mode="inline"
                items={userAll}
            />
        </div>
    </div>
}


export default React.memo(TeamMembers)