import { gameClassifyEnum } from "@/components/QueryForm/const"
import WidthEllipsis from "@/components/widthEllipsis"
import { Statistic, Tooltip } from "antd"
import React from "react"
import moment from "moment"
import style from './index.less'

function columns12(): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {


    let defaultStart = 13
    const day = Array(90).fill('').map((_item: string, index: number) => {
        let field = `da${index + 1}Trend`
        let data: any = {
            title: `D${index + 1}`,
            dataIndex: field,
            label: "D1~Dn",
            align: "center",
            children: [{
                title: `新创角`,
                dataIndex: field,
                key: 'newCreate',
                align: "center",
                width: 140,
                render: (a: any, b: any) => {
                    let date1 = moment()
                    if (b?.gameName === '总计') {
                        if (b?.dt) {
                            date1 = moment(b?.dt)
                        } else {
                            date1 = moment()
                        }
                    } else {
                        date1 = moment(b.dt)
                    }
                    let dt = moment()
                    let day = dt.diff(date1, 'day');
                    if (index <= day) {
                        let data: any = {}
                        if (b?.[field]) {
                            data = b?.[field]
                            return <div className={style.dbox}>
                                <span style={{ color: '#2f54eb', fontWeight: 600 }}>新用户人数：<span>{data?.regNum}</span></span>
                                <span style={{ color: '#722ed1', fontWeight: 600 }}>创角人数：<span>{data?.roleNum}</span></span>
                                <span style={{ color: '#eb2f96', fontWeight: 600 }}>活跃人数：<span>{data?.activeNum}</span></span>
                                <span style={{ color: '#d81b60', fontWeight: 600 }}>付费人数：<span>{data?.amountNum}</span></span>
                                <span style={{ color: '#0f538a', fontWeight: 600 }}>付费金额：<span><Statistic value={data?.amount || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>
                            </div>
                        }
                        return '--'
                    }
                    return '--'
                },
            }, {
                title: `滚服`,
                dataIndex: field,
                key: 'gf',
                align: "center",
                width: 150,
                render: (a: any, b: any) => {
                    let date1 = moment()
                    if (b?.gameName === '总计') {
                        if (b?.dt) {
                            date1 = moment(b?.dt)
                        } else {
                            date1 = moment()
                        }
                    } else {
                        date1 = moment(b.dt)
                    }
                    let dt = moment()
                    let day = dt.diff(date1, 'day');
                    if (index <= day) {
                        let data: any = {}
                        if (b?.[field]) {
                            data = b?.[field]
                            return <div className={style.dbox}>
                                <span style={{ color: '#13c2c2', fontWeight: 600 }}>滚服人数：<span>{data?.rollServerNum}</span></span>
                                <span style={{ color: '#faad14', fontWeight: 600 }}>滚服付费人数：<span>{data?.rollServerAmountNum}</span></span>
                                <span style={{ color: '#0f538a', fontWeight: 600 }}>滚服付费金额：<span><Statistic value={data?.rollServerAmount || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>
                                <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>滚服占比：<span>{(data?.rollServerAmountRate * 100)?.toFixed(2)}%</span></span>
                            </div>
                        }
                        return '--'
                    }
                    return '--'
                },
            }, {
                title: `留存`,
                dataIndex: field,
                key: 'retained',
                align: "center",
                width: 125,
                render: (a: any, b: any) => {
                    let date1 = moment()
                    if (b?.gameName === '总计') {
                        if (b?.dt) {
                            date1 = moment(b?.dt)
                        } else {
                            date1 = moment()
                        }
                    } else {
                        date1 = moment(b.dt)
                    }
                    let dt = moment()
                    let day = dt.diff(date1, 'day');
                    if (index <= day) {
                        let data: any = {}
                        switch (b?.activeTypes) {
                            case 'reg':
                                if (b?.[field]) {
                                    data = b?.[field]
                                    return <div>
                                        {/* <div style={{ alignItems: 'center', fontSize: 12, fontWeight: 'bold' }}>注册留存</div> */}
                                        <div className={style.dbox}>
                                            <span style={{ color: '#d81b60', fontWeight: 600 }}>活跃人数：<span>{data?.regActiveNum}</span></span>
                                            <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>留存率：<span>{(data?.regActiveRate * 100)?.toFixed(2)}%</span></span>
                                        </div>
                                    </div>
                                }
                                return '--'
                            case 'role':
                                if (b?.[field]) {
                                    data = b?.[field]
                                    return <div>
                                        <div className={style.dbox}>
                                            <span style={{ color: '#d81b60', fontWeight: 600 }}>
                                                <Tooltip title="累计到第N天的活跃用户数" placement='left'>
                                                    <span>活跃数：</span>
                                                </Tooltip>
                                                <span>{data?.roleNewActiveUserTotalNum}</span>
                                            </span>
                                            <span style={{ color: '#faad14', fontWeight: 600 }}>
                                                <Tooltip title="第N天的新增创角用户数" placement='left'>
                                                    <span>新增创角：</span>
                                                </Tooltip>
                                                <span>{data?.roleNewUserNum}</span>
                                            </span>
                                            <span style={{ color: '#0f538a', fontWeight: 600 }}>
                                                <Tooltip title="累计到第N天的创角用户数" placement='left'>
                                                    <span>累计创角：</span>
                                                </Tooltip>
                                                <span>{data?.roleNewUserTotalNum}</span>
                                            </span>
                                            <span style={{ color: '#eb2f96', fontWeight: 600 }}>
                                                <Tooltip title="第N天的老活跃用户数" placement='left'>
                                                    <span>老活跃数：</span>
                                                </Tooltip>
                                                <span>{data?.roleOldActiveUserNum}</span>
                                            </span>
                                            <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>
                                                <Tooltip title="创角留存率" placement='left'>
                                                    <span>留存率：</span>
                                                </Tooltip>
                                                <span>{(data?.roleActiveRate * 100)?.toFixed(2)}%</span>
                                            </span>
                                        </div>
                                    </div>
                                }
                                return '--'
                            case 'amount':
                                if (b?.[field]) {
                                    data = b?.[field]
                                    return <div>
                                        <div className={style.dbox}>
                                            <span style={{ color: '#d81b60', fontWeight: 600 }}>
                                                <Tooltip title="累计到第N天的活跃用户数" placement='left'>
                                                    <span>活跃数：</span>
                                                </Tooltip>
                                                <span>{data?.newActiveUserTotalNum}</span>
                                            </span>
                                            <span style={{ color: '#faad14', fontWeight: 600 }}>
                                                <Tooltip title="第N天的新增付费用户" placement='left'>
                                                    <span>新增付费：</span>
                                                </Tooltip>
                                                <span>{data?.newUserAmountNum}</span>
                                            </span>
                                            <span style={{ color: '#0f538a', fontWeight: 600 }}>
                                                <Tooltip title="累计到第N天的付费用户数" placement='left'>
                                                    <span>付费人数：</span>
                                                </Tooltip>
                                                <span>{data?.newUserTotalAmountNum}</span>
                                            </span>
                                            <span style={{ color: '#eb2f96', fontWeight: 600 }}>
                                                <Tooltip title="第N天的老活跃用户数" placement='left'>
                                                    <span>老活跃数：</span>
                                                </Tooltip>
                                                <span>{data?.oldActiveUserNum}</span>
                                            </span>
                                            <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>
                                                <Tooltip title="付费留存率" placement='left'>
                                                    <span>留存率：</span>
                                                </Tooltip>
                                                <span>{(data?.amountActiveRate * 100)?.toFixed(2)}%</span>
                                            </span>
                                        </div>
                                    </div>
                                }
                                return '--'
                            default:
                                return '--'
                        }

                    }
                    return '--'
                }
            }]
        }
        data['default'] = defaultStart + index
        return data
    })

    let defaultStartM = 103
    let month = [4, 5, 6, 7, 8, 9, 10, 11, 12].map((item, index) => {
        let field = `m${item}Trend`
        let data: any = {
            title: `M${item}`,
            dataIndex: field,
            label: "D1~Dn",
            children: [{
                title: `新创角`,
                dataIndex: field,
                key: 'newCreate',
                align: "center",
                width: 140,
                render: (a: any, b: any) => {
                    let date1 = moment()
                    if (b?.gameName === '总计') {
                        if (b?.dt) {
                            date1 = moment(b?.dt)
                        } else {
                            date1 = moment()
                        }
                    } else {
                        date1 = moment(b.dt)
                    }
                    let dt = moment()
                    let day = dt.diff(date1, 'day');
                    if (item * 30 <= day) {
                        let data: any = {}
                        if (b?.[field]) {
                            data = b?.[field]
                            return <div className={style.dbox}>
                                <span style={{ color: '#2f54eb', fontWeight: 600 }}>新用户人数：<span>{data?.regNum}</span></span>
                                <span style={{ color: '#722ed1', fontWeight: 600 }}>创角人数：<span>{data?.roleNum}</span></span>
                                <span style={{ color: '#eb2f96', fontWeight: 600 }}>活跃人数：<span>{data?.activeNum}</span></span>
                                <span style={{ color: '#d81b60', fontWeight: 600 }}>付费人数：<span>{data?.amountNum}</span></span>
                                <span style={{ color: '#0f538a', fontWeight: 600 }}>付费金额：<span><Statistic value={data?.amount || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>
                            </div>
                        }
                        return '--'
                    }
                    return '--'
                },
            }, {
                title: `滚服`,
                dataIndex: field,
                key: 'gf',
                align: "center",
                width: 150,
                render: (a: any, b: any) => {
                    let date1 = moment()
                    if (b?.gameName === '总计') {
                        if (b?.dt) {
                            date1 = moment(b?.dt)
                        } else {
                            date1 = moment()
                        }
                    } else {
                        date1 = moment(b.dt)
                    }
                    let dt = moment()
                    let day = dt.diff(date1, 'day');
                    if (item * 30 <= day) {
                        let data: any = {}
                        if (b?.[field]) {
                            data = b?.[field]
                            return <div className={style.dbox}>
                                <span style={{ color: '#13c2c2', fontWeight: 600 }}>滚服人数：<span>{data?.rollServerNum}</span></span>
                                <span style={{ color: '#faad14', fontWeight: 600 }}>滚服付费人数：<span>{data?.rollServerAmountNum}</span></span>
                                <span style={{ color: '#0f538a', fontWeight: 600 }}>滚服付费金额：<span><Statistic value={data?.rollServerAmount || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>
                                <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>滚服占比：<span>{(data?.rollServerAmountRate * 100)?.toFixed(2)}%</span></span>
                            </div>
                        }
                        return '--'
                    }
                    return '--'
                },
            }, {
                title: `留存`,
                dataIndex: field,
                key: 'retained',
                align: "center",
                width: 125,
                render: (a: any, b: any) => {
                    let date1 = moment()
                    if (b?.gameName === '总计') {
                        if (b?.dt) {
                            date1 = moment(b?.dt)
                        } else {
                            date1 = moment()
                        }
                    } else {
                        date1 = moment(b.dt)
                    }
                    let dt = moment()
                    let day = dt.diff(date1, 'day');
                    if (item * 30 <= day) {
                        let data: any = {}
                        switch (b?.activeTypes) {
                            case 'reg':
                                if (b?.[field]) {
                                    data = b?.[field]
                                    return <div>
                                        {/* <div style={{ alignItems: 'center', fontSize: 12, fontWeight: 'bold' }}>注册留存</div> */}
                                        <div className={style.dbox}>
                                            <span style={{ color: '#d81b60', fontWeight: 600 }}>活跃人数：<span>{data?.regActiveNum}</span></span>
                                            <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>留存率：<span>{(data?.regActiveRate * 100)?.toFixed(2)}%</span></span>
                                        </div>
                                    </div>
                                }
                                return '--'
                            case 'role':
                                if (b?.[field]) {
                                    data = b?.[field]
                                    return <div>
                                        <div className={style.dbox}>
                                            <span style={{ color: '#d81b60', fontWeight: 600 }}>
                                                <Tooltip title="累计到第N天的活跃用户数" placement='left'>
                                                    <span>活跃数：</span>
                                                </Tooltip>
                                                <span>{data?.roleNewActiveUserTotalNum}</span>
                                            </span>
                                            <span style={{ color: '#faad14', fontWeight: 600 }}>
                                                <Tooltip title="第N天的新增创角用户数" placement='left'>
                                                    <span>新增创角：</span>
                                                </Tooltip>
                                                <span>{data?.roleNewUserNum}</span>
                                            </span>
                                            <span style={{ color: '#0f538a', fontWeight: 600 }}>
                                                <Tooltip title="累计到第N天的创角用户数" placement='left'>
                                                    <span>累计创角：</span>
                                                </Tooltip>
                                                <span>{data?.roleNewUserTotalNum}</span>
                                            </span>
                                            <span style={{ color: '#eb2f96', fontWeight: 600 }}>
                                                <Tooltip title="第N天的老活跃用户数" placement='left'>
                                                    <span>老活跃数：</span>
                                                </Tooltip>
                                                <span>{data?.roleOldActiveUserNum}</span>
                                            </span>
                                            <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>
                                                <Tooltip title="创角留存率" placement='left'>
                                                    <span>留存率：</span>
                                                </Tooltip>
                                                <span>{(data?.roleActiveRate * 100)?.toFixed(2)}%</span>
                                            </span>
                                        </div>
                                    </div>
                                }
                                return '--'
                            case 'amount':
                                if (b?.[field]) {
                                    data = b?.[field]
                                    return <div>
                                        <div className={style.dbox}>
                                            <span style={{ color: '#d81b60', fontWeight: 600 }}>
                                                <Tooltip title="累计到第N天的活跃用户数" placement='left'>
                                                    <span>活跃数：</span>
                                                </Tooltip>
                                                <span>{data?.newActiveUserTotalNum}</span>
                                            </span>
                                            <span style={{ color: '#faad14', fontWeight: 600 }}>
                                                <Tooltip title="第N天的新增付费用户" placement='left'>
                                                    <span>新增付费：</span>
                                                </Tooltip>
                                                <span>{data?.newUserAmountNum}</span>
                                            </span>
                                            <span style={{ color: '#0f538a', fontWeight: 600 }}>
                                                <Tooltip title="累计到第N天的付费用户数" placement='left'>
                                                    <span>付费人数：</span>
                                                </Tooltip>
                                                <span>{data?.newUserTotalAmountNum}</span>
                                            </span>
                                            <span style={{ color: '#eb2f96', fontWeight: 600 }}>
                                                <Tooltip title="第N天的老活跃用户数" placement='left'>
                                                    <span>老活跃数：</span>
                                                </Tooltip>
                                                <span>{data?.oldActiveUserNum}</span>
                                            </span>
                                            <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>
                                                <Tooltip title="付费留存率" placement='left'>
                                                    <span>留存率：</span>
                                                </Tooltip>
                                                <span>{(data?.amountActiveRate * 100)?.toFixed(2)}%</span>
                                            </span>
                                        </div>
                                    </div>
                                }
                                return '--'
                            default:
                                return '--'
                        }

                    }
                    return '--'
                }
            }]
        }
        data['default'] = defaultStartM + index
        return data
    })

    month.push({
        title: `总`,
        dataIndex: 'totalTrend',
        label: "D1~Dn",
        align: "center",
        default: 112,
        children: [{
            title: `新创角`,
            dataIndex: 'totalTrend',
            key: 'newCreate',
            align: "center",
            width: 140,
            render: (a: any, b: any) => {
                let data: any = {}
                if (b?.['totalTrend']) {
                    data = b?.['totalTrend']
                    return <div className={style.dbox}>
                        <span style={{ color: '#2f54eb', fontWeight: 600 }}>新用户人数：<span>{data?.regNum}</span></span>
                        <span style={{ color: '#722ed1', fontWeight: 600 }}>创角人数：<span>{data?.roleNum}</span></span>
                        <span style={{ color: '#eb2f96', fontWeight: 600 }}>活跃人数：<span>{data?.activeNum}</span></span>
                        <span style={{ color: '#d81b60', fontWeight: 600 }}>付费人数：<span>{data?.amountNum}</span></span>
                        <span style={{ color: '#0f538a', fontWeight: 600 }}>付费金额：<span><Statistic value={data?.amount || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>
                    </div>
                }
                return '--'
            },
        }, {
            title: `滚服`,
            dataIndex: 'totalTrend',
            key: 'gf',
            align: "center",
            width: 150,
            render: (a: any, b: any) => {
                let data: any = {}
                if (b?.['totalTrend']) {
                    data = b?.['totalTrend']
                    return <div className={style.dbox}>
                        <span style={{ color: '#13c2c2', fontWeight: 600 }}>滚服人数：<span>{data?.rollServerNum}</span></span>
                        <span style={{ color: '#faad14', fontWeight: 600 }}>滚服付费人数：<span>{data?.rollServerAmountNum}</span></span>
                        <span style={{ color: '#0f538a', fontWeight: 600 }}>滚服付费金额：<span><Statistic value={data?.rollServerAmount || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>
                        <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>滚服占比：<span>{(data?.rollServerAmountRate * 100)?.toFixed(2)}%</span></span>
                    </div>
                }
                return '--'
            },
        }],
    } as any)

    return [
        {
            label: '时间',
            data: [
                {
                    title: '开服时间', dataIndex: 'dt', label: '时间', align: 'center', width: 90, default: 4, sorter: true,
                    render: (a: any, b: any) => {
                        if (b.gameName === '总计') {
                            return '--'
                        }
                        return a
                    }
                },
            ]
        },
        {
            label: '游戏信息',
            data: [
                {
                    title: '游戏名称', dataIndex: 'gameName', label: '游戏信息', align: 'center', width: 90, default: 1,
                    render: (a: string) => (<WidthEllipsis value={a} />)
                },
                { title: '游戏ID', dataIndex: 'gameId', label: '游戏信息', align: 'center', width: 90 },
                {
                    title: '游戏应用类型', dataIndex: 'classify', label: '游戏信息', align: 'center', width: 80, default: 2,
                    render: (a: string) => (<WidthEllipsis value={gameClassifyEnum[a as keyof typeof gameClassifyEnum]} />)
                },
                {
                    title: '区服名称', dataIndex: 'serverName', label: '游戏信息', align: 'center', width: 90, default: 3,
                    render: (a: string) => (<WidthEllipsis value={a} />)
                },
                { title: '区服ID', dataIndex: 'serverId', label: '游戏信息', align: 'center', width: 90 },
            ]
        },
        {
            label: '数据',
            data: [
                {
                    title: '新用户人数', dataIndex: 'totalRegNum', label: '数据', align: 'center', width: 70, sorter: true, default: 5,
                    render: (a: number) => <Statistic value={a || 0} />
                },
                {
                    title: '创角人数', dataIndex: 'totalRoleNum', label: '数据', align: 'center', width: 70, sorter: true, default: 6,
                    render: (a: number) => <Statistic value={a || 0} />
                },
                {
                    title: '滚服人数', dataIndex: 'outTotalNum', label: '数据', align: 'center', width: 70, sorter: true, default: 7,
                    render: (a: number) => <Statistic value={a || 0} />
                },
                {
                    title: '滚服付费人数', dataIndex: 'outTotalAmountNum', label: '数据', align: 'center', width: 70, sorter: true, default: 8,
                    render: (a: number) => <Statistic value={a || 0} />
                },
                {
                    title: '滚服付费金额', dataIndex: 'outTotalAmount', label: '数据', align: 'center', width: 70, sorter: true, default: 9,
                    render: (a: number) => <Statistic value={a || 0} />
                },
                {
                    title: '付费人数', dataIndex: 'totalAmountNum', label: '数据', align: 'center', width: 70, sorter: true, default: 10,
                    render: (a: number) => <Statistic value={a || 0} />
                },
                {
                    title: '付费金额', dataIndex: 'totalAmount', label: '数据', align: 'center', width: 70, sorter: true, default: 11,
                    render: (a: number) => <Statistic value={a || 0} />
                },
                {
                    title: '滚服（付费金额）占比', dataIndex: 'outTotalRate', label: '数据', align: 'center', width: 90, sorter: true, default: 12,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
            ]
        },
        {
            // fieldSHow: {
            //     label: 'D1~Dn区间字段展示',
            //     saveField: 'date_field',
            //     defaultValue: [  // 默认展示字段
            //         { label: '新用户人数', key: 'regNum', type: 'D1~Dn' },
            //         { label: '创角人数', key: 'roleNum', type: 'D1~Dn' },
            //         { label: '活跃人数', key: 'activeNum', type: 'D1~Dn' },
            //         { label: '付费人数', key: 'amountNum', type: 'D1~Dn' },
            //         { label: '付费金额', key: 'amount', type: 'D1~Dn' },
            //         { label: '滚服人数', key: 'rollServerNum', type: 'D1~Dn' },
            //         { label: '滚服付费人数', key: 'rollServerAmountNum', type: 'D1~Dn' },
            //         { label: '滚服付费金额', key: 'rollServerAmount', type: 'D1~Dn' },
            //         { label: '滚服（付费金额）占比', key: 'rollServerAmountRate', type: 'D1~Dn' },
            //     ],
            //     data: [
            //         {
            //             label: 'D1~Dn',
            //             data: [
            //                 { label: '新用户人数', key: 'regNum', type: 'D1~Dn' },
            //                 { label: '创角人数', key: 'roleNum', type: 'D1~Dn' },
            //                 { label: '活跃人数', key: 'activeNum', type: 'D1~Dn' },
            //                 { label: '付费人数', key: 'amountNum', type: 'D1~Dn' },
            //                 { label: '付费金额', key: 'amount', type: 'D1~Dn' },
            //                 { label: '滚服人数', key: 'rollServerNum', type: 'D1~Dn' },
            //                 { label: '滚服付费人数', key: 'rollServerAmountNum', type: 'D1~Dn' },
            //                 { label: '滚服付费金额', key: 'rollServerAmount', type: 'D1~Dn' },
            //                 { label: '滚服（付费金额）占比', key: 'rollServerAmountRate', type: 'D1~Dn' },
            //             ]
            //         }
            //     ]
            // },
            label: 'D1~Dn',
            data: [
                ...day,
                ...month
            ]
        }
    ]
}

export default columns12