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

export function TableConfig(geoLocationList: any, modelList: any, editHandle: (data: any, isCopy?: boolean) => void): ColumnsType<any> {
    let arr: ColumnsType<any> = [
        {
            title: '定向模板名称',
            dataIndex: 'targetingName',
            key: 'targetingName',
            width: 300,
            fixed: 'left',
            render(value, records) {
                return <div style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
                    <div style={{ width: 'calc(100% - 20px)' }}><Typography.Text ellipsis={{ tooltip: true }}>{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: 'isSelect',
            key: 'isSelect',
            align: 'center',
            width: 120,
            render(value, record) {
                return (Object.keys(record).includes('isSelect') && !value && record?.noSelectMsg) ? <Tooltip placement="right" title={record.noSelectMsg}>
                    <span style={{color: '#FF9B48'}}>包含不支持内容</span>
                </Tooltip> : '--'
            },
        },
        {
            title: '关联账户',
            dataIndex: 'accountId',
            key: 'accountId',
            align: 'center',
            width: 80,
            ellipsis: true,
            render(value) {
                return value || '不限'
            },
        },
        {
            title: '定向模板描述',
            dataIndex: 'description',
            key: 'description',
            width: 150,
            ellipsis: true,
            render(value) {
                return value || '--'
            }
        },
        {
            title: '创建人',
            dataIndex: 'createByName',
            key: 'createByName',
            align: 'center',
            width: 100,
            ellipsis: true,
            render(value) {
                return value || '--'
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            width: 140,
            ellipsis: true,
        },
        {
            title: '操作',
            dataIndex: 'cz',
            key: 'cz',
            align: 'center',
            fixed: 'right',
            width: 95,
            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>
                </Space>
            }
        },
    ]
    return arr
}