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

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

    /*************************/
    const { onChange, value, allOfMember } = props
    const [userAll, setUserAll] = useState([])

    const userInfo = useModel('@@initialState', model => model.initialState?.currentUser)
    const [userId, setUserId] = useState<number | undefined>(userInfo?.userId ? Number(userInfo?.userId) : undefined)
    /*************************/

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

    /** 获取组员 */
    useEffect(() => {
        (async function () {
            const res = allOfMember?.data || await allOfMember.run()
            if (res?.data) {
                let useAll: any = []
                res?.data?.forEach((item: { key: { userId: number; nickName: any; }; value: any[]; }) => {
                    const obj: any = {
                        key: item.key.userId,
                        label: item.key.nickName,
                        icon: <IdcardFilled />,
                    }
                    if (item?.value) {
                        obj['childrenarr'] = item?.value?.map(item => {
                            return { key: item.accountId + '_' + item.id, label: item?.remark ? item.accountId + '_' + item?.remark : item.accountId }
                        })
                    }
                    useAll.push(obj)
                })
                setUserAll(useAll)
            }
        })()

    }, [])

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

    return <div className="teamMembers">
        <Select
            placeholder='名称搜索'
            style={{ width: '100%' }}
            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 ? value : undefined)
            }}
        >
            {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}>
            <Menu
                id='myMenus'
                theme='light'
                onClick={(e: any) => {
                    setUserId(e.key ? Number(e.key) : undefined)
                    onChange?.(e.key)
                }}
                selectedKeys={userId ? [userId.toString()] : undefined}
                mode="inline"
                items={userAll}
                style={{
                    overflowY: 'auto',
                    height: 'calc(100vh - 190px)',
                    overflowX: 'hidden'
                }}
            />
        </Spin>

    </div>
}


export default React.memo(TeamMembers)