qc-EnterpriseWeChat-Pro/src/pages/weComTask/page/groupChat/create/components/groupUser/index.tsx

import React, { useContext, useState } from 'react';
import style from '../../../../businessPlan/create/index.less'
import useNewToken from '@/Hook/useNewToken';
import { App, Button, Empty } from 'antd';
import { DispatchGroupChatCreate } from '../..';
import SettingsGroupUser from './settingsGroupUser';
import PreviewGroupUser from './previewGroupUser';


/**
 * 进群对象
 * @returns 
 */
const GroupUser: React.FC = () => {

    /*********************************/
    const { message } = App.useApp()
    const { token } = useNewToken()
    const { setSettings, settings, onPreviewReset, bookPlatForm, bookList } = useContext(DispatchGroupChatCreate)!;
    const [newVisible, setNewVisible] = useState<boolean>(false);
    /*********************************/


    return <>
        <div className={`${style.settingsBody_content_row}`} style={{ width: '65%' }}>
            <div className={`${style.settingsBody_content_col}`} style={{ width: '100%' }}>
                <div className={style.title}>
                    <span>群</span>
                    {settings?.strategyDTO?.strategyList?.every(item => item?.groupObjectList?.length > 0) && <a
                        style={{ color: 'red' }}
                        onClick={() => {
                            setSettings({
                                ...settings,
                                strategyDTO: {
                                    ...settings.strategyDTO,
                                    strategyList: settings.strategyDTO.strategyList.map(item => ({
                                        ...item,
                                        groupObjectList: []
                                    }))
                                }
                            });
                        }}
                    >清空</a>}
                </div>
                <div className={style.detail}>
                    <div className={style.detail_title}>群配置</div>
                    <div className={style.detail_body}>
                        {settings?.strategyDTO && Object.keys(settings?.strategyDTO).length > 0 ? <PreviewGroupUser
                            strategyList={settings?.strategyDTO?.strategyList || []}
                            bookList={bookList}
                            bookPlatForm={bookPlatForm}
                        /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                    </div>
                </div>
                <div className={style.detail_footer}>
                    {settings?.strategyDTO && Object.keys(settings?.strategyDTO).length > 0 ?
                        <Button type="link" style={{ padding: 0, fontSize: 12, color: token.colorPrimary }} size="small" onClick={() => setNewVisible(true)}>编辑</Button> :
                        <Button type="link" style={{ padding: 0, fontSize: 12, color: token.colorPrimary }} size="small" onClick={() => message.error('请先编辑群聊创建策略')}>编辑</Button>}
                </div>
            </div>
        </div>

        {/* 配置群聊创建进群对象 */}
        {newVisible && <SettingsGroupUser
            visible={newVisible}
            onClose={() => setNewVisible(false)}
            onChange={(values) => {
                setSettings({
                    ...settings,
                    strategyDTO: values
                });
                onPreviewReset();
                setNewVisible(false);
            }}
            value={settings?.strategyDTO}
        />}
    </>
};

export default React.memo(GroupUser);