qc-EnterpriseWeChat-Pro/src/pages/weComTask/page/moments/create/components/content/index.tsx

import useNewToken from '@/Hook/useNewToken';
import React, { useContext, useState } from 'react';
import style from '../../../../businessPlan/create/index.less'
import { DispatchMomentsTaskCreate } from '../..';
import { App, Button, Empty } from 'antd';
import SettingsContent from './settingsContent';
import PreviewMomentsContent from './previewMomentsContent';

const Content: React.FC = () => {

    /*******************************************/
    const { token } = useNewToken()
    const { message } = App.useApp()
    const { setSettings, settings, onPreviewReset } = useContext(DispatchMomentsTaskCreate)!;
    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>
                </div>
                <div className={style.detail}>
                    <div className={style.detail_title}>朋友圈内容配置</div>
                    <div className={style.detail_body}>
                        {settings?.massSendingStrategy && Object.keys(settings?.massSendingStrategy).length > 0 ? <>
                            <PreviewMomentsContent
                                strategyList={settings?.massSendingStrategy?.strategyList || []}
                            />
                        </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                    </div>
                </div>
                <div className={style.detail_footer}>
                    <Button
                        type="link"
                        style={{ padding: 0, fontSize: 12, color: token.colorPrimary }}
                        size='small'
                        onClick={() => {
                            if (!(settings?.massSendingStrategy && Object.keys(settings?.massSendingStrategy))) {
                                message.error('请先配置策略')
                                return
                            }
                            setNewVisible(true);
                        }}
                    >编辑</Button>
                </div>
            </div>
        </div>

        {/* 配置朋友圈对象 */}
        {newVisible && <SettingsContent
            visible={newVisible}
            onClose={() => setNewVisible(false)}
            onChange={(values) => {
                const corpUsers = settings?.corpUsers?.map(item => {
                    delete item?.groupMsgContent
                    return item
                })
                setSettings({
                    ...settings,
                    corpUsers,
                    massSendingStrategy: values
                });
                onPreviewReset();
                setNewVisible(false);
            }}
            value={settings?.massSendingStrategy}
        />}
    </>;
};

export default Content;