import { Statistic } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { SortOrder } from 'antd/lib/table/interface'
import React from 'react'
import style from './index.less'
function columns(props?: { sortOrder?: { columnKey: string, order: SortOrder | undefined } }) {
    let arr: ColumnsType<any> = Array(30).fill('').map((i: string, index: number) => {
        return {
            title: `D${index + 1}`,
            dataIndex: `d${index + 1}`,
            key: `d{index + 1}`,
            render: (a: { amount: number, roi: number, add: number, mult: number }) => {
                if (a?.amount) {
                    return <div className={style.dbox}>
                        <span style={{ color: '#0f538a', fontWeight: 600 }}>充：<span><Statistic value={a?.amount || 0} valueStyle={{ color: '#0f538a',fontWeight:600  }} /></span></span>
                        <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(a?.add * 100)?.toFixed(2)}%</span></span>
                        <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(a?.roi * 100)?.toFixed(2)}%</span></span>
                    </div>
                }
                return '--'
            },
            width: 100
        }
    })
    let newArr: ColumnsType<any> = [
        {
            title: '时间',
            dataIndex: 'dt',
            key: 'dt',
            align: 'center',
            width: 90,
            fixed: 'left',
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'dt' && props?.sortOrder?.order) || undefined,
        },
        {
            title: '投手',
            dataIndex: 'pitcher',
            key: 'pitcher',
            align: 'center',
            width: 60,
            fixed: 'left',
        },
        {
            title: '当天消耗',
            dataIndex: 'cost',
            key: 'cost',
            align: 'center',
            width: 110,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'cost' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic value={a || 0} />
            },
        },
        {
            title: '当天新用户总充值',
            dataIndex: 'reg_amount',
            key: 'reg_amount',
            align: 'center',
            width: 110,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'reg_amount' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic value={a || 0} />
            },
        },
        {
            title: '首日新用户充值',
            dataIndex: 'first_amount',
            key: 'first_amount',
            align: 'center',
            width: 110,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'first_amount' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic value={a || 0} />
            },
        },
        {
            title: '当天回本率',
            dataIndex: 'roi',
            key: 'roi',
            align: 'center',
            width: 70,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'roi' && props?.sortOrder?.order) || undefined,
            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: 'profit',
            key: 'profit',
            align: 'center',
            width: 110,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'profit' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic value={a || 0} valueStyle={a < 0 ? { color: '#0f990f', fontWeight: 600 } : {}} />
            }
        },
        {
            title: '预期盈亏',
            dataIndex: 'expect_profit',
            key: 'expect_profit',
            align: 'center',
            width:110,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'expect_profit' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic value={a || 0} valueStyle={a < 0 ? { color: '#0f990f', fontWeight: 600 } : {}} />
            }
        },
        {
            title: '预期年收益',
            dataIndex: 'annual_expect_profit',
            key: 'annual_expect_profit',
            align: 'center',
            width:110,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'annual_expect_profit' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic value={a || 0} valueStyle={a < 0 ? { color: '#0f990f', fontWeight: 600 } : {}} />
            }
        },
        {
            title: '首日roi',
            dataIndex: 'first_roi',
            key: 'first_roi',
            align: 'center',
            width: 70,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'first_roi' && props?.sortOrder?.order) || undefined,
            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: '七日ROI',
            dataIndex: 'roi7',
            key: 'roi7',
            align: 'center',
            width: 70,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'roi7' && props?.sortOrder?.order) || undefined,
            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: 'reg_amount30',
            key: 'reg_amount30',
            align: 'center',
            width: 110,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'reg_amount30' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic value={a || 0} />
            },
        },
        {
            title: '当日三十天回本率',
            dataIndex: 'roi30',
            key: 'roi30',
            align: 'center',
            width: 90,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'roi30' && props?.sortOrder?.order) || undefined,
            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: 'cost_total',
        //     key: 'cost_total',
        //     align: 'center',
        //     width: 60,
        //     sorter: true,
        //     render: (a: number) => {
        //         return <Statistic value={a || 0} />
        //     },
        // },
        // {
        //     title: '累计充值',
        //     dataIndex: 'amount_total',
        //     key: 'amount_total',
        //     align: 'center',
        //     width: 60,
        //     sorter: true,
        //     render: (a: number) => {
        //         return <Statistic value={a || 0} />
        //     },
        // },
        // {
        //     title: '总毛利额',
        //     dataIndex: 'profit_total',
        //     key: 'profit_total',
        //     align: 'center',
        //     width: 60,
        //     sorter: true,
        //     render: (a: number) => {
        //         return <span style={a < 0 ? { color: 'red' } : {}}><Statistic value={a || 0} valueStyle={a < 0 ? { color: 'red' } : {}} /></span >
        //     },
        // },
        // {
        //     title: '总回本率',
        //     dataIndex: 'roi_total',
        //     key: 'roi_total',
        //     align: 'center',
        //     width: 60,
        //     sorter: true,
        //     render: (a: number) => {
        //         return a ? (a * 100)?.toFixed(2) + '%' : '0%'
        //     }
        // },
        // {
        //     title: '个人三十天累计回本',
        //     dataIndex: 'amount_total30',
        //     key: 'amount_total30',
        //     align: 'center',
        //     width: 90,
        //     sorter: true,
        //     render: (a: number) => {
        //         return <Statistic value={a || 0} />
        //     },
        // },
        // {
        //     title: '个人三十天回本率',
        //     dataIndex: 'roi_total30',
        //     key: 'roi_total30',
        //     align: 'center',
        //     width: 90,
        //     sorter: true,
        //     render: (a: number) => {
        //         return a ? (a * 100)?.toFixed(2) + '%' : '0%'
        //     }
        // },
        // {
        //     title: '个人三十天总毛利额',
        //     dataIndex: 'profit_total30',
        //     key: 'profit_total30',
        //     align: 'center',
        //     width: 90,
        //     sorter: true,
        //     render: (a: number) => {
        //         return <Statistic value={a || 0} />
        //     },
        // },
        // {
        //     title: '平均ROI',
        //     dataIndex: 'roi_avg',
        //     key: 'roi_avg',
        //     align: 'center',
        //     width: 70,
        //     sorter: true,
        //     render: (a: number) => {
        //         return a ? (a * 100)?.toFixed(2) + '%' : '0%'
        //     }
        // },
        ...arr
    ]
    return newArr
}
export { columns }