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}`,
            // className: 'table_color_bule',
            // children: [
            //     {
            //         title:<span style={{ color: '#2196f3' }}>人数</span>,
            //         dataIndex: `D${index + 1}`,
            //         width: 50,
            //         align:'center',
            //         render: (a: any, b: any) => {
            //            return <Statistic value={b[`d${index + 1}`]?.act_user || 0} valueStyle={{ color: '#2196f3' }} />
            //         }
            //     },
            //     {
            //         title:  <span style={{ color: '#311b92' }}>成本</span>,
            //         dataIndex: `D${index + 1}`,
            //         width: 65,
            //         align:'center',
            //         render: (a: any, b: any) => {
            //           return  <Statistic value={b[`d${index + 1}`]?.act_cost_per_cost || 0} valueStyle={{ color: '#311b92' }} />
            //         }
            //     },
            //     {
            //         title: <span style={{ color: '#ff5722' }}>占比</span>,
            //         dataIndex: `D${index + 1}`,
            //         width: 65,
            //         align:'center',
            //         render: (a: any, b: any) => {
            //           return  <span style={{ color: '#ff5722' }}>{b[`d${index + 1}`]?.act_rate ? (b[`d${index + 1}`]?.act_rate * 100)?.toFixed(2) + '%' : '0%'}</span>
            //         }
            //     },
            // ],
            // align: 'center',
            render: (a: any, b: any) => {
                if (b[`d${index + 1}`]?.act_user) {
                    return <div className={`${style.dbox}`}>
                        <span style={{ color: '#0f538a',fontWeight:600 }}>人数：<span><Statistic value={b[`d${index + 1}`]?.act_user || 0} valueStyle={{ color: '#0f538a',fontWeight:600 }} /></span></span>
                        <span style={{ color: 'rgb(12,130,16)',fontWeight:600 }}>成本：<span><Statistic value={b[`d${index + 1}`]?.act_cost_per_cost || 0} valueStyle={{ color: '#311b92' }} /></span></span>
                        <span style={{ color: '#ff5722',fontWeight:600 }}>占比：<span>{b[`d${index + 1}`]?.act_rate ? (b[`d${index + 1}`]?.act_rate * 100)?.toFixed(2) + '%' : ''}</span></span>
                    </div>
                }
                return '--'
            },
            width:110
        }
    })
    let newArr: ColumnsType<any> = [
        {
            title: '时间',
            dataIndex: 'date',
            key: 'date',
            align: 'center',
            width: 95,
            fixed: 'left',
            //sortOrder: (props?.sortOrder?.columnKey === 'date' && props?.sortOrder?.order) || undefined,
            sorter: true,
        },
        {
            title: '公众号',
            dataIndex: 'channel',
            key: 'channel',
            align: 'center',
            width: 85,
            fixed: 'left',
        },
        {
            title: '投手',
            dataIndex: 'pitcher',
            key: 'pitcher',
            align: 'center',
            width: 50,
            fixed: 'left',
        },
        {
            title: '期数',
            dataIndex: 'stage',
            key: 'stage',
            align: 'center',
            width: 70,
            fixed: 'left',
        },
        {
            title: '主投书',
            dataIndex: 'book',
            key: 'book',
            align: 'center',
            width: 95,
            fixed: 'left',
            ellipsis:true
        },
        {
            title: '当天消耗',
            dataIndex: 'cost',
            key: 'cost',
            align: 'center',
            width: 100,
            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: 95,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'reg_amount' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic value={a || 0} />
            },
        },
        {
            title: '回本率',
            dataIndex: 'roi',
            key: 'roi',
            align: 'center',
            width: 85,
            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: 'new_follow_user',
            key: 'new_follow_user',
            align: 'center',
            width: 70,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'new_follow_user' && props?.sortOrder?.order) || undefined,
            render: (a: any) => {
                return <Statistic value={a || 0} />
            }
        },
        {
            title: '新增粉丝成本',
            dataIndex: 'new_follow_per_cost',
            key: 'new_follow_per_cost',
            align: 'center',
            width: 70,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'new_follow_per_cost' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic value={a || 0} />
            },
        },
        {
            title: '总充值人数',
            dataIndex: 'order_user',
            key: 'order_user',
            align: 'center',
            width: 70,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'order_user' && props?.sortOrder?.order) || undefined,
            render: (a: any) => {
                return <Statistic value={a || 0} />
            }
        },
        {
            title: '总充值次数',
            dataIndex: 'order_count',
            key: 'order_count',
            align: 'center',
            width: 70,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'order_count' && props?.sortOrder?.order) || undefined,
            render: (a: any) => {
                return <Statistic value={a || 0} />
            }
        },
        {
            title: '充值用户成本',
            dataIndex: 'order_user_per_cost',
            key: 'order_user_per_cost',
            align: 'center',
            width: 70,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'order_user_per_cost' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic  value={a || 0} />
            },
        },
        {
            title: '七日平均激活率',
            dataIndex: 'day7_avg_act_rate',
            key: 'day7_avg_act_rate',
            align: 'center',
            width: 85,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'day7_avg_act_rate' && 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: 'day7_avg_act_per_cost',
            key: 'day7_avg_act_per_cost',
            align: 'center',
            width: 85,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'day7_avg_act_per_cost' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic  value={a || 0} />
            },
        },
        {
            title: '30日平均激活率',
            dataIndex: 'day30_avg_act_rate',
            key: 'day30_avg_act_rate',
            align: 'center',
            width: 85,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'day30_avg_act_rate' && 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: '30日平均激活成本',
            dataIndex: 'day30_avg_act_cost',
            key: 'day30_avg_act_cost',
            align: 'center',
            width: 95,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'day30_avg_act_cost' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic  value={a || 0} />
            },
        },
        {
            title: '总激活成本',
            dataIndex: 'act_per_cost',
            key: 'act_per_cost',
            align: 'center',
            width: 70,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'act_per_cost' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic value={a || 0} />
            },
        },
        ...arr
    ]
    return newArr
}
export { columns }