import { Space, Statistic, Image, Badge, Tooltip } from 'antd'
// import ImgCrop from 'antd-img-crop'
import { ColumnsType } from 'antd/lib/table'
import { SortOrder } from 'antd/lib/table/interface'
import React from 'react'
import style from './index.less'

function fcolumns(openVideo?: (url: string)=> void) {
    return function columns(props?: { sortOrder?: { columnKey: string, order: SortOrder | undefined } }) {
        let newArr: ColumnsType<any> = [
            {
                title: '日期',
                dataIndex: 'dt',
                key: 'dt',
                align: 'center',
                width: 80,
                fixed: 'left',
                sorter: true,
                sortOrder: (props?.sortOrder?.columnKey === 'dt' && props?.sortOrder?.order) || undefined,
            },
            {
                title: '图片预览',
                dataIndex: 'preview_url',
                key: 'preview_url',
                align: 'center',
                width: 65,
                render: (url: string, b: any) => {
                    let urls = url?.replace(/\s/g,"")?.split(',')
                    let links: string[] = []
                    urls?.forEach((item: string) => {
                        if(item) {
                            links.push(item)
                        }
                    })
                    return <Space style={{ display: 'flex', flexFlow: 'row wrap', justifyContent: 'center', }} className={style.img}>
                        {
                            b?.is_video === 1 ? <div>
                                <video src={url} style={{width: 60, height: 30}} onClick={()=>{openVideo && openVideo(url)}}></video>
                            </div> :  links?.length > 0 ? <Image.PreviewGroup>
                                {
                                    links?.map((a, b) => {
                                        return <Badge count={links?.length > 1 ? links?.length : ''} style={b > 0 ? { display: 'none' } : {}} size='small'>
                                            {a && <Image src={a} preview key={b} alt="123" style={b > 0 ? { display: 'none' } : { width: 'auto', zIndex: 100 }} height={28} />}
                                        </Badge>
                                    })
                                }
                            </Image.PreviewGroup> : '（空）'
                        }
                        
                    </Space>
                }
            },
            {
                title: '素材类型',
                dataIndex: 'is_video',
                key: 'is_video',
                align: 'center',
                width: 40,
                render: (a: any) => {
                    return <span className={style.ellipsis}>{a === 1 ? '视频' : '图片'}</span>
                }
            },
            {
                title: '标题',
                dataIndex: 'title',
                key: 'title',
                align: 'center',
                width: 180,
                // ellipsis: true
                // sorter:true,
                render: (a: any) => {
                    return <Tooltip placement="top" title={a} arrowPointAtCenter>
                        <span className={style.ellipsis}>{a}</span>
                    </Tooltip>
                }
            },
            {
                title: '文案描述',
                dataIndex: 'description',
                key: 'description',
                align: 'center',
                width: 100,
                ellipsis: true
                // sorter:true,
                // render:(a:any)=>{
                //     return <Statistic  value={a || 0}  />
                // }
            },
            {
                title: '公众号',
                dataIndex: 'channel',
                key: 'channel',
                align: 'center',
                width: 90,
                // fixed: 'left',
                // ellipsis: true
            },
            {
                title: '归属人',
                dataIndex: 'owner',
                key: 'owner',
                align: 'center',
                width: 85,
                // fixed: 'left',
            },
            {
                title: '投手',
                dataIndex: 'pitcher',
                key: 'pitcher',
                align: 'center',
                width: 85,
                // fixed: 'left',
            },
            // {
            //     title: '期数',
            //     dataIndex: 'stage',
            //     key: 'stage',
            //     align: 'center',
            //     width: 85,
            //     // fixed: 'left',
            // },
            {
                title: '平台',
                dataIndex: 'platform',
                key: 'platform',
                align: 'center',
                width: 60
            },
            {
                title: '主投书',
                dataIndex: 'book',
                key: 'book',
                width: 130,
                align: 'center',
                // fixed: 'left',
                // ellipsis: true
            },
            // {
            //     title: '广告名称',
            //     dataIndex: 'ad_name',
            //     key: 'ad_name',
            //     width: 90,
            //     align: 'center'
            // },
            // {
            //     title: '广告ID',
            //     dataIndex: 'ad_id',
            //     key: 'ad_id',
            //     width: 90,
            //     align: 'center',
            //     // fixed: 'left',
            //     // ellipsis: true
            // },
            {
                title: '投放位置',
                dataIndex: 'type',
                key: 'type',
                width: 40,
                align: 'center',
                // fixed: 'left',
            },
            // {
            //     title: '广告位',
            //     dataIndex: 'site',
            //     key: 'site',
            //     width: 40,
            //     align: 'center',
            //     // fixed: 'left',
            // },
            {
                title: '消耗',
                dataIndex: 'cost',
                key: 'cost',
                align: 'center',
                width: 90,
                sorter: true,
                sortOrder: (props?.sortOrder?.columnKey === 'cost' && props?.sortOrder?.order) || undefined,
                render: (a: number) => {
                    return <Statistic value={a || 0} className={`${a > 3000 && style.showred}`} />
                },
            },
            {
                title: '曝光次数',
                dataIndex: 'view_count',
                key: 'view_count',
                align: 'center',
                width: 85,
                sorter: true,
                sortOrder: (props?.sortOrder?.columnKey === 'view_count' && props?.sortOrder?.order) || undefined,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '点击次数',
                dataIndex: 'click_count',
                key: 'click_count',
                align: 'center',
                width: 85,
                sorter: true,
                sortOrder: (props?.sortOrder?.columnKey === 'click_count' && props?.sortOrder?.order) || undefined,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '公众号关注次数',
                dataIndex: 'follow_count',
                key: 'follow_count',
                align: 'center',
                width: 85,
                sorter: true,
                sortOrder: (props?.sortOrder?.columnKey === 'follow_count' && props?.sortOrder?.order) || undefined,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '千次曝光成本',
                dataIndex: 'cpm',
                key: 'cpm',
                align: 'center',
                width: 85,
                sorter: true,
                sortOrder: (props?.sortOrder?.columnKey === 'cpm' && props?.sortOrder?.order) || undefined,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '关注成本',
                dataIndex: 'follow_cost',
                key: 'follow_cost',
                align: 'center',
                width: 60,
                sorter: true,
                sortOrder: (props?.sortOrder?.columnKey === 'follow_cost' && props?.sortOrder?.order) || undefined,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '点击率',
                dataIndex: 'ctr',
                key: 'ctr',
                align: 'center',
                width: 85,
                sorter: true,
                sortOrder: (props?.sortOrder?.columnKey === 'ctr' && props?.sortOrder?.order) || undefined,
                render: (a: number) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return <span style={a <= 8 ? { color: '#0f990f', fontWeight: 600 } : a >= 100 ? { color: 'red', fontWeight: 600 } : {}}> {a + '%'}</span >
                },
            },
            {
                title: '点击均价',
                dataIndex: 'cpc',
                key: 'cpc',
                align: 'center',
                width: 85,
                sorter: true,
                sortOrder: (props?.sortOrder?.columnKey === 'cpc' && props?.sortOrder?.order) || undefined,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '下单量',
                dataIndex: 'order_count',
                key: 'order_count',
                align: 'center',
                width: 85,
                sorter: true,
                sortOrder: (props?.sortOrder?.columnKey === 'order_count' && props?.sortOrder?.order) || undefined,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '下单金额',
                dataIndex: 'order_amount',
                key: 'order_amount',
                align: 'center',
                width: 90,
                sorter: true,
                sortOrder: (props?.sortOrder?.columnKey === 'order_amount' && props?.sortOrder?.order) || undefined,
                filters: [
                    {
                        text: '非零',
                        value: '{"has_order": 1}',
                    }
                ],
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '下单率',
                dataIndex: 'order_rate',
                key: 'order_rate',
                align: 'center',
                width: 85,
                sorter: true,
                sortOrder: (props?.sortOrder?.columnKey === 'order_rate' && props?.sortOrder?.order) || undefined,
                render: (a: number) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return <span style={a <= 8 ? { color: '#0f990f', fontWeight: 600 } : a >= 100 ? { color: 'red', fontWeight: 600 } : {}}> {a + '%'}</span >
                },
            },
            {
                title: '下单客单价',
                dataIndex: 'unit_price',
                key: 'unit_price',
                align: 'center',
                width: 98,
                sorter: true,
                sortOrder: (props?.sortOrder?.columnKey === 'unit_price' && props?.sortOrder?.order) || undefined,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '下单成本',
                dataIndex: 'order_cost',
                key: 'order_cost',
                align: 'center',
                width: 85,
                sorter: true,
                sortOrder: (props?.sortOrder?.columnKey === 'order_cost' && props?.sortOrder?.order) || undefined,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '回收率',
                dataIndex: 'roi',
                key: 'roi',
                align: 'center',
                width: 85,
                sorter: true,
                sortOrder: (props?.sortOrder?.columnKey === 'roi' && props?.sortOrder?.order) || undefined,
                render: (a: number) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return <span style={a <= 8 ? { color: '#0f990f', fontWeight: 600 } : a >= 100 ? { color: 'red', fontWeight: 600 } : {}}> {a + '%'}</span >
                },
            },
    
            {
                title: '图片id',
                dataIndex: 'image_id',
                key: 'image_id',
                align: 'center',
                width: 90,
                ellipsis: true
                // sorter:true,
                // render:(a:any)=>{
                //     return <Statistic  value={a || 0}  />
                // }
            },
    
    
        ]
        return newArr
    }
}
export { fcolumns }