import { Button, Popconfirm, Popover, Space, Tag, Typography } from "antd";
import { ColumnsType } from "antd/es/table";
import React from "react";
import TargetingTooltip from "../../components/TargetingTooltip";
import { QuestionCircleFilled } from "@ant-design/icons";


export function TableConfig(geoLocationList: any, modelList: any, editHandle: (data: any, isCopy?: boolean) => void, del: (id: number) => void): ColumnsType<any> {
    let arr: ColumnsType<any> = [
        {
            title: '定向模板名称',
            dataIndex: 'targetingName',
            key: 'targetingName',
            width: 300,
            ellipsis: true,
            render(value, records) {
                return <div style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
                    <div style={{ width: 'calc(100% - 20px)' }}><Typography.Text ellipsis={{ tooltip: true }} style={{ fontSize: 12 }}>{value}</Typography.Text></div>
                    <Popover
                        placement="right"
                        overlayInnerStyle={{ maxWidth: 350, maxHeight: 350, overflow: 'hidden', overflowY: 'auto' }}
                        mouseEnterDelay={0.5}
                        content={<TargetingTooltip
                            data={records?.targeting}
                            geoLocationList={geoLocationList}
                            modelList={modelList}
                            taskType={records?.taskType}
                        />}
                    >
                        <QuestionCircleFilled />
                    </Popover>
                </div>
            }
        },
        {
            title: '类型',
            dataIndex: 'taskType',
            key: 'taskType',
            align: 'center',
            width: 70,
            render(value) {
                return value === 'GAME' ? <Tag color="#f50" style={{ fontSize: 12 }}>游戏</Tag> : value === 'NOVEL' ? <Tag color="#2db7f5" style={{ fontSize: 12 }}>小说</Tag> : <span style={{ fontSize: 12 }}>--</span>
            },
        },
        {
            title: '关联账户',
            dataIndex: 'accountId',
            key: 'accountId',
            align: 'center',
            width: 80,
            ellipsis: true,
            render(value) {
                return <span style={{ fontSize: 12 }}>{value || '不限'}</span>
            },
        },
        {
            title: '定向模板描述',
            dataIndex: 'description',
            key: 'description',
            width: 150,
            ellipsis: true,
            render(value) {
                return <span style={{ fontSize: 12 }}>{value || '--'}</span>
            }
        },
        {
            title: '创建人',
            dataIndex: 'createByName',
            key: 'createByName',
            align: 'center',
            width: 100,
            ellipsis: true,
            render(value) {
                return <span style={{ fontSize: 12 }}>{value || '--'}</span>
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            width: 145,
            ellipsis: true,
            render(value) {
                return <span style={{ fontSize: 12 }}>{value || '--'}</span>
            }
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            align: 'center',
            width: 145,
            ellipsis: true,
            render(value) {
                return <span style={{ fontSize: 12 }}>{value || '--'}</span>
            }
        },
        {
            title: '操作',
            dataIndex: 'cz',
            key: 'cz',
            align: 'center',
            fixed: 'right',
            width: 120,
            render: (a: any, b: any) => {
                return <Space wrap>
                    <Button type="link" style={{ padding: 0, fontSize: 12 }} onClick={() => { editHandle(b) }} >编辑</Button>
                    <Button type="link" style={{ padding: 0, fontSize: 12 }} onClick={() => { editHandle(b, true) }} >复制</Button>
                    <Popconfirm
                        title="确定删除？"
                        onConfirm={() => { del(b.id) }}
                    >
                        <Button type="link" style={{ padding: 0, fontSize: 12 }} danger>删除</Button>
                    </Popconfirm>
                </Space>
            }
        },
    ]
    return arr
}