import { Statistic, Tooltip, Image } from 'antd'
import React from 'react'
import moment from 'moment'
import './index.less'
import { ReactComponent as RocketSvg } from '@/assets/rocket.svg'
import { GOUMAILEIXING, GUANGGAOZHUANGTAI, TUIGUANGMUBIAO, CHUANGYIZHUANGTAI, YOUHUAMUBIAO } from './enum'
import Box from './components/box'
function columnsMonitor(details: (id: number) => void) {
    return function columns() {
        let newArr: any = [
            {
                title: '数据日期',
                dataIndex: 'dataTime',
                key: 'dataTime',
                align: 'center',
                width: 100,
                fixed: 'left',
                render: (a: any) => {
                    return a ? <div style={{ display: 'flex', flexFlow: 'column nowrap' }}>
                        <span>{a?.split('/')[0]}</span>
                        <span>{a?.split('/')[1]}</span>
                    </div> : '--'
                }
            },
            {
                title: '广告名称/ID',
                dataIndex: 'adName/adId',
                key: 'adName',
                align: 'left',
                width: 210,
                ellipsis: true,
                render: (str: any, b: any) => {
                    return <div style={{ display: 'flex', flexFlow: 'column nowrap', fontSize: 12 }}>
                        <div style={{ color: '#459ae9', fontSize: 10 }}>{b.adName}</div>
                        <div style={{ color: '#888' }}>广告ID:{b?.adId}</div>
                    </div>
                }
            },
            {
                title: '投放计划名称/ID',
                dataIndex: 'campaignName/campaignId',
                key: 'campaignName/campaignId',
                align: 'left',
                width: 180,
                ellipsis: true,
                render: (str: any, b: any) => {
                    return <div style={{ display: 'flex', flexFlow: 'column nowrap', fontSize: 12 }}>
                        <div style={{ color: '#459ae9', fontSize: 10 }}>{b.campaignName}</div>
                        <div style={{ color: '#888' }}>计划ID:{b?.campaignId}</div>
                    </div>
                }
            },
            {
                title: '广告主名称/App ID',
                dataIndex: 'mpName/mpAppId',
                key: 'mpName/mpAppId',
                align: 'left',
                width: 150,
                ellipsis: true,
                render: (str: any, b: any) => {
                    return <div style={{ display: 'flex', flexFlow: 'column nowrap', fontSize: 12 }}>
                        <div style={{ color: '#459ae9' }}>{b.mpName}</div>
                        <div style={{ color: '#888' }}>{b?.mpAppId}</div>
                    </div>
                }
            },
            {
                title: '创意名称/ID',
                dataIndex: 'adCreativeName/adCreativeId',
                key: 'adCreativeName/adCreativeId',
                align: 'left',
                width: 210,
                render: (str: any, b: any) => {
                    return <div style={{ display: 'flex', flexFlow: 'column nowrap', fontSize: 12 }}>
                        <div style={{ color: '#459ae9', fontSize: 10 }}>{b.adCreativeName}</div>
                        <div style={{ color: '#888' }}>创意ID:{b?.adCreativeId}</div>
                    </div>
                }
            },
            {
                title: '创意预览',
                dataIndex: 'creativePreview',
                key: 'creativePreview',
                width: 110,
                align: 'center',
                render: (a: any, b: any) => {
                    return <Box b={b} />
                }
            },
            {
                title: '服务商',
                dataIndex: 'serviceProviderName',
                key: 'serviceProviderName',
                width: 110,
                align: 'center',
                render: (a: any) => {
                    return a || '--'
                }
            },
            {
                title: '投手',
                dataIndex: 'pitcherName',
                key: 'pitcherName',
                width: 70,
                align: 'center',
                render: (a: any) => {
                    return a || '--'
                }
            },
            {
                title: '主投书',
                dataIndex: 'mainBookName',
                key: 'mainBookName',
                align: 'center',
                width: 95,
                render: (a: any) => {
                    return a || '--'
                }
            },
            {
                title: '创建日期',
                dataIndex: 'adCreateTime',
                key: 'adCreateTime',
                align: 'center',
                width: 110,
                render: (a: any) => {
                    // return a
                    return a ? moment.unix(a).format('YYYY-MM-DD hh:mm:ss') : '--'
                }
            },
            // {
            //     title: '广告位置',
            //     dataIndex: 'adSeat',
            //     key: 'adSeat',
            //     align: 'center',
            //     width: 100,
            //     render: (a: any) => {
            //         return a || '--'
            //     }
            // },
            {
                title: '广告状态',
                dataIndex: 'adStatus',
                key: 'adStatus',
                align: 'center',
                width: 105,
                render: (a: any) => {
                    return GUANGGAOZHUANGTAI[a] || '--'
                }
            },
            {
                title: '创意状态',
                dataIndex: "adCreativeStatus",
                key: "adCreativeStatus",
                align: 'center',
                width: 105,
                render: (a: any) => {
                    return CHUANGYIZHUANGTAI[a] || '--'
                }
            },
            {
                title: '购买类型',
                dataIndex: 'adBuyType',
                key: 'adBuyType',
                align: 'center',
                width: 110,
                render: (a: any) => {
                    return GOUMAILEIXING[a] || '--'
                }
            },
            // {
            //     title: '自动扩量',
            //     dataIndex: 'autoExpand',
            //     key: 'autoExpand',
            //     width: 110,
            //     align: 'center',
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            // {
            //     title: '曝光评估',
            //     dataIndex: 'impressionAppraise',
            //     key: 'impressionAppraise',
            //     align: 'center',
            //     width: 115,
            //     render: (a: any) => {
            //         return a || '--'
            //     }
            // },
            {
                title: '投放时间',
                dataIndex: 'adStartTime',
                key: 'adStartTime',
                align: 'center',
                width: 90,
                render: (a: any, b: any) => {
                    return a ? <div style={{ display: 'flex', flexFlow: 'column nowrap' }}>
                        <span>{a}</span>
                        <span>{b?.adEndTime}</span>
                    </div> : '--'
                }
            },
            // {
            //     title: '当日成本偏差',
            //     dataIndex: 'dayCostOffset',
            //     key: 'dayCostOffset',
            //     align: 'center',
            //     width: 90,
            //     render: (a: any) => {
            //         return a || '--'
            //     }
            // },
            {
                title: '推广目标',
                dataIndex: 'spreadTarget',
                key: 'spreadTarget',
                align: 'center',
                width: 80,
                render: (a: any) => {
                    return TUIGUANGMUBIAO[a] || '推广公众号'
                }
            },
            // {
            //     title: '深度优化目标',
            //     dataIndex: 'depthOptimizeTarget',
            //     key: 'depthOptimizeTarget',
            //     width: 110,
            //     align: 'center',
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            {
                title: '广告预算',
                dataIndex: 'adBudget',
                key: 'adBudget',
                align: 'center',
                width: 110,
                render: (a: any) => {
                    return a ? <Statistic value={a | 0} /> : '--'
                }
            },
            // {
            //     title: '出价方式',
            //     dataIndex: 'biddingMethod',
            //     key: 'biddingMethod',
            //     align: 'center',
            //     width: 80,
            //     render: (a: any) => {
            //         return a || '--'
            //     }
            // },
            {
                title: '当前出价',
                dataIndex: 'currentPrice',
                key: 'currentPrice',
                align: 'center',
                width: 80,
                render: (a: any) => {
                    return a ? <Statistic value={a | 0} /> : '--'
                }
            },
            // {
            //     title: '计划预算',
            //     dataIndex: 'planBudget',
            //     key: 'planBudget',
            //     align: 'center',
            //     width: 80,
            //     render: (a: any) => {
            //         return a ? <Statistic value={a | 0} /> : '--'
            //     }
            // },
            {
                title: '广告总消耗',
                dataIndex: 'costTotal',
                key: 'costTotal',
                align: 'center',
                width: 100,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            // {
            //     title: '今日消耗',
            //     dataIndex: 'todayCostTotal',
            //     key: 'todayCostTotal',
            //     align: 'center',
            //     width: 105,
            //     render: (a: any) => {
            //         return <Statistic value={a || 0} />
            //     }
            // },
            {
                title: '单位时间消耗速度',
                dataIndex: 'fiveMinuteCost',
                key: 'fiveMinuteCost',
                align: 'center',
                width: 120,
                render: (a: any, b: any) => {
                    return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                        {/* <div>当前:<span></span></div>
                        <div>前第一小时:<span></span></div> */}
                        <RocketSvg /> <a onClick={() => details(b)} style={{ marginLeft: 10 }}>详情</a>
                    </div>
                }
            },
            {
                title: '曝光量',
                dataIndex: 'impressionCount',
                key: 'impressionCount',
                align: 'center',
                width: 70,
                sorter: true,
                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: 'thousandExposureCost',
                key: 'thousandExposureCost',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a ? a?.toFixed(2) : 0} />
                }
            },
            {
                title: '点击量',
                dataIndex: 'clickCount',
                key: 'clickCount',
                align: 'center',
                width: 70,
                sorter: true,
                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: 'clickAvgPrice',
                key: 'clickAvgPrice',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a ? a?.toFixed(2) : 0} />
                }
            },
            {
                title: '点击率',
                dataIndex: 'clickRate',
                key: 'clickRate',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '优化目标',
                dataIndex: 'optimizeTarget',
                key: 'optimizeTarget',
                align: 'center',
                width: 115,
                render: (a: any) => {
                    return <Tooltip title={YOUHUAMUBIAO[a]}>
                        <div className='oneText'>{YOUHUAMUBIAO[a] || '--'}</div>
                    </Tooltip>
                }
            },
            {
                title: '转化目标量',
                dataIndex: 'changeTargetCount',
                key: 'changeTargetCount',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '转化目标成本',
                dataIndex: 'changeTargetCost',
                key: 'changeTargetCost',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a ? a?.toFixed(2) : 0} />
                }
            },
            {
                title: '目标转化率',
                dataIndex: 'changeTargetRate',
                key: 'changeTargetRate',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '下单量',
                dataIndex: 'orderCount',
                key: 'orderCount',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '首日新增下单量',
                dataIndex: 'firstDayNewOrderCount',
                key: 'firstDayNewOrderCount',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '下单成本',
                dataIndex: 'orderCost',
                key: 'orderCost',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a ? a?.toFixed(2) : 0} />
                }
            },
            {
                title: '下单率',
                dataIndex: 'orderRate',
                key: 'orderRate',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '下单金额',
                dataIndex: 'orderPrice',
                key: 'orderPrice',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '首日新增下单金额',
                dataIndex: 'firstDayNewOrderPrice',
                key: 'firstDayNewOrderPrice',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '下单客单价',
                dataIndex: 'orderUnitPrice',
                key: 'orderUnitPrice',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a ? a?.toFixed(2) : 0} />
                }
            },
            {
                title: '下单ROI',
                dataIndex: 'orderRoi',
                key: 'orderRoi',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '首日新增下单ROI',
                dataIndex: 'firstDayNewOrderRoi',
                key: 'firstDayNewOrderRoi',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '公众号关注人数',
                dataIndex: 'mpFollowCount',
                key: 'mpFollowCount',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return a || '--'
                }
            },
            {
                title: '公众号关注率',
                dataIndex: 'mpFollowRate',
                key: 'mpFollowRate',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '公众号关注成本',
                dataIndex: 'mpFollowCost',
                key: 'mpFollowCost',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a ? a?.toFixed(2) : 0} />
                }
            },
            // {
            //     title: '注册人数',
            //     dataIndex: 'mpRegisterUserCount',
            //     key: 'mpRegisterUserCount',
            //     align: 'center',
            //     width: 115,
            // sorter: true,
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            // {
            //     title: '注册次数',
            //     dataIndex: 'mpRegisterCount',
            //     key: 'mpRegisterCount',
            //     align: 'center',
            //     width: 115,
            // sorter: true,
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            // {
            //     title: '注册成本',
            //     dataIndex: 'mpRegisterCost',
            //     key: 'mpRegisterCost',
            //     align: 'center',
            //     width: 115,
            // sorter: true,
            //     render: (a: any) => {
            //         return <Statistic value={a || 0} />
            //     }
            // },
        ]
        return newArr
    }
}
export default columnsMonitor

