import { Statistic, Tooltip } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { SortOrder } from 'antd/lib/table/interface'
import React from 'react'
/**日期table配置 */
function dateColumns(props?: { sortOrder?: { columnKey: string, order: SortOrder | undefined } }) {
    const newArr: ColumnsType<any> = [
        {
            title: '日期',
            dataIndex: 'date',
            key: 'date',
            align: 'center',
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'date' && props?.sortOrder?.order) || undefined,
        },
        {
            title: '今日消耗',
            dataIndex: 'cost',
            key: 'cost',
            sorter:true,
            align: 'center',
            sortOrder: (props?.sortOrder?.columnKey === 'cost' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic value={a || 0}  />
            },
        },
        {
            title: '首日新用户充值',
            dataIndex: 'first_order_amount',
            key: 'first_order_amount',
            align: 'center',
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'first_order_amount' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic  value={a || 0}  />
            },
        },
        {
            title: '首日回收率',
            dataIndex: 'first_roi',
            key: 'first_roi',
            align: 'center',
            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: '全账号今日充值',
            dataIndex: 'order_amount',
            key: 'order_amount',
            align: 'center',
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'order_amount' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic  value={a || 0}  />
            },
        },
        {
            title: '累计新用户充值',
            dataIndex: 'reg_amount',
            key: 'reg_amount',
            align: 'center',
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'reg_amount' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic  value={a || 0}  />
            },
        },
        {
            title: '日回收率',
            dataIndex: 'today_roi',
            key: 'today_roi',
            align: 'center',
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'today_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',
            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: 'total_cost',
        //     key: 'total_cost',
        //     align: 'center',
        //     sorter:true,
        //     render: (a: number) => {
        //         return <Statistic  value={a || 0}  />
        //     },
        // },
        // {
        //     title: '累计总充值',
        //     dataIndex: 'total_amount',
        //     key: 'total_amount',
        //     align: 'center',
        //     sorter:true,
        //     render: (a: number) => {
        //         return <Statistic value={a || 0}  />
        //     },
        // },
        // {
        //     title: <Tooltip title={'累计总充值-累计总消耗'}>总毛利额</Tooltip>,
        //     dataIndex: 'total_profit',
        //     key: 'total_profit',
        //     align: 'center',
        //     sorter:true,
        //     render: (a: number) => {
        //         return <Statistic value={a || 0}  />
        //     },
        // },
        // {
        //     title: '累计回收率',
        //     dataIndex: 'total_roi',
        //     key: 'total_roi',
        //     align: 'center',
        //     sorter:true,
        //     render: (a: number) => {
        //         a = a ? parseFloat((a * 100).toFixed(2)) : 0
        //         return a + '%'
        //     },
        // },
    ]
    return newArr
}

/**公众号table配置 */
function weChatColumns(props?: { sortOrder?: { columnKey: string, order: SortOrder | undefined } }) {
    const newArr: ColumnsType<any> = [
        {
            title: '时间',
            dataIndex: 'date',
            key: 'date',
            align: 'center',
            fixed: 'left',
            width: 90,
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'date' && props?.sortOrder?.order) || undefined,
        },
        {
            title: '公众号',
            dataIndex: 'channel',
            key: 'channel',
            align: 'center',
            fixed: 'left',
            width: 70,
        },
        {
            title: '期数',
            dataIndex: 'stage',
            key: 'stage',
            align: 'center',
            width: 70,
        },
        {
            title: '平台',
            dataIndex: 'platform',
            key: 'platform',
            align: 'center',
            width: 70,
        },
        {
            title: '主投书',
            dataIndex: 'book',
            key: 'book',
            align: 'center',
            width: 70,
            ellipsis: true,
        },
        {
            title: '今日消耗',
            dataIndex: 'cost',
            key: 'cost',
            align: 'center',
            width: 80,
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'cost' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic value={a || 0}  />
            },
        },
        {
            title: '首日下单金额',
            dataIndex: 'first_order_amount',
            key: 'first_order_amount',
            align: 'center',
            width: 80,
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'first_order_amount' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic  value={a || 0}  />
            },
        },
        {
            title: '首日ROI',
            dataIndex: 'first_roi',
            key: 'first_roi',
            align: 'center',
            width: 60,
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'first_roi' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                a = a ? parseFloat((a * 100).toFixed(2)) : 0
                return a + '%'
            },
        },
        {
            title: '首日下单人数',
            dataIndex: 'first_order_user',
            key: 'first_order_user',
            align: 'center',
            width: 90,
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'first_order_user' && props?.sortOrder?.order) || undefined,
            render:(a:any)=>{
                return <Statistic  value={a || 0}  />
            }
        },
        {
            title: '首日下单次数',
            dataIndex: 'first_order_count',
            key: 'first_order_count',
            align: 'center',
            width: 90,
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'first_order_count' && props?.sortOrder?.order) || undefined,
            render:(a:any)=>{
                return <Statistic  value={a || 0}  />
            }
        },
        {
            title: '首日下单成本',
            dataIndex: 'first_per_cost',
            key: 'first_per_cost',
            align: 'center',
            width: 80,
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'first_per_cost' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic value={a || 0}  />
            },
        },
        {
            title: '浏览次数',
            dataIndex: 'view_count',
            key: 'view_count',
            align: 'center',
            width: 80,
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'view_count' && props?.sortOrder?.order) || undefined,
            render:(a:any)=>{
                return <Statistic  value={a || 0}  />
            }
        },
        {
            title: '点击次数',
            dataIndex: 'click_count',
            key: 'click_count',
            align: 'center',
            width: 80,
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'click_count' && props?.sortOrder?.order) || undefined,
            render:(a:any)=>{
                return <Statistic  value={a || 0}  />
            }
        },
        {
            title: '关注人数',
            dataIndex: 'follow_user',
            key: 'follow_user',
            align: 'center',
            width: 80,
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'follow_user' && props?.sortOrder?.order) || undefined,
            render:(a:any)=>{
                return <Statistic  value={a || 0}  />
            }
        },
        {
            title: '关注率',
            dataIndex: 'follow_rate',
            key: 'follow_rate',
            align: 'center',
            width: 80,
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'follow_rate' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                a = a ? parseFloat((a * 100).toFixed(2)) : 0
                return a + '%'
            },
        },
        {
            title: '关注成本',
            dataIndex: 'follow_per_cost',
            key: 'follow_per_cost',
            align: 'center',
            width: 80,
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'follow_per_cost' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                return <Statistic value={a || 0}  />
            },
        },
        // {
        //     title: '累计消耗',
        //     dataIndex: 'total_cost',
        //     key: 'total_cost',
        //     align: 'center',
        //     width: 80,
        //     sorter:true,
        //     render: (a: number) => {
        //         return <Statistic  value={a || 0}  />
        //     },
        // },
        {
            title: '回本率',
            dataIndex: 'back_rate',
            key: 'back_rate',
            align: 'center',
            width: 80,
            sorter:true,
            sortOrder: (props?.sortOrder?.columnKey === 'back_rate' && props?.sortOrder?.order) || undefined,
            render: (a: number) => {
                a = a ? parseFloat((a * 100).toFixed(2)) : 0
                return a + '%'
            },
        },
    ]
    return newArr
}

export { weChatColumns, dateColumns }