import { Button, Select, Space } from "antd";
import { observer, inject } from "mobx-react";
import { toJS } from "mobx";
import { useEffect } from "react";
interface GlobalHeaderProps {
    children?: JSX.Element,
    store?: any
}
function GlobalHeader(props: GlobalHeaderProps) {
    const { data} = props.store
    const { corpIds, active_corpIds } = toJS(data)
    let { children } = props
    useEffect(() => {
        if (active_corpIds) {
           props.store.setTagsList()
        }
    }, [active_corpIds,data])
   
    return <div>
        <Space.Compact>
            <Select
                showSearch
                style={{ width: 140 }}
                // allowClear
                onChange={(values, option) => {
                    props.store.setActiveCorpIds(values, option)
                }}
                placeholder="企微列表"
                filterOption={(input, option) =>
                    ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
                }
                value={active_corpIds || undefined}
                options={corpIds}

            />
            {corpIds?.length === 0 && <Button type='primary' onClick={() => { props.store.getCorpIds('refresh') }}>重新获取列表</Button>}
        </Space.Compact>
        <Space style={{ marginLeft: 20 }}>
            {children}
        </Space>
    </div>
}
export default inject('store')(observer((props: GlobalHeaderProps) => GlobalHeader({ children: props.children, store: props.store.weGlobaStore }))) 