import { Card, Tabs } from 'antd';
import React from 'react';
import '../../../tencentAdPutIn/index.less'
import Group from './components/group';
import SelectAdAccount from '@/components/SelectAdAccount';
import PageTieUp from './components/pageTieUp';
import LandingPageTieUp from './components/landingPageTieUp';
import TencentGroup from './components/tencentGroup';

/**
 * 客服管理
 * @returns 
 */
const EnterpriseWechat: React.FC = () => {

    /**********************************/
    const [adAccountId, setAdAccountId] = React.useState<number>();
    /**********************************/

    return <Card
        className="cardResetCss"
    >
        <div className="flexStart" style={{ gap: 8, marginBottom: 16 }}>
            <SelectAdAccount
                isReturnFirstValue
                value={adAccountId ? [adAccountId] : undefined}
                type="radio"
                onChange={(value) => {
                    setAdAccountId(value as number)
                }}
                allowClear={false}
            />
        </div>
        
        <Tabs
            items={[
                { label: '客服组', key: '1', children: <Group adAccountId={adAccountId} /> },
                { label: '腾讯客服组', key: '2', children: <TencentGroup adAccountId={adAccountId} /> },
                { label: '官方落地页与客服组关系', key: '3', children: <PageTieUp adAccountId={adAccountId} /> },
                { label: '原生落地页与客服组关系', key: '4', children: <LandingPageTieUp adAccountId={adAccountId} /> },
            ]}
            size="small"
        />
    </Card>
};

export default EnterpriseWechat;