import React from 'react';
import { businessPlanData, welcomeContentData } from '../../const';
import LookMsg from '@/pages/weComTask/components/previewMsg/lookMsg';

interface Props {
    welcomeMsgTemplateDTO: { [x: string]: any }
    bookPlatForm: {
        platformName: string;
        id: number;
        platformKey: string;
    }[]
    bookList: {
        id: number;
        bookName: string;
        platformId: number;
    }[]
}
const PreviewWelcome: React.FC<Props> = ({ welcomeMsgTemplateDTO, bookPlatForm, bookList }) => {

    /*******************************************/
    const { welcomeName, welcomeMsgTagDTO, sendMode, mediaContentList } = welcomeMsgTemplateDTO || {}
    /*******************************************/

    return <>
        <h3>基础信息配置</h3>
        <p>欢迎语标题：{welcomeName}</p>
        <h3 style={{ marginTop: 5 }}>智能标签配置</h3>
        <p>业务（来源渠道）：{welcomeMsgTagDTO?.business ? businessPlanData.find(i => i.value === welcomeMsgTagDTO.business)?.label : '--'}</p>
        <p>书城（来源渠道）：{welcomeMsgTagDTO?.bookCity ? bookPlatForm.find(i => i.id == welcomeMsgTagDTO.bookCity)?.platformName : '--'}</p>
        <p>产品（来源渠道）：{welcomeMsgTagDTO?.business ? bookList.find(i => i.id == welcomeMsgTagDTO.product)?.bookName : '--'}</p>

        <h3 style={{ marginTop: 5 }}>内容配置</h3>
        <p style={{ fontWeight: 'bold', color: '#000' }}>内容组发送模式：{welcomeContentData.find(i => i.value === sendMode)?.label}</p>
        {mediaContentList?.map((item, index) => <div key={index} style={{ marginTop: 5, backgroundColor: '#f1f1f1', borderRadius: 6, padding: '5px 10px 16px' }}>
            <h3 style={{ textAlign: 'center' }}>内容{index + 1}</h3>
            <LookMsg data={item || []} />
        </div>)}
    </>;
};

export default React.memo(PreviewWelcome);