import { Card, Tabs } from "antd"
import React, { useEffect, useState } from "react"
import { useModel } from "umi"
import Monitor from "./monitor1"
import AdPlanList from "@/pages/launchSystemNew/adq/ad/adPlanList"

const AdMonitorList: React.FC = () => {
    // 变量开始
    const [tab, setTab] = useState<string>('monitor')  // tab切换
    const { getPlanList, getPlanDetailList, getAllPlanList } = useModel('useAdMonitor.useMonitor')
    const [userId] = 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>
        {tab === 'monitor' ? <Monitor onChange={() => { setTab('list') }} /> : <Card bodyStyle={{ padding: '12px 16px' }}><AdPlanList userId={userId} /></Card>}
    </div>
}

export default AdMonitorList