import useCopy from '@/Hook/useCopy'
import { DownOutlined, RiseOutlined } from '@ant-design/icons'
import { Dropdown, Menu, Progress, Statistic, Tooltip} from 'antd'
import { ColumnsType } from 'antd/lib/table'
import React from 'react'
import { ReactComponent as RocketSvg } from '@/assets/rocket.svg'
import './index.less'
import { CHUANGYIZHUANGTAI, GOUMAILEIXING, GUANGGAOZHUANGTAI, TUIGUANGMUBIAO, YOUHUAMUBIAO } from './enum'
import Box from './components/box'
function columnsMonitor(planDetail: (id: number) => void, getDetailList: (adId: any) => void, details: (id: number) => void, getMinuList: (id: number) => void, mode: string) {
    const { copy } = useCopy()
    return function columns() {
        let newArr: ColumnsType<any> = [
            {
                title: '时间',
                dataIndex: 'dataTime',
                key: 'dataTime',
                align: 'center',
                width: 155
            },
            {
                title: '广告名称',
                dataIndex: 'adName',
                key: 'adName',
                align: 'center',
                width: 170,
                ellipsis: true,
                render: (str, b) => {
                    return <a style={{ color: '#1890ff', fontSize: 12 }} onClick={() => { getDetailList(b.adId) }}>{str}</a>
                }
            },
            {
                title: '广告ID',
                dataIndex: 'adId',
                key: 'adId',
                align: 'center',
                width: 100,
                render: (a: any) => {
                    return <a onClick={() => { copy(a) }} style={{ color: '#3946c3' }}>{a}</a>
                }
            },
            {
                title: '计划名称',
                dataIndex: 'campaignName',
                key: 'campaignName',
                align: 'center',
                width: 170,
                ellipsis: true,
                render: (str, b) => {
                    return str
                }
            },
            {
                title: '计划ID',
                dataIndex: 'campaignId',
                key: 'campaignId',
                align: 'center',
                width: 100,
                render: (a: any) => {
                    return <a onClick={() => { copy(a) }} style={{ color: '#3946c3' }}>{a}</a>
                }
            },
            {
                title: '公众号',
                dataIndex: 'mpName',
                key: 'mpName',
                width: 70,
                align: 'center'
            },
            {
                title: '投手',
                dataIndex: 'pitcherName',
                key: 'pitcherName',
                align: 'center',
                width: 65
            },
            {
                title: '创意预览',
                dataIndex: 'creativePreview',
                key: 'creativePreview',
                width: 110,
                align: 'center',
                render: (a: any, b: any) => {
                    return <Box b={b}/>
                }
            },
            // {
            //     title: '投放位置',
            //     dataIndex: 'pitchSeat',
            //     key: 'pitchSeat',
            //     width: 110,
            //     align: 'center',
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            // {
            //     title: '自动扩量',
            //     dataIndex: 'autoExpand',
            //     key: 'autoExpand',
            //     width: 110,
            //     align: 'center',
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            // {
            //     title: '深度优化目标',
            //     dataIndex: 'depthOptimizeTarget',
            //     key: 'depthOptimizeTarget',
            //     width: 110,
            //     align: 'center',
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            // {
            //     title: '曝光评估',
            //     dataIndex: 'impressionAppraise',
            //     key: 'impressionAppraise',
            //     width: 110,
            //     align: 'center',
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            {
                title: '投放时间',
                dataIndex: 'adStartTime',
                key: 'adStartTime',
                width: 110,
                align: 'center',
                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: 115,
                render: (a: any) => {
                    return CHUANGYIZHUANGTAI[a] || '--'
                }
            },
            {
                title: '推广目标',
                dataIndex: 'spreadTarget',
                key: 'spreadTarget',
                align: 'center',
                width: 80,
                render: (a: any) => {
                    return TUIGUANGMUBIAO[a] || '推广公众号'
                }
            },
            {
                title: '购买类型',
                dataIndex: 'adBuyType',
                key: 'adBuyType',
                align: 'center',
                width: 110,
                render: (a: any) => {
                    return GOUMAILEIXING[a] || '--'
                }
            },
            {
                title: '广告预算',
                dataIndex: 'adBudget',
                key: 'adBudget',
                width: 110,
                align: 'center',
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            // {
            //     title: '出价方式',
            //     dataIndex: 'biddingMethod',
            //     key: 'biddingMethod',
            //     width: 110,
            //     align: 'center',
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            {
                title: '当前出价',
                dataIndex: 'currentPrice',
                key: 'currentPrice',
                width: 110,
                align: 'center',
                render: (a: any) => {
                    return <div style={a >= 500 ? { backgroundColor: 'rgba(255, 80, 82, .72)', height: 26, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontWeight: 600 } : {}}><Statistic value={a || 0} valueStyle={a >= 500 ? { fontSize: 14 } : {}} /></div>
                }
            },
            // {
            //     title: '计划预算',
            //     dataIndex: 'planBudget',
            //     key: 'planBudget',
            //     width: 110,
            //     align: 'center',
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            {
                title: '广告总消耗',
                dataIndex: 'costTotal',
                key: 'costTotal',
                align: 'center',
                width: 100,
                sorter: true,
                render: (a: any) => {
                    return <div style={{ height: 26, position: 'relative' }}>
                        <Progress
                            strokeColor={{
                                from: '#10c1e9',
                                to: '#6892d0',
                            }}
                            status="active"
                            showInfo={false}
                            percent={a ? a / 30000 * 100 : 0}
                        />
                        <span style={{ position: 'absolute', left: 0, top: 2, bottom: 0, right: 0 }}><Statistic value={a || 0} valueStyle={a >= 30000 ? { color: '#000', fontWeight: 500 } : { fontWeight: 500 }} /></span>
                    </div>
                }
            },
            {
                title: '今日消耗',
                dataIndex: 'todayCostTotal',
                key: 'todayCostTotal',
                align: 'center',
                width: 105,
                sorter: true,
                render: (a: any) => {
                    return <div style={{ height: 26, position: 'relative' }}>
                        <Progress
                            strokeColor={{
                                from: '#ff5900',
                                to: '#ffd380',
                            }}
                            status="active"
                            showInfo={false}
                            percent={a ? a / 2000 * 100 : 0}
                        />
                        <span style={{ position: 'absolute', left: 0, top: 2, bottom: 0, right: 0 }}><Statistic value={a || 0} valueStyle={a >= 2000 ? { color: '#000', fontWeight: 500 } : { fontWeight: 500 }} /></span>
                    </div>
                }
            },
            {
                title: '当前小时消耗',
                dataIndex: 'nowHourCost',
                key: 'nowHourCost',
                align: 'center',
                width: 110,
                sorter: true,
                render: (a: any) => {
                    return <div style={{ height: 26, position: 'relative' }}>
                        <Progress
                            strokeColor={{
                                from: '#e7a0f5',
                                to: '#d161f7',
                            }}
                            status="active"
                            showInfo={false}
                            percent={a ? a / 300 * 100 : 0}
                        />
                        <span style={{ position: 'absolute', left: 0, top: 2, bottom: 0, right: 0 }}><Statistic value={a || 0} valueStyle={a >= 300 ? { color: '#000', fontWeight: 500, fontSize: 15 } : { fontWeight: 500, fontSize: 15 }} /></span>
                    </div>
                }
            },
            {
                title: '前第1小时消耗',
                dataIndex: 'beforeHourCost',
                key: 'beforeHourCost',
                align: 'center',
                width: 110,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '前第2小时消耗',
                dataIndex: 'beforeTwoHourCost',
                key: 'beforeTwoHourCost',
                align: 'center',
                width: 80,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '前第3小时消耗',
                dataIndex: 'beforeThreeHourCost',
                key: 'beforeThreeHourCost',
                align: 'center',
                width: 110,
                sorter: true,
                render: (a: number) => {
                    return <Statistic value={a || 0} />
                },
            },
            {
                title: '当前小时消耗差额',
                dataIndex: 'nowHourDiffer',
                key: 'nowHourDiffer',
                align: 'center',
                width: 125,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} valueStyle={a > 0 ? { color: 'red' } : { color: 'green' }} />
                }
            },
            {
                title: '前第1小时消耗差额',
                dataIndex: 'beforeHourDiffer',
                key: 'beforeHourDiffer',
                align: 'center',
                width: 125,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} valueStyle={a > 0 ? { color: 'red' } : { color: 'green' }} />
                }
            },
            {
                title: <Tooltip placement="topLeft" title={'放量增长（前第3小时区间内的消耗—前第2小时区间的的消耗）'}>
                    前第2小时消耗差额
                </Tooltip>,
                dataIndex: 'beforeTwoHourDiffer',
                key: 'beforeTwoHourDiffer',
                align: 'center',
                width: 125,
                sorter: true,
                render: (a: number) => {
                    return <Statistic value={a || 0} valueStyle={a > 0 ? { color: 'red' } : { color: 'green' }} />
                },
            },
            {
                title: <Tooltip placement="topLeft" title={'绝对值比较，比较前三个小时差额的正负，差额全为正值则在增长'}>
                    前三小时消耗趋势
                </Tooltip>,
                dataIndex: 'incStatus',
                key: 'incStatus',
                align: 'center',
                width: 75,
                render: (a: number) => {
                    return a > 0 ? <RiseOutlined style={{ color: 'red', fontWeight: 900, fontSize: 22 }} /> : '--'
                },
            },
            {
                title: '当前5min消耗流速',
                dataIndex: 'fiveMinuteCost',
                key: 'fiveMinuteCost',
                align: 'center',
                width: 115,
                render: (a: any) => {
                    a = a ? parseFloat(a.toFixed(2)) : 0
                    return <div style={{ height: 26, position: 'relative' }}>
                        <Progress
                            strokeColor={{
                                from: '#00DDFF',
                                to: '#37A2FF',
                            }}
                            status="active"
                            showInfo={false}
                            percent={a ? a / 100 * 100 : 0}
                        />
                        <span style={{ position: 'absolute', left: 0, top: 2, bottom: 0, right: 0 }}><Statistic value={a || 0} valueStyle={a >= 100 ? { color: '#000', fontWeight: 500 } : { fontWeight: 500 }} /></span>
                    </div>
                }
            },
            {
                title: '曝光量',
                dataIndex: 'impressionCount',
                key: 'impressionCount',
                align: 'center',
                width: 70,
                sorter: true,
                render: (a: number) => {
                    return <Statistic value={a || 0} />
                },
            },
            {
                title: '千次曝光成本',
                dataIndex: 'thousandExposureCost',
                key: 'thousandExposureCost',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '点击量',
                dataIndex: 'clickCount',
                key: 'clickCount',
                align: 'center',
                width: 70,
                sorter: true,
                render: (a: number) => {
                    return <Statistic value={a || 0} />
                },
            },
            {
                title: '点击均价',
                dataIndex: 'clickAvgPrice',
                key: 'clickAvgPrice',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 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 YOUHUAMUBIAO[a] || '--'
                }
            },
            {
                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 <div style={a > 500 ? { backgroundColor: '#efea5b', height: 26, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600 } : {}}><Statistic value={a || 0} /></div>
                }
            },
            {
                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 || 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 || 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 || 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} />
            //     }
            // },
            {
                title: '操作',
                dataIndex: 'event',
                key: 'event',
                align: 'center',
                width: 90,
                render: (a: string, b: any) => (
                    // <a style={{ color: '#1890ff' }} onClick={() => { planDetail(b) }}>广告详情</a>
                    <Dropdown overlay={
                        <Menu>
                            <Menu.Item key="0">
                                <a style={{ color: '#1890ff' }} onClick={() => { planDetail(b) }}>广告详情</a>
                            </Menu.Item>
                            {mode === 'minute' ? <Menu.Item key="1">
                                <a style={{ color: '#1890ff' }} onClick={() => { getDetailList(b.adId) }}>小时</a>
                            </Menu.Item> : <Menu.Item key="1">
                                <a style={{ color: '#1890ff' }} onClick={() => { getMinuList(b?.adId) }}>5min</a>
                            </Menu.Item>}
                            
                            <Menu.Item key="2">
                                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }} onClick={() => details(b)}>
                                    <RocketSvg /><a style={{ marginLeft: 4, color: '#1890ff' }}>详情</a>
                                </div>
                            </Menu.Item>
                        </Menu>
                    } trigger={['click']}>
                        <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                        更多 <DownOutlined />
                        </a>
                    </Dropdown>
                )
            }
        ]
        return newArr
    }
}
export default columnsMonitor