import { Tabs } from 'antd';
import React, { useEffect, useState } from 'react';
import AstraSupport from './astraSupport‌';
import AstraGroup from './astraGroup';
import { getLocalCorpCsgroupListAllApi } from '@/services/adqV3/global';
import { useAjax } from '@/Hook/useAjax';
import AstraMsg from './astraMsg';

/**
 * 企微客服组监控
 * @returns 
 */
const MonitorEWList: React.FC = () => {

    const [currentTab, setCurrentTab] = React.useState<string>('hao');
    const [localCorpCsgroupList, setLocalCorpCsgroupList] = useState<{ label: string, value: string, type: 0 | 1 }[]>([]);

    const getLocalCorpCsgroupListAll = useAjax((params) => getLocalCorpCsgroupListAllApi(params))

    useEffect(() => {
        getLocalCorpCsgroupListAll.run({}).then((res) => {
            if (res && res.length > 0) {
                setLocalCorpCsgroupList(res.map((item: { csgroupName: string; id: string; type: 0 | 1 }) => ({ label: item.csgroupName, value: item.id, type: item.type })));
            }
        })
    }, [])

    return <Tabs
        type="card"
        activeKey={currentTab}
        onChange={(key) => setCurrentTab(key)}
        tabBarStyle={{ marginBottom: 2 }}
        items={[
            {
                label: '客服号加粉数据',
                key: 'hao',
                children: <>
                    {currentTab === 'hao' && <AstraSupport localCorpCsgroupList={localCorpCsgroupList} />}
                </>
            },
            {
                label: '客服号消息数据',
                key: 'msg',
                children: <>
                    {currentTab === 'msg' && <AstraMsg localCorpCsgroupList={localCorpCsgroupList} />}
                </>
            },
            {
                label: '客服组加粉数据',
                key: 'zu',
                children: <>
                    {currentTab === 'zu' && <AstraGroup localCorpCsgroupList={localCorpCsgroupList} />}
                </>
            }
        ]}
    />
};

export default MonitorEWList;