import ProgressTable from "@/components/ProgressTable"
import { gameClassifyEnum } from "@/components/QueryForm/const"
import WidthEllipsis from "@/components/widthEllipsis"
import { Statistic } from "antd"
import React from "react"

function columns12() {

    let newArr: { label: string, data: any[] }[] = [
        {
            label: '推广账号消耗排行榜',
            data: [
                {
                    title: '推广账号', dataIndex: 'accountId', label: '推广账号消耗排行榜', align: 'center', width: 95, default: 1,
                    render: (a: string, b: any) => (<WidthEllipsis value={a} />)
                },
                {
                    title: '推广媒体', dataIndex: 'type', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 2,
                    render: (a: string, b: any) => (<WidthEllipsis value={a} />)
                },
                {
                    title: '投手', dataIndex: 'pitcher', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 3,
                    render: (a: string, b: any) => (<WidthEllipsis value={a} />)
                },
                {
                    title: '推广游戏名称', dataIndex: 'gameName', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 4,
                    render: (a: string, b: any) => (<WidthEllipsis value={a} />)
                },
                {
                    title: '推广游戏类型', dataIndex: 'gameClassify', label: '推广账号消耗排行榜', align: 'center', width: 80, default: 5,
                    render: (a: string) => (<WidthEllipsis value={gameClassifyEnum[a]} />)
                },
                {
                    title: '推广游戏CP名称', dataIndex: 'gameCp', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 6,
                    render: (a: string, b: any) => (<WidthEllipsis value={a === 'null' ? '--' : a} />)
                },
                {
                    title: '消耗', dataIndex: 'cost', label: '推广账号消耗排行榜', align: 'center', width: 90, default: 7, sorter: true,
                    className: 'progress',
                    render: (a: number) => {
                        return <ProgressTable
                            strokeColor={{
                                from: '#e7a0f5',
                                to: '#d161f7',
                            }}
                            percent={a ? a / 60000 * 100 : 0}
                            value={a || 0}
                            valueStyle={a >= 10000 ? { color: '#000', fontWeight: 500 } : { fontWeight: 500 }}
                        />
                    },
                },
                {
                    title: '推广广告数量', dataIndex: 'adCount', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 8, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '曝光量', dataIndex: 'viewCount', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 9, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '点击量', dataIndex: 'clickCount', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 10, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '点击率', dataIndex: 'clickRate', label: '推广账号消耗排行榜', align: 'center', width: 80, default: 11, sorter: true,
                    render: (a: number) => <Statistic value={a || 0} valueStyle={a >= 100 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '千次曝光成本', dataIndex: 'thousandDisplayPrice', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 12, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '注册人数', dataIndex: 'regUserCnt', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 13, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '注册成本', dataIndex: 'regCost', label: '推广账号消耗排行榜', align: 'center', width: 100, default: 14, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '首日创角人数', dataIndex: 'firstRole', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 15, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '累计创角人数', dataIndex: 'totalRole', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 16, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '首日充值金额', dataIndex: 'firstAmount', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 17, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '首日充值人数', dataIndex: 'firstAmountUser', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 18, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '首日充值次数', dataIndex: 'firstAmountCount', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 19, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '累计充值金额', dataIndex: 'totalAmount', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 20, sorter: true,
                    className: 'progress',
                    render: (a: number) => {
                        return <ProgressTable
                            strokeColor={{
                                from: '#ff5900',
                                to: '#ffd380',
                            }}
                            percent={a ? a / 20000 * 100 : 0}
                            value={a || 0}
                            valueStyle={a >= 16000 ? { color: '#000', fontWeight: 500 } : { fontWeight: 500 }}
                        />
                    },
                },
                {
                    title: '累计充值人数', dataIndex: 'totalAmountUser', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 21, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '累计充值次数', dataIndex: 'totalAmountCount', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 22, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '首日ROI', dataIndex: 'firstRoi', label: '推广账号消耗排行榜', align: 'center', width: 90, default: 23, sorter: true,
                    render: (a: number) => <Statistic value={a} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '平均客单价', dataIndex: 'avgAmount', label: '推广账号消耗排行榜', align: 'center', width: 100, default: 24, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '回本率', dataIndex: 'roi', label: '推广账号消耗排行榜', align: 'center', width: 70, default: 25, sorter: true,
                    render: (a: number) => <Statistic value={a} precision={2} valueStyle={!a ? {} : a >= 100 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
            ]
        },
    ]

    return newArr
}

export default columns12