import React from "react"
import { Button, Space, Tag, Tooltip } from "antd"
import { EditOutlined, HeartOutlined } from "@ant-design/icons"
let columns = (collects: (value: { id: number, isCollects: boolean }) => void, editHandle: (value: { item: any }) => void) => [
    {
        title: '广告标题',
        dataIndex: 'title',
        key: 'content',
        align: 'left',
        width: 480,
        render: (a: any, b: any) => {
            return <span style={{ fontSize: "12px", textOverflow: 'ellipsis', overflow: 'hidden', display: '-webkit-box', lineClamp: 2 }}>{a}</span>
        }
    },
    {
        title: '广告文案',
        dataIndex: 'content',
        key: 'content',
        align: 'left',
        width: 480,
        render: (a: any, b: any) => {
            return <span style={{ fontSize: "12px", textOverflow: 'ellipsis', overflow: 'hidden', display: '-webkit-box', lineClamp: 2 }}>{a}</span>
        }
    },
    {
        title: '开始投放时间',
        dataIndex: 'startDate',
        key: 'startDate',
        align: 'center',
        width: 100,
        render: (a: any, b: any) => {
            return <span style={{ fontSize: "12px" }}>{a}</span>
        }
    },
    {
        title: '结束投放时间',
        dataIndex: 'endDate',
        key: 'endDate',
        align: 'center',
        width: 100,
        render: (a: any, b: any) => {
            return <span style={{ fontSize: "12px" }}>{a}</span>
        }
    },
    {
        title: '点击率',
        dataIndex: 'clickRate',
        key: 'clickRate',
        align: 'center',
        width: 75,
        render: (a: any, b: any) => {
            return <span style={{ fontSize: "12px" }}>{a && (a * 100 ).toFixed(2)+ '%'}</span>
        }
    },
    {
        title: '消耗',
        dataIndex: 'consumeAmount',
        key: 'consumeAmount',
        align: 'center',
        width: 75,
        render: (a: any, b: any) => {
            return <span style={{ fontSize: "12px" }}>{a && a}</span>
        }
    },
    {
        title: '标签',
        dataIndex: 'labelInfos',
        key: 'labelInfos',
        align: 'center',
        width: 180,
        render: (a: any, b: any) => {
            return <Space>
                {
                    a?.map((item: any, index: number) => {
                        let c1 = Math.floor(Math.random() * 210) + 1
                        let c2 = Math.floor(Math.random() * 210) + 1
                        let c3 = Math.floor(Math.random() * 210) + 1
                        return <span key={index} style={{ color: `rgba(${c1},${c2},${c3},1)` }}>{item?.label}</span>
                    })
                }
            </Space>
        }
    },
    {
        title: '小说',
        dataIndex: 'novels',
        key: 'novels',
        align: 'center',
        width: 120,
        ellipsis: true,
        render: (a: any, b: any) => {
            return <span style={{ fontSize: "12px" }}>{a}</span>
        }
    },
    // {
    //     title: '类型',
    //     dataIndex: 'type',
    //     key: 'type',
    //     align: 'center',
    //     width: 70,
    //     render: (a: any, b: any) => {
    //         return a && a === 1 ? <Tag color="#2db7f5">标题</Tag> : <Tag color="#108ee9">文案</Tag>
    //     }
    // },
    {
        title: '上传作者',
        dataIndex: 'creator',
        key: 'creator',
        align: 'center',
        width: 90,
        render: (a: any, b: any) => {
            return <span style={{ fontSize: "12px" }}>{a}</span>
        }
    },
    {
        title: '操作',
        key: 'cz',
        fixed: 'right',
        width: 120,
        align: 'center',
        render: (a: any, b: any) => {
            return <Space>
                <Tooltip title='修改'>
                    <Button size='small' style={{ borderColor: '#108ee9' }} onClick={() => {
                        editHandle({ item: b })
                    }}>
                        <EditOutlined style={{ color: '#108ee9' }} />
                    </Button>
                </Tooltip>
                {
                    b?.isCollect ? <Tooltip title='取消收藏'>
                        <Button size='small' style={{ borderColor: '#F5222D' }} onClick={() => {
                            collects({ id: b.id, isCollects: false })
                        }}>
                            {/* <StrikethroughOutlined style={{ color: '#F5222D' }}/> */}
                            <HeartOutlined style={{ color: '#F5222D' }} />
                        </Button>
                    </Tooltip> :
                        <Tooltip title='收藏'>
                            <Button size='small' style={{ borderColor: '#1cac2f' }} onClick={() => {
                                collects({ id: b.id, isCollects: true })
                            }}>
                                <HeartOutlined style={{ color: '#1cac2f' }} />
                            </Button>
                        </Tooltip>
                }
            </Space>
        }
    }
]

export default columns