import React, { useState, useEffect, useCallback } from 'react'
import { Menu, Select, Tabs } from 'antd'
import { QrcodeOutlined } 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
}
function LeftPage(props: Props) {
    const { isHideMyGroup = false } = props
    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) => {
        dispatch({ type: 'setTabsKey', params: { tabsKey: key } })
        if (key === '自己') {
            initUserId()
            checkData(selectedKeys[0], '', key)
        } else {
            checkData(crewSelectedKeys[0], '', key)
        }
    }, [selectedKeys, crewSelectedKeys])
    //搜索
    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 && wx.nickName === ikey) {//选中微信
                            actionWx(wx)
                        }
                    })
                }
            })
        } else {
            setCrewSelectedKeys([key])
            getAllOfMember?.data?.forEach((item: { key: { nickname: string, userId: number }, value: any[] }) => {
                if (item?.key?.nickname + item?.key?.userId === key) {//选中组
                    actionMp(item.value)
                    handelUserId(item?.key?.userId, item?.key?.nickname)
                    item?.value?.forEach((wx: any) => {
                        if (wx?.nickName && 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: { key: { nickname: string, userId: number }, value: any[] }, index: number) => {
                    item?.value?.forEach((mp: { appid: string }) => {
                        if (mp?.appid === actionWX.appid) {
                            checkData(item?.key?.nickname + item?.key?.userId, '', tabsKey)
                        }
                    })
                })
            } else {
                let action = true
                getAllOfMember?.data?.forEach((item: { key: { nickname: string, userId: number }, value: any[] }, index: number) => {
                    if (action && item['userMpAccounts']?.length > 0) {
                        action = false
                        checkData(getAllOfMember?.data[index]?.key?.nickname + getAllOfMember?.data[index]['key']['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='自己' key='自己'>
                {!isHideMyGroup && <div style={{ width: `${bWith ? '100%' : 200}` }}>
                    <Select style={{ minWidth: 150 }} placeholder="输入搜索公众号" onChange={inputChange} showArrow showSearch allowClear>
                        {
                            getWxGroupAll?.data?.map((item: any) => {
                                return item?.mpAccounts?.map((list: any) => {
                                    return <Option key={list.nickName + '_' + item.groupName} value={item.nickName} disabled={list?.verifyTypeInfo === -1}>
                                        <img src={list?.headImg || localStorage?.bookImg} className={style.img} />  {list.nickName}
                                    </Option>
                                })
                            })
                        }
                    </Select>
                </div>
                }
                {!isHideMyGroup && <Menu
                    onClick={menuItemClick}
                    style={{ width: `${bWith ? '100%' : 200}`, height: props.height ? props.height : `${bWith ? '40' : 'calc(100vh - 390px)'} `, overflowY: 'auto', overflowX: 'hidden', borderRight: 0, backgroundColor: 'transparent' }}
                    selectedKeys={selectedKeys}
                    mode={"inline"}
                >
                    {
                        props?.default && <Menu.Item key="all" icon={<QrcodeOutlined />}>全部公众号材料</Menu.Item>
                    }
                    {
                        getWxGroupAll?.data?.map((item: any) => {
                            return <Menu.Item
                                key={item?.groupName}
                            >
                                <p style={{ margin: 0 }}>
                                    {item?.mpAccounts?.some((mp: { appid: string }) => actionArr?.some((arr: { appid: string }) => mp.appid === arr.appid)) ? <i style={{ fontStyle: 'normal', color: 'red' }}>*</i> : ''}
                                    {item?.groupName}
                                    <span style={{ color: '#999' }}>({item?.mpAccounts?.length || 0})</span>
                                </p>
                            </Menu.Item >
                        })
                    }
                </Menu>}
            </Tabs.TabPane>
            {
                getAllOfMember?.data?.length > 0 && <Tabs.TabPane tab='组员' key='组员'>
                    <div style={{ width: `${bWith ? '100%' : 200}` }}>
                        <Select style={{ minWidth: 150 }} placeholder="输入搜索公众号" onChange={inputChange} showArrow showSearch allowClear>
                            {
                                getAllOfMember?.data?.map((item: { key: { nickname: string, userId: number }, value: any[] }) => {
                                    return item?.value?.map((list: any) => {
                                        return <Option key={item?.key?.nickname + '_' + list?.id} value={list?.nickName + '_' + item?.key?.nickname + item?.key?.userId} disabled={list?.verifyTypeInfo === -1}>
                                            <img src={list?.headImg || localStorage?.bookImg} className={style.img} /> {list?.nickName}
                                        </Option>
                                    })
                                })
                            }
                        </Select>
                    </div>
                    <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: { key: { nickname: string, userId: number }, value: any[] }) => {
                                return <Menu.Item
                                    key={item?.key?.nickname + item?.key?.userId}
                                >
                                    <p onClick={() => { handelUserId(item?.key?.userId?.toString(), item?.key?.nickname) }} style={{ margin: 0 }}>
                                        {item?.value?.some((mp: { appid: string }) => actionArr?.some((arr: { appid: string }) => mp.appid === arr.appid)) ? <i style={{ fontStyle: 'normal', color: 'red' }}>*</i> : ''}
                                        {item?.key?.nickname}
                                        <span style={{ color: '#999' }}>({item?.value?.length})</span>
                                    </p>
                                </Menu.Item >
                            })
                        }
                    </Menu>
                </Tabs.TabPane>
            }
        </Tabs>
    </div >
}

export default LeftPage