import { Card, Tabs } from "antd"
import React, { useEffect, useState } from "react"
import { useModel } from "umi"
import Monitor from "./monitor"
import AdPlanList from "./adPlanList"
import TabDynamic from "./TabDynamic"

const AdMonitorListV3: 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)
        }}
            items={[
                {label: '今日起量广告监控', key: 'monitor'},
                {label: '广告列表', key: 'list'},
                {label: '创意列表', key: 'dynamic'},
            ]}
        />
        {tab === 'monitor' ? 
            <Monitor onChange={() => { setTab('list') }} /> : 
            tab === 'list' ? <Card bodyStyle={{ padding: '12px 16px' }}><AdPlanList userId={userId} /></Card> :
            <TabDynamic />
        }
    </div>
}

export default AdMonitorListV3