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: 'title',
        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: 'labelInfos',
        key: 'labelInfos',
        align: 'left',
        width: 260,
        render: (a: any, b: any) => {
            const colors = ['magenta', 'red', 'volcano', 'orange', 'gold', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple']
            return <div>
                <Tooltip placement="topLeft" color="#FFF" title={
                    <Space wrap>
                        {a?.map((item: {label: string}, index: number) => {
                            return <Tag color={colors[index]} key={index} >{item?.label}</Tag>//
                        })}
                    </Space>
                }>
                    <div className="title">
                        {a?.map((item: {label: string}, index: number) => {
                            if (index > 2) return null
                            return <Tag color={colors[index]} key={index} >{item?.label}</Tag>
                        })}
                    </div>
                </Tooltip>
            </div>
        }
    },
    // {
    //     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: '上传时间',
        dataIndex: 'createTime',
        key: 'createTime',
        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?.isCollected ? <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