import React, { useState, useEffect, useCallback } from 'react'
import { Menu, Select, Tabs } from 'antd'
import { MenuFoldOutlined, MenuUnfoldOutlined, QrcodeOutlined, UserOutlined } from '@ant-design/icons';
import { useModel } from 'umi';
import style from './index.less'
const { Option } = Select
interface Props {
    default?: string,
    height?: number | string,
    type?: boolean,
    isHideMyGroup?: boolean,
    children?: JSX.Element,
}
function LeftPage(props: Props) {
    const { isHideMyGroup = false } = props
    const [isShow, setIsShow] = useState<boolean>(true)
    const [selectedKeys, setSelectedKeys] = useState<string[]>([]) //选中自己的菜单
    const [crewSelectedKeys, setCrewSelectedKeys] = useState<string[]>([]) //选中组员的菜单
    const { getWxGroupAll, actionMp, actionWx, getAllOfMember, state, dispatch } = useModel('useOperating.useWxGroupList', model => ({ getWxGroupAll: model.getDataList, ...model }))
    const { dispatch: userDispatch, initUserId } = useModel('useOperating.useUser')
    const { tabsKey, actionArr, actionWX } = state
    let bWith = document.body.clientWidth < 700
    //自己menuitem点击
    let menuItemClick = (e: any) => {
        checkData(e.key, '', tabsKey)
    };
    //组员menuitem点击
    let crewMenuItemClick = (e: any) => {
        checkData(e.key, '', tabsKey)
    };
    //tabs选中
    let tabsChange = useCallback((key: string) => {
        if (key === 'btn1') return
        if (key === 'btn') {
            console.log(1, tabsKey)
            if (tabsKey === '组员') {
                setIsShow(!isShow)
            }
            return
        }
        dispatch({ type: 'setTabsKey', params: { tabsKey: key } })
        if (key === '自己') {
            initUserId()
            checkData(selectedKeys[0], '', key)
        } else {
            checkData(crewSelectedKeys[0], '', key)
        }
    }, [selectedKeys, crewSelectedKeys, isShow])
    //搜索
    let inputChange = (v: any) => {
        if (v) {
            let [name, key] = v?.split('_')
            checkData(key, name, tabsKey)
        }
    }
    //设置选中的数据
    let checkData = useCallback((key: string, ikey?: string, tabsKey?: string) => {
        if (tabsKey === '自己') {
            initUserId()
            setSelectedKeys([key])
            getWxGroupAll?.data?.forEach((item: any) => {
                if (item.groupName === key) {//选中组
                    actionMp(item?.mpAccounts)
                    item?.mpAccounts?.forEach((wx: any) => {
                        if (wx.nickName === ikey) {//选中微信
                            actionWx(wx)
                        }
                    })
                }
            })
        } else {
            setCrewSelectedKeys([key])
            getAllOfMember?.data?.forEach((item: any) => {
                if (item.nickName + item.userId === key) {//选中组
                    actionMp(item.userMpAccounts)
                    handelUserId(item.userId, item.nickName)
                    item?.userMpAccounts?.forEach((wx: any) => {
                        if (wx.nickName === ikey) {//选中微信
                            actionWx(wx)
                        }
                    })
                }
            })
        }
    }, [getWxGroupAll, getAllOfMember])
    useEffect(() => {
        if (tabsKey === '自己') {
            initUserId()
            if (actionWX && getWxGroupAll?.data) {
                getWxGroupAll?.data?.forEach((item: any, index: number) => {
                    item?.mpAccounts?.forEach((mp: { appid: string }) => {
                        if (mp.appid === actionWX.appid) {
                            checkData(item['groupName'], '', tabsKey)
                        }
                    })
                })
            } else {
                let action = true
                getWxGroupAll?.data?.forEach((item: any, index: number) => {
                    if (action && item['mpAccounts']?.length > 0) {
                        action = false
                        checkData(getWxGroupAll?.data[index]['groupName'], '', tabsKey)
                    }
                })
            }
        } else {
            if (actionWX && getAllOfMember?.data) {
                getAllOfMember?.data?.forEach((item: any, index: number) => {
                    item?.userMpAccounts?.forEach((mp: { appid: string }) => {
                        if (mp.appid === actionWX.appid) {
                            checkData(item['nickName'] + item['userId'], '', tabsKey)
                        }
                    })
                })
            } else {
                let action = true
                getAllOfMember?.data?.forEach((item: any, index: number) => {
                    if (action && item['userMpAccounts'].length > 0) {
                        action = false
                        checkData(getAllOfMember?.data[index]['nickName'] + getAllOfMember?.data[index]['userId'], '', tabsKey)
                    }
                })
            }
        }
    }, [getWxGroupAll?.data, getAllOfMember?.data, tabsKey])
    //选中角色
    let handelUserId = useCallback((userId, name) => {
        userDispatch({ type: 'setUserId', params: { userId: userId?.toString(), name } })
    }, [])
    return <div>
        <Tabs type='card' activeKey={tabsKey} onChange={tabsChange} tabBarStyle={{ marginBottom: 0 }}>
            <Tabs.TabPane tab={<span><UserOutlined />自己</span>} key='自己' >
                {props.children}
            </Tabs.TabPane>
            {
                getAllOfMember?.data?.length > 0 && <Tabs.TabPane tab='组员' key='组员'>
                    <div className={style.group}>
                        {
                            isShow && <div style={{ width: `${bWith ? '100%' : 200}` }}>
                                <Select style={{ minWidth: 150 }} placeholder="输入搜索公众号" onChange={inputChange} showArrow showSearch allowClear>
                                    {
                                        getAllOfMember?.data?.map((item: any) => {
                                            return item?.userMpAccounts?.map((list: any) => {
                                                return <Option key={item?.nickName + '_' + list?.id} value={list?.nickName + '_' + item?.nickName + item?.userId} disabled={list?.verifyTypeInfo === -1}>
                                                    <img src={list?.headImg || localStorage?.bookImg} className={style.img} /> {list?.nickName}
                                                </Option>
                                            })
                                        })
                                    }
                                </Select>
                                <Menu
                                    onClick={crewMenuItemClick}
                                    style={{ width: `${bWith ? '100%' : 200}`, height: props.height ? props.height : `${bWith ? '40' : 'calc(100vh - 390px)'} `, overflowY: 'auto', overflowX: 'hidden', borderRight: 0, backgroundColor: 'transparent' }}
                                    selectedKeys={crewSelectedKeys}
                                    mode={"inline"}
                                >
                                    {
                                        props?.default && <Menu.Item key="all" icon={<QrcodeOutlined />}>全部公众号材料</Menu.Item>
                                    }
                                    {
                                        getAllOfMember?.data?.map((item: any) => {
                                            return <Menu.Item
                                                key={item?.nickName + item?.userId}
                                            >
                                                <p onClick={() => { handelUserId(item?.userId?.toString(), item?.nickName) }}>
                                                    {item?.userMpAccounts?.some((mp: { appid: string }) => actionArr?.some((arr: { appid: string }) => mp.appid === arr.appid)) ? <i style={{ fontStyle: 'normal', color: 'red' }}>*</i> : ''}
                                                    {item?.nickName}
                                                    <span style={{ color: '#999' }}>({item?.userMpAccounts?.length})</span>
                                                </p>
                                            </Menu.Item >
                                        })
                                    }
                                </Menu>
                            </div>
                        }

                        {props.children}
                    </div>
                </Tabs.TabPane>
            }
            <Tabs.TabPane tab={<span>{isShow ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />}</span>} key='btn' />
        </Tabs>
    </div >
}

export default LeftPage