import { copy } from "@/utils/utils";
import { EyeOutlined } from "@ant-design/icons";
import { Badge, Popover, Space } from "antd"
import React, { useState } from "react"
import AdcreativePopover from "../../components/adcreativePopover";
import PreviewAd from "../../components/previewAd";
import PreviewOrigin from "../../components/previewOrigin";
type Props = {
    arr: any[],
    title: string,
    key:string
}
const Modal: React.FC<Props> = (props) => {

    /***************************/
    const { arr, title ,key} = props
    const [visible, setVisible] = useState<boolean>(false)
    function goTo(obj:any){
        sessionStorage.setItem('adqQuery',obj)
        location.href = location.origin + '/#/launchSystemNew/adq'
    }
    /***************************/
    return <Popover
        content={<Space direction="vertical">
            {arr?.map(id => {
                return <a key={id} onClick={()=>goTo({[key]:id})}>{id}</a>
            })}
        </Space>}
        title={title}
        trigger="click"
        placement="left"
        open={visible}
        onOpenChange={(newVisible) => { setVisible(newVisible) }}
    >
        {/* 查看 */}
        <a style={{ color: '#1890ff', fontSize: 12 }}><EyeOutlined /></a>
    </Popover>
}
function tableConfig(copyCreative: (data: any) => void, callback: (data: any) => void): any {
    function goTo(obj:any){
        sessionStorage.setItem('adqQuery',obj)
        location.href = location.origin + '/#/launchSystemNew/adq'
    }
    return [
        {
            title: '预览',
            dataIndex: 'preview',
            key: 'preview',
            align: 'center',
            width: 90,
            fixed: 'left',
            render: (a: string, b: any) => {
                if (b?.createStatus === 100) {
                    return <PreviewOrigin adgroupId={b?.adgroupIds[0]} accountId={b?.accountId}/>
                    // return <PreviewAd adgroupId={b?.adgroupIds[0]} accountId={b?.accountId}/>
                } else {
                    return '--'
                }
            }
        },
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
            width: 65,
            fixed: 'left'
        },
        {
            title: '媒体账户',
            dataIndex: 'accountId',
            key: 'accountId',
            align: 'center',
            width: 90,
            fixed: 'left',
            render: (a: any, b: any) => {
                return <a onClick={()=>{goTo(JSON.stringify({accountId:a}))}}>{a || '--'}</a>
            }
        },
        {
            title: '计划ID',
            dataIndex: 'campaignIds',
            key: 'campaignIds',
            align: 'center',
            width: 100,
            fixed: 'left',
            render: (a: any[]) => {
                return a ? a?.length <= 1 ? <a onClick={()=>{goTo(JSON.stringify({campaignId:a[0]}))}}>{a}</a> : <Modal arr={a} title={'计划ID'} key='campaignId'/> : '--'
            }
        },
        {
            title: '广告ID',
            dataIndex: 'adgroupIds',
            key: 'adgroupIds',
            align: 'center',
            width: 100,
            render: (a: any[]) => {
                return a ? a?.length <= 1 ? <a onClick={()=>{goTo(JSON.stringify({adgroupId:a[0]}))}}>{a}</a> : <Modal arr={a} title={'广告ID'} key='adgroupId'/> : '--'
            }
        },
        {
            title: '创意ID',
            dataIndex: 'adcreativeIds',
            key: 'adcreativeIds',
            align: 'center',
            width: 100,
            render: (a: any[]) => {
                return a ? a?.length <= 1 ? <a onClick={()=>{goTo(JSON.stringify({adcreativeId:a[0]}))}}>{a}</a> : <Modal arr={a} title={'创意ID'}  key='adcreativeId'/> : '--'
            }
        },
        {
            title: '商品ID',
            dataIndex: 'productId',
            key: 'productId',
            width: 150,
            ellipsis: true,
            render: (a: any, b: any) => {
                return <span style={{ fontSize: "12px" }}>{a || '--'}</span>
            }
        },
        {
            title: '品牌形象',
            dataIndex: 'promotedObjectId',
            key: 'promotedObjectId',
            width: 140,
            align: 'center',
            ellipsis: true,
            render: (a: any, b: any) => {
                return <span style={{ fontSize: "12px" }}>{a || '--'}</span>
            }
        },
        {
            title: '创意',
            dataIndex: 'sysAdcreativeId',
            key: 'sysAdcreativeId',
            align: 'center',
            width: 80,
            ellipsis: true,
            render: (a: any, b: any) => {
                if (a) {
                    return <AdcreativePopover id={a} name={b?.sysAdcreative?.adcreativeName} />
                } else {
                    return <span>--</span>
                }
            }
        },
        {
            title: '任务反馈',
            dataIndex: 'count',
            key: 'count',
            width: 250,
            render: (a: any, b: any) => {
                return <Space style={{ fontSize: "12px" }} size={20}>
                    <span><Badge status="processing" />总条数：{a}条</span>
                    <span><Badge status="success" />成功：{b?.successCount || 0}条</span>
                </Space>
            }
        },
        {
            title: '落地页ID',
            dataIndex: 'sysPageId',
            key: 'sysPageId',
            align: 'center',
            width: 80,
            render: (a: any, b: any) => {
                if (a) {
                    return <Space><span style={{ fontSize: "12px" }}>{a}</span><a style={{ color: '#1890ff', fontSize: 12 }} onClick={() => { callback(b.sysPageId) }}><EyeOutlined /></a></Space>
                } else {
                    return <span>--</span>
                }
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            width: 160,
            ellipsis: true,
            render: (a: any, b: any) => {
                return <span style={{ fontSize: "12px" }}>{a || '--'}</span>
            }
        },
        {
            title: '创建状态',
            dataIndex: 'createStatus',
            key: 'createStatus',
            align: 'center',
            width: 90,
            fixed: 'right',
            render: (a: any, b: any) => {
                if (a) {
                    return a === 0 ? <Badge status="warning" text={<span style={{ fontSize: "12px" }}>创建中</span>} /> : a === 100 ? <Badge status="success" text={<span style={{ fontSize: "12px" }}>创建成功</span>} /> : <Badge status="error" text={<span style={{ fontSize: "12px" }}>创建失败</span>} />
                } else {
                    return <span>--</span>
                }
            }
        },
        {
            title: <span style={{ padding: '0 8px' }}>失败原因</span>,
            dataIndex: 'failMsgs',
            key: 'failMsgs',
            align: 'left',
            ellipsis: true,
            width: 250,
            fixed: 'right',
            render: (a: any, b: any) => {
                return <a style={{ fontSize: "12px" }} onClick={() => copy(a)}>{a || '--'}</a>
            }
        }
    ]
}

export default tableConfig