import React from 'react';
import style from '../massSending/index.less'
import { Tabs } from 'antd';
import useNewToken from '@/Hook/useNewToken';
import { welcomeContentData } from '../../const';
import LookPyq from '@/pages/weComTask/components/previewMsg/lookPyq';


interface ShowContentProps {
    strategySettings: any[];
    friendsContent?: { friendsContentDTO: any };
}

const ShowFriendsContent: React.FC<ShowContentProps> = ({ strategySettings, friendsContent }) => {

    /*************************************/
    const { token } = useNewToken()
    /*************************************/

    return <div className={style.showContent}>
        <Tabs
            tabPosition='left'
            className='mindTags'
            style={{ height: '100%', background: '#FFF' }}
            size='small'
            popupClassName={style.popupClassName}
            items={strategySettings?.map((item, index) => {

                const friendsContentDTO = friendsContent?.friendsContentDTO?.[index]
                return {
                    label: '策略' + (index + 1),
                    key: `${index}`,
                    children: <div className={style.showContent_content}>
                        <div style={{ backgroundColor: token.colorPrimary, padding: 4, color: '#FFF', fontSize: 12, marginBottom: 5 }}>
                            <div>策略名称：{item?.strategyName || '<空>'}</div>
                        </div>
                        {friendsContentDTO && <div>
                            <div style={{ backgroundColor: token.colorPrimary, padding: 4, color: '#FFF', fontSize: 12 }}>
                                <div>
                                    发送模式：{welcomeContentData?.find(i => i.value === friendsContentDTO?.sendMode)?.label}
                                </div>
                            </div>
                            {friendsContentDTO?.contentDTO?.map((item, index) => {
                                return <div key={index} style={{ marginTop: 5, backgroundColor: '#f1f1f1', borderRadius: 6, padding: '5px 10px 16px' }}>
                                    <h3 style={{ textAlign: 'center' }}>内容{index + 1}</h3>
                                    <LookPyq
                                        content={{ text: item?.text?.content, data: item?.attachmentList }}
                                    />
                                </div>
                            })}
                        </div>}
                    </div>
                }
            })}
        />
    </div>
};

export default React.memo(ShowFriendsContent);