import { Popover, 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?: { getDetails?: (channel: string) => void, data?: any[], sortOrder?: { columnKey: string, order: SortOrder | undefined } }) {
    let newArr: ColumnsType<any> = [
        {
            title: '公众号',
            dataIndex: 'channel',
            key: 'channel',
            align: 'center',
            width: 90,
            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: 'amount',
            key: 'amount',
            align: 'center',
            width: 110,
            sorter: true,
            //sortOrder: (props?.sortOrder?.columnKey === 'amount' && props?.sortOrder?.order) || undefined,
            render: (a: number, b: any) => {
                return <Popover
                    placement="top"
                    content={<ul className={style.tabls_box}>
                        <li><b>日期</b><b>充值</b></li>
                        {
                            props?.data?.map((item: any, index: number) => {
                                return <li key={index}><span>{item?.dt}</span><span><Statistic value={item?.amount || 0} /></span></li>
                            })
                        }
                    </ul>} title={b?.channel}>
                    <div onMouseOver={() => { props?.getDetails && props?.getDetails(b?.channel) }}>
                        <Statistic value={a || 0} />
                    </div>
                </Popover>

            },
        },

    ]
    return newArr
}
export { columns }
