import Ad from "@/pages/launchSystemNew/adq/ad"
import { Card, Select, Tabs } from "antd"
import React, { useEffect, useState } from "react"
import { useModel } from "umi"
import Monitor from "./monitor"
import PlanList from "./planList"


const AdMonitorList: React.FC = () => {
    // 变量开始
    const [tab, setTab] = useState<string>('monitor')  // tab切换
    const { getPlanList, getPlanDetailList, getAllPlanList } = useModel('useAdMonitor.useMonitor')
    const [userId, setUserId] = useState(localStorage.getItem("userId") as string)
    const { getPicherList } = useModel('useOperating.useWxGroupList')
    // 变量结束
    // 获取投手
    useEffect(() => {
        !getPicherList.data && getPicherList.run()
    }, [])
    return <div className="adMonitorList">
        <Tabs activeKey={tab} className="adMonitorListTab" size="small" type="card" onChange={(activeKey: string) => {
            if (activeKey === 'monitor') {
                getAllPlanList.data && getAllPlanList.mutate([])
            } else {
                getPlanList.data && getPlanList.mutate([])
                getPlanDetailList.data && getPlanDetailList.mutate([])
            }
            setTab(activeKey)
        }}>
            <Tabs.TabPane tab="今日起量广告监控" key="monitor" />
            <Tabs.TabPane tab="广告列表" key="list" />
            <Tabs.TabPane tab="广告列表2" key="list2" />
        </Tabs>
        {tab === 'monitor' ? <Monitor onChange={() => { setTab('list') }} /> : tab === 'list' ? <PlanList /> : <Card><Ad userId={userId}  Ts={()=>{
            return <Select
            showSearch
            value={userId ? Number(userId) : undefined}
            style={{ minWidth: 180, maxWidth: 250 }}
            maxTagCount={1}
            allowClear
            placeholder="请选择投手"
            // disabled={queryForm?.adgroup || queryForm?.accountId?.length > 0}
            onChange={(value) => {
                    setUserId(value?.toString() || '')
            }}
            filterOption={(input, option) =>
                (option?.children as any).toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
        >
            {getPicherList?.data?.map((item: { nickname: string, userId: number }, index: number) =>
                <Select.Option
                    value={item.userId}
                    key={item.userId + '' + index}
                >
                    {item.nickname}
                </Select.Option>
            )}
        </Select>
        }}/></Card>}
    </div>
}

export default AdMonitorList