import React from "react"
import { Space, Typography } from "antd"
import style from '../tencentAdPutIn/create/index.less'
import styles from '../tencentAdPutIn/create/Material/index.less'
import VideoNews from "@/pages/launchSystemNew/components/newsModal/videoNews";

const { Text, Title } = Typography;

function cpTableConfig(): any {
    return [
        {
            title: '品牌形象',
            dataIndex: 'brand',
            key: 'brand',
            width: 120,
            ellipsis: true,
            render: (a: any[]) => {
                return a?.length > 0 ? <Space>
                    <img src={a?.[0]?.value?.brandImageUrl} height={18} />
                    <span>{a?.[0]?.value?.brandName}</span>
                </Space> : '--'
            }
        },
        {
            title: '创意素材',
            dataIndex: 'dynamicGroup',
            key: 'dynamicGroup',
            width: 400,
            ellipsis: true,
            render: (_: any, b: any) => {
                let deliveryMode = b?.deliveryMode
                if (b?.image || b?.video || b?.shortVideo || b?.elementStory || b?.imageList) {
                    if (deliveryMode === "DELIVERY_MODE_CUSTOMIZE") {
                        return <>
                            <div className={style.detail_body_m}>
                                {(b?.video || b?.shortVideo) ? <>
                                    <div className={style.video}>
                                        <VideoNews src={b?.video?.[0]?.value?.videoUrl || b?.shortVideo?.[0]?.value?.videoUrl} />
                                    </div>
                                </> : b?.image ? <>
                                    <div className={style.cover_image}>
                                        <img src={b?.image?.[0]?.value?.imageUrl} />
                                    </div>
                                </> : (b?.elementStory || b?.imageList) ? <>
                                    {b?.[b?.imageList ? 'imageList' : 'elementStory']?.[0]?.value?.list?.map((item: { imageUrl: string }, index: undefined) => <div className={style.cover_image} key={index} style={{ width: 30, height: 24, minWidth: 32 }}>
                                        <img src={item?.imageUrl} />
                                    </div>)}
                                </> : null}
                            </div>
                        </>
                    } else {
                        return <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
                            {b?.imageList && b?.imageList.map((item: any, index: number) => {
                                return <div className={styles.boxList_body_item} key={'list' + index} style={{ width: 60, height: 60 }}>
                                    <div className={styles.content} style={{ width: 60, height: 60 }}>
                                        {item?.value?.list?.map((u: { imageUrl: string }, i: number, data: any[]) => <img src={u?.imageUrl} key={i} style={{ width: data.length === 6 ? 9.999 : 14.999 }} />)}
                                    </div>
                                </div>
                            })}
                            {b?.video && b?.video.map((item: any, index: number) => {
                                return <div className={styles.boxList_body_item} key={'video' + index} style={{ width: 60, height: 60 }}>
                                    <div className={styles.content} style={{ width: 60, height: 60 }}>
                                        <VideoNews src={item?.value?.videoUrl} style={{ width: 60, height: 60 }} maskBodyStyle={{ backgroundColor: "rgba(242, 246, 254, 0.1)" }} />
                                    </div>
                                </div>
                            })}
                            {b?.image && b?.image.map((item: any, index: number) => {
                                return <div className={styles.boxList_body_item} key={'image' + index} style={{ width: 60, height: 60 }}>
                                    <div className={styles.content} style={{ width: 60, height: 60 }}><img src={item?.value?.imageUrl} /></div>
                                </div>
                            })}
                        </div>
                    }
                } else {
                    return <Text style={{ fontSize: 12 }}>无需配置</Text>
                }
            }
        },
        {
            title: '创意文案',
            dataIndex: 'description',
            key: 'description',
            width: 200,
            render: (a: any[] = [], b: any) => {
                let title: any[] = b?.title || []
                if (a?.length || title?.length) {
                    return <div className={style.detail_body} style={{ height: 'auto' }}>
                        {title?.length > 0 && <div>
                            <Title level={5} style={{ fontSize: 12 }}>{'标题'}</Title>
                            {title.map((t: any, index: number) => <div className={style.text} key={index}><Text ellipsis={{ tooltip: true }}>{t?.value?.content}</Text></div>)}
                        </div>}
                        {a?.length > 0 && <div>
                            <Title level={5} style={{ fontSize: 12 }}>{'描述'}</Title>
                            {a.map((t: any, index: number) => <div className={style.text} key={index}><Text ellipsis={{ tooltip: true }}>{t?.value?.content}</Text></div>)}
                        </div>}
                    </div>
                } else {
                    return '--'
                }
            }
        },
        
        // {
        //     title: '轮播',
        //     dataIndex: 'floatingZone',
        //     key: 'floatingZone',
        //     width: 150,
        //     ellipsis: true,
        //     render: (a: any[]) => {
        //         return a?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto' }}>
        //             {a?.map((item, index) => <div key={index} style={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        //                 <div style={{ width: 40 }}>
        //                     <Image src={item?.value?.floatingZoneImageUrl} width={40} height={40} />
        //                 </div>
        //                 <div>
        //                     <span>{item?.value?.floatingZoneName}</span><br />
        //                     <span>{item?.value?.floatingZoneDesc}</span>
        //                 </div>
        //             </div>)}
        //         </div> : '--'
        //     }
        // },
    ]
}
export default cpTableConfig