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

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


    // 用户LTV月
    let defaultStartM = 4
    let activeMonth = Array(24).fill('').map((_, item) => {
        let field = `m${item + 1}Trend`
        let data: any = {
            title: `M${item + 1}`,
            dataIndex: field,
            label: "留存数据",
            align: "center",
            width: 125,
            render: (_: any, b: any) => {
                let date1 = moment()
                if (b?.costDate === '总计') {
                    if (b?.beginDay) {
                        date1 = moment(b?.beginDay)
                    } else {
                        date1 = moment()
                    }
                } else {
                    date1 = moment(b.dt)
                }
                const inputDate = moment(date1); // 将输入日期转换为 Moment 对象  
                const currentDate = moment().endOf('month'); // 获取当前日期  
                const difference = currentDate.diff(inputDate, 'months'); // 计算相差的月数  
                if (item + 1 <= difference) {
                    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?.activeNum}</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 style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 5, fontSize: 12, fontWeight: 'bold' }}>
                                        角色留存
                                        <Tooltip title="鼠标悬停展示完整名称">
                                            <QuestionCircleOutlined />
                                        </Tooltip>
                                    </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 style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 5, fontSize: 12, fontWeight: 'bold' }}>
                                        付费留存
                                        <Tooltip title="鼠标悬停展示完整名称">
                                            <QuestionCircleOutlined />
                                        </Tooltip>
                                    </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 + item
        return data
    })

    return [
        {
            label: '游戏信息',
            data: [
                {
                    title: '推广游戏名称', dataIndex: 'gameName', label: '游戏信息', align: 'center', width: 70, default: 1,
                    render: (a: string, b: any) => (<WidthEllipsis isCopy={b?.costDate !== '总计'} value={a} />)
                },
                {
                    title: '推广游戏应用类型', dataIndex: 'gameClassify', label: '游戏信息', align: 'center', width: 80,
                    render: (a: string) => (<WidthEllipsis value={gameClassifyEnum[a as keyof typeof gameClassifyEnum]} />)
                }
            ]
        },
        {
            label: '用户数据',
            data: [
                {
                    title: '注册人数', dataIndex: 'regNum', label: '用户数据', align: 'center', width: 70, sorter: true, default: 2,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '注册时间', dataIndex: 'dt', label: '用户数据', align: 'center', width: 90, default: 3,
                    render: (a: string) => (<WidthEllipsis value={a} />)
                }
            ]
        },
        {
            label: '留存数据',
            data: [
                ...activeMonth
            ]
        },
    ]
}

export default columnsUser12