import { ColumnsType } from "antd/es/table"
import { Flex, Popconfirm, Image } from "antd"
import { copy } from "@/utils/utils"


export function TableConfig(
    handleEdit?: (d: Record<string, any>, isCopy?: boolean) => void,
    handleDel?: (data: number[]) => void,
    handleCode?: (id: number) => void
): ColumnsType<any> {

    const arr: ColumnsType<any> = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            width: 70,
            align: 'center'
        },
        {
            title: '落地页名称',
            dataIndex: 'name',
            key: 'name',
            width: 150,
            ellipsis: true
        },
        {
            title: 'Sign',
            dataIndex: 'sign',
            key: 'sign',
            width: 150,
            ellipsis: true
        },
        {
            title: '落地页标题',
            dataIndex: 'pageName',
            key: 'pageName',
            width: 150,
            ellipsis: true,
            render(_, record) {
                return JSON.parse(record?.content || '{}')?.pageName || ''
            },
        },
        {
            title: '企微主体',
            dataIndex: 'corpName',
            key: 'corpName',
            width: 120,
            align: 'center',
            ellipsis: true,
            render: (v: string) => v || '--'
        },
        {
            title: '企微客服号',
            dataIndex: 'corpUserList',
            key: 'corpUserList',
            width: 160,
            align: 'center',
            ellipsis: true,
            render: (v: any[]) => v?.map(item => item.corpUserName)?.join('、') || '--'
        },
        {
            title: '书名',
            dataIndex: 'bookName',
            key: 'bookName',
            width: 150,
            align: 'center',
            ellipsis: true,
            render: (v: string) => v || '--'
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            width: 150,
            ellipsis: true,
            render: (v: string) => v || '--'
        },
        {
            title: '小程序AppId',
            dataIndex: 'appid',
            key: 'appid',
            width: 150,
            align: 'center',
            render: () => `wxed3542b04192b2ee`
        },
        {
            title: '小程序路径',
            dataIndex: 'path',
            key: 'path',
            width: 350,
            ellipsis: true,
            render: (_, records) => <a onClick={() => copy(`pages/Ldpage/index?pageId=${records.sign}`)}>pages/Ldpage/index?pageId={records.sign}</a>
        },
        {
            title: '项目组',
            dataIndex: 'projectGroupIdList',
            key: 'projectGroupIdList',
            width: 120,
            align: 'center',
            ellipsis: true,
            render: (v: { projectGroupName: string }[]) => v?.map(item => item?.projectGroupName)?.join('、') || '--'
        },
        {
            title: '客服号二维码',
            dataIndex: 'qrCodeList',
            key: 'qrCodeList',
            width: 250,
            render: (v: { urlList: string[] }[]) => v?.map(item => item?.urlList?.map((item, i) => <Image
                key={i}
                height={20}
                alt="basic"
                src={item}
            />)) || '--'
        },
        {
            title: '悬浮客服号二维码',
            dataIndex: 'qrCodeFloatList',
            key: 'qrCodeFloatList',
            width: 250,
            render: (v: { urlList: string[] }[]) => v?.map(item => item?.urlList?.map((item, i) => <Image
                key={i}
                height={20}
                alt="basic"
                src={item}
            />)) || '--'
        },
        {
            title: '创建人',
            dataIndex: 'createBy',
            key: 'createBy',
            align: 'center',
            width: 70
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            width: 140,
            render: (value) => {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '操作',
            dataIndex: 'cz',
            key: 'cz',
            width: 250,
            fixed: 'right',
            render: (_, records) => {
                return <Flex gap={4}>
                    <a onClick={() => handleEdit?.(records, true)}>复制</a>
                    <a onClick={() => handleEdit?.(records)}>修改</a>
                    <a onClick={() => handleCode?.(records.id)}>小程序预览链接</a>
                    <Popconfirm
                        title="确定删除？"
                        onConfirm={() => { handleDel?.([records.id]) }}
                    >
                        <a style={{ color: 'red' }}>删除</a>
                    </Popconfirm>
                </Flex>
            }
        },
    ]
    return arr
}