import { Tooltip, Image } from "antd"
import React from "react"
import style from './index.less'
import moment from "moment";
import dic from "./components/Dic"
let columns = (out_material_use_canvas_top?: number, crt_size?: number) => {

    let cardColumns: any[] = [
        {
            title: crt_size === 538 ? '广告位视频' : '创意文案/广告位图片',
            dataIndex: 'idea',
            key: 'idea',
            align: 'center',
            width: 250,
            render: (a: any, b: any) => {
                return <div className={style.twoText}>
                    {b?.localtion === 999 ? <Tooltip title={a?.content}>
                        <span style={{ fontSize: "12px" }}>{a?.content}</span>
                    </Tooltip> : b?.localtion === 0 || b?.localtion === 101 ? crt_size === 538 ? <video width={45} src={a?.crt_info?.short_video?.video_url} style={{ borderRadius: 8, overflow: 'hidden' }} /> : <Image width={45} src={a.crt_info.image_url} style={{ borderRadius: 4, overflow: 'hidden' }} /> : <></>}
                </div>
            }
        }
    ]
    if (crt_size && crt_size === 1707) {
        cardColumns = [
            {
                title: '外层文案标题',
                dataIndex: 'idea',
                key: 'idea',
                align: 'center',
                width: 200,
                render: (a: any, b: any) => {
                    return <div className={style.twoText}>
                        <Tooltip title={a?.title}>
                            <span style={{ fontSize: "12px" }}>{a?.title}</span>
                        </Tooltip>
                    </div>
                }
            },
            {
                title: '外层文案标题',
                dataIndex: 'idea',
                key: 'idea',
                align: 'center',
                width: 250,
                render: (a: any, b: any) => {
                    return <div className={style.twoText}>
                        <Tooltip title={a?.content}>
                            <span style={{ fontSize: "12px" }}>{a?.content}</span>
                        </Tooltip>
                    </div>
                }
            },
            {
                title: '外层素材',
                dataIndex: 'idea',
                key: 'idea',
                align: 'center',
                width: 100,
                render: (a: any, b: any) => {
                    return <span>{a?.out_material_use_canvas_top === 1 ? '使用原生推广页顶部素材' : '上传素材'}</span>
                }
            }
        ]
        if (out_material_use_canvas_top === 0) {
            cardColumns.push({
                title: '外层图片',
                dataIndex: 'idea',
                key: 'idea',
                align: 'center',
                width: 130,
                render: (a: any, b: any) => {
                    return <Image width={45} src={a.crt_info.image_url} style={{ borderRadius: 4, overflow: 'hidden' }} />
                }
            })
        }
    }

    return [
        {
            title: '服务商',
            dataIndex: 'service_name',
            key: 'service_name',
            align: 'center',
            width: 200,
            render: (a: any, b: any) => {
                return <span style={{ fontSize: "12px" }}>{a}</span>
            }
        },
        {
            title: '公众号',
            dataIndex: 'wechat_name',
            key: 'wechat_name',
            align: 'center',
            width: 100,
            render: (a: any, b: any) => {
                return <span style={{ fontSize: "12px" }}>{a}</span>
            }
        },
        {
            title: '推广计划名称',
            dataIndex: 'title',
            key: 'title',
            align: 'center',
            width: 110,
            render: (a: any, b: any) => {
                return <div className={style.twoText}>
                    <Tooltip title={a}>
                        <span style={{ fontSize: "12px" }}>{a}</span>
                    </Tooltip>
                </div>
            }
        },
        {
            title: '推广目标',
            dataIndex: 'tg_target',
            key: 'tg_target',
            align: 'center',
            width: 120,
            render: (a: any, b: any) => {
                return <span style={{ fontSize: "12px" }}>{dic.promotionTarget[a] || ''}</span>
            }
        },
        {
            title: '推广位置',
            dataIndex: 'localtion',
            key: 'localtion',
            align: 'center',
            width: 120,
            render: (a: any, b: any) => {
                return <span style={{ fontSize: "12px" }}>{dic.localtion[a]}</span>
            }
        },
        {
            title: '广告形式',
            dataIndex: 'module',
            key: 'module',
            align: 'center',
            width: 110,
            render: (a: any, b: any) => {
                return <span style={{ fontSize: "12px" }}>{a}</span>
            }
        },
        {
            title: '投放日期',
            dataIndex: 'date_set',
            key: 'date_set',
            align: 'center',
            width: 200,
            render: (a: any, b: any) => {
                return <>{a?.date_module == 1
                    ? moment(a?.date_list[0] as number * 1000).format('YYYY-MM-DD HH:mm:ss') + '~' + moment(a?.date_list[1] as number * 1000).format('YYYY-MM-DD HH:mm:ss')
                    : moment(a?.date_list[0] as number * 1000).format('YYYY-MM-DD HH:mm:ss') + ' ~ 长期投放'}
                </>
            }
        },
        {
            title: '投放时段',
            dataIndex: 'date_set1',
            key: 'date_set1',
            align: 'center',
            width: 100,
            render: (a: any, b: any) => {
                return <span style={{ fontSize: "12px" }}>{b?.date_set?.day_time}</span>
            }
        },
        {
            title: '每日预算',
            dataIndex: 'cost1',
            key: 'cost1',
            align: 'center',
            width: 100,
            render: (a: any, b: any) => {
                return <span style={{ fontSize: "12px" }}>{b?.cost?.day_cost}</span>
            }
        },
        {
            title: '出价方式',
            dataIndex: 'cpm',
            key: 'cpm',
            align: 'center',
            width: 90,
            render: (a: any, b: any) => {
                return <span style={{ fontSize: "12px" }}>{a?.cpm_set}</span>
            }
        },
        {
            title: '出价',
            dataIndex: 'cost',
            key: 'cost',
            align: 'center',
            width: 100,
            render: (a: any, b: any) => {
                return <span style={{ fontSize: "12px" }}>{a?.bid}</span>
            }
        },
        {
            title: '创意名称',
            dataIndex: 'remark',
            key: 'remark',
            align: 'center',
            width: 120,
            render: (a: any, b: any) => {
                return <div className={style.twoText}>
                    <Tooltip title={b?.idea?.name}>
                        <span style={{ fontSize: "12px" }}>{b?.idea?.name}</span>
                    </Tooltip>
                </div>
            }
        },
        {
            title: '推广页名称',
            dataIndex: 'jump_type_page_type',
            key: 'jump_type_page_type',
            align: 'center',
            width: 120,
            render: (a: any, b: any) => {
                return <div className={style.twoText}>
                    <Tooltip title={b?.idea?.jump_type_page_type?.name}>
                        <span style={{ fontSize: "12px" }}>{b?.idea?.jump_type_page_type?.name}</span>
                    </Tooltip>
                </div>
            }
        },
        {
            title: '定向人群包名称',
            dataIndex: 'human_info_package',
            key: 'human_info_package',
            align: 'center',
            width: 200,
            render: (a: any, b: any) => {
                return <div className={style.twoText}>
                    {
                        (a['name'] && a['name']?.length > 0) ? <Tooltip title={a['name'].map((name: any, index: number) => {
                            return index + 1 < a['name'].length ? name + ',' : name
                        })}>
                            <span style={{ fontSize: "12px" }}>{a['name'].map((name: any, index: number) => {
                                return index + 1 < a['name'].length ? name + ',' : name
                            })}</span>
                        </Tooltip> : '<空>'
                    }

                </div>
            }
        },
        {
            title: '商品',
            dataIndex: 'human_info_goods',
            key: 'human_info_goods',
            align: 'center',
            width: 200,
            render: (a: any, b: any) => {
                if (a) {
                    let data = a?.data
                    if (data && data?.length > 0) {
                        return <span style={{ fontSize: "12px" }}>{data[0]?.productName + '-' + data[0]?.author}</span>
                    }
                    return '--'
                } else {
                    return '--'
                }

            }
        },
        // {
        //     title: '创意文案/广告位图片',
        //     dataIndex: 'idea',
        //     key: 'idea',
        //     align: 'center',
        //     width: 250,
        //     render: (a: any, b: any) => {
        //         return <div className={style.twoText}>
        //             {b?.localtion === 999 ? <Tooltip title={a?.content}>
        //                 <span style={{ fontSize: "12px" }}>{a?.content}</span>
        //             </Tooltip> : b?.localtion === 0 || b?.localtion === 101 ? <Image width={45} src={a.crt_info.image_url} style={{ borderRadius: 4, overflow: 'hidden' }} /> : <></>}
        //         </div>
        //     }
        // }
        ...cardColumns
    ]
}

export default columns