import { useAjax } from "@/Hook/useAjax"
import { IdcardFilled, MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons"
import { Select, Menu, Spin, Button, Card, Tabs } from "antd"
import React, { useEffect, useState } from "react"
import { useModel } from "umi"
import style from '../../launchSystemNew/adq/index.less'
import { getPicherListApi } from "@/services/operating/account"
import Ad from "./ad"
import Creative from "./creative"


const AdqV3: React.FC = () => {

    /****************************/
    const userInfo = useModel('@@initialState', model => model.initialState?.currentUser)
    const allOfMember = useAjax(() => getPicherListApi(), { formatResult: true })
    const [userAll, setUserAll] = useState([])
    const [activeKey, setActiveKey] = useState('1')
    const [userId, setUserId] = useState<any>(userInfo?.userId?.toString())
    const [hide, setHide] = useState<boolean>(false)
    const [queryForm, setQueryForm] = useState<ADQV3.GetDynamicCreativeProps>({ pageNum: 1, pageSize: 20, userId })
    /****************************/

    // 获取组员
    useEffect(() => {
        allOfMember.run().then(res => {
            if (res?.data) {
                let useAll: any = []
                res?.data?.forEach((item: { userId: number; nickname: any; }) => {
                    let obj = {
                        key: item.userId,
                        label: item.nickname,
                        icon: <IdcardFilled />,
                    }
                    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('myMenus1')
            console.log(topEq)
            if (em) {
                em.scrollTop = (52 - 4) * topEq
            }
        }
    }, [userId, userAll])

    const creativeHandle = (id: number) => {
        setQueryForm({ ...queryForm, adgroupId: id })
        setActiveKey('2')
    }

    return <div className={style.adq}>
        {!hide && <div className={style.left}>
            <Spin spinning={allOfMember.loading}>
                <div>
                    <Select
                        placeholder='名称搜索'
                        style={{ width: '100%' }}
                        showSearch
                        filterOption={(input: any, option: any) => {
                            return (option!?.children as unknown as string)?.toLowerCase()?.includes(input?.toLowerCase())
                        }}
                        allowClear
                        onChange={(value: any) => {
                            if (value) {
                                setUserId(value.toString())
                            }
                        }}
                        loading={allOfMember.loading}
                    >
                        {userAll.map((item: any) => {
                            return <Select.Option value={item.key} key={item.key}>{item.label}</Select.Option>
                        })}
                    </Select>
                    <Menu
                        id='myMenus1'
                        theme='light'
                        onClick={(e: any) => {//点击菜单
                            setUserId(e.key)
                        }}
                        selectedKeys={userId}
                        mode="inline"
                        multiple={false}
                        items={userAll}
                        style={{
                            overflowY: 'auto',
                            height: 'calc(100vh - 150px)',
                            overflowX: 'hidden'
                        }}
                    />
                </div>
            </Spin>
        </div>}
        <div className={style.right} style={!hide ? { width: 'calc(100% - 150px)' } : { width: '100%' }}>
            <div className={style.hiddenBtn}><Button size='small' type="primary" onClick={() => setHide(!hide)} icon={!hide ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />} /></div>
            <Card bodyStyle={{ padding: '12px 16px' }}>
                <Tabs activeKey={activeKey} size="small" type="card" onChange={(activeKey) => { setActiveKey(activeKey) }}>
                    <Tabs.TabPane tab={'广告'} key='1' >
                        <Ad userId={userId} creativeHandle={creativeHandle} />
                    </Tabs.TabPane>
                    <Tabs.TabPane tab={'创意'} key='2' >
                        <Creative queryForm={queryForm} setQueryForm={setQueryForm} userId={userId}/>
                    </Tabs.TabPane>
                </Tabs>
            </Card>
        </div>
    </div>
}

export default AdqV3