import React from 'react'
import { Space, Switch, Image, Popover, TableProps, Typography, Badge } from 'antd'
import '../index.less'
import { copy } from '@/utils/utils'
import { DELIVERY_MODE, DYNAMIC_CREATIVE_TYPE } from '../const'
import { ELEMENT_ENUM, SITE_SET_ENUM, creativeTemplate } from '../../tencentAdPutIn/const'
import { AD_STATUS } from '.'
const { Text } = Typography;

function tableConfig(reviewStatusDetails: (value: any) => void, suspendHandle: (b: any, suspend: '启动' | '暂停') => void): any {
    return [
        {
            title: '启停',
            dataIndex: 'configuredStatus',
            key: 'configuredStatus',
            align: 'center',
            width: 40,
            fixed: 'left',
            render: (a: string, b: any) => {
                return <Switch size="small" checked={a === 'AD_STATUS_NORMAL'} onChange={(checked) => { suspendHandle(b, checked ? '启动' : '暂停') }} />
            }
        },
        {
            title: '品牌形象',
            dataIndex: 'brand',
            key: 'brand',
            width: 110,
            ellipsis: true,
            render: (_: any[], b: any) => {
                let brand = b?.creativeComponents?.brand
                return brand?.length > 0 ? <Space>
                    <img src={brand?.[0]?.value?.brandImageUrl} height={18} />
                    <span>{brand?.[0]?.value?.brandName}</span>
                </Space> : '--'
            }
        },
        {
            title: '文本标题',
            dataIndex: 'title',
            key: 'title',
            width: 140,
            ellipsis: true,
            render: (_: any[], b: any) => {
                let title = b?.creativeComponents?.title
                return title?.length > 0 ? title.map((item: { value: { content: any } }, index: number) => `标题${index + 1}:${item?.value?.content}`)?.toString() : '--'
            }
        },
        {
            title: '文本描述',
            dataIndex: 'description',
            key: 'description',
            width: 140,
            ellipsis: true,
            render: (_: any[], b: any) => {
                let description = b?.creativeComponents?.description
                return description?.length > 0 ? description.map((item: { value: { content: any } }, index: number) => `描述${index + 1}:${item?.value?.content}`)?.toString() : '--'
            }
        },
        {
            title: '单图片',
            dataIndex: 'image',
            key: 'image',
            width: 140,
            ellipsis: true,
            render: (_: any[], b: any) => {
                let image = b?.creativeComponents?.image
                return <div style={{ minHeight: 50, display: 'flex', alignItems: 'center' }}>
                    {image?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto' }}>
                        <Image.PreviewGroup>
                            {image?.map((item: { componentId: string; value: { imageUrl: string | undefined } }, index: string) => <Image key={item?.componentId + '_' + index} src={item?.value?.imageUrl} height={45} />)}
                        </Image.PreviewGroup>
                    </div> : '--'}
                </div>
            }
        },
        {
            title: '图集',
            dataIndex: 'imageList',
            key: 'imageList',
            width: 140,
            ellipsis: true,
            render: (_: any[], b: any) => {
                let imageList = b?.creativeComponents?.imageList
                return imageList?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto', display: 'flex', gap: 10 }}>
                    {imageList?.map((item: { value: { list: any[] } }, index: React.Key | null | undefined) => <Image.PreviewGroup key={index}>
                        {item?.value?.list?.map((list: any, i: number) => <Image key={i} src={list?.imageUrl} height={45} />)}
                    </Image.PreviewGroup>)}
                </div> : '--'
            }
        },
        {
            title: '视频',
            dataIndex: 'video',
            key: 'video',
            width: 140,
            ellipsis: true,
            render: (_: any[], b: any) => {
                let video = b?.creativeComponents?.video
                return video?.length > 0 ? <Popover
                    placement='right'
                    content={< div >
                        <Space style={{ maxWidth: 300, display: 'flex', flexFlow: 'row wrap', margin: '10px 0' }}>
                            {video?.map((item: { value: { videoUrl: string | undefined } }, index: React.Key | null | undefined) => <video key={index} src={item?.value?.videoUrl} style={{ width: 250 }} controls />)}
                        </Space>
                    </div >}
                    destroyTooltipOnHide
                    mouseEnterDelay={0.5}
                >
                    <Space style={{ width: '100%' }}>
                        <video src={video?.[0]?.value?.videoUrl} style={{ maxHeight: 40, maxWidth: 60 }} />
                    </Space>
                </Popover> : '--'
            }
        },
        {
            title: '轮播',
            dataIndex: 'floatingZone',
            key: 'floatingZone',
            width: 150,
            ellipsis: true,
            render: (_: any[], b: any) => {
                let floatingZone = b?.creativeComponents?.floatingZone
                return floatingZone?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto' }}>
                    {floatingZone?.map((item: { value: { floatingZoneImageUrl: string | undefined; floatingZoneName: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined; floatingZoneDesc: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined } }, index: React.Key | null | undefined) => <div key={index} style={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                        <div style={{ width: 40 }}>
                            <Image src={item?.value?.floatingZoneImageUrl} width={40} height={40} />
                        </div>
                        <div>
                            <span>{item?.value?.floatingZoneName}</span><br />
                            <span>{item?.value?.floatingZoneDesc}</span>
                        </div>
                    </div>)}
                </div> : '--'
            }
        },
        {
            title: '所属账号',
            dataIndex: 'accountId',
            key: 'accountId',
            align: 'center',
            width: 80,
            ellipsis: true,
            render: (a: string) => {
                return <Space>
                    <a onClick={() => copy(a)} >{a}</a>
                </Space>
            }
        },
        {
            title: '广告ID',
            dataIndex: 'adgroupId',
            key: 'adgroupId',
            align: 'center',
            width: 100,
            ellipsis: true,
            render: (a: string, b: any) => {
                return <Space>
                    <a onClick={() => copy(a)} >{a}</a>
                </Space>
            }
        },
        {
            title: '创意名称',
            dataIndex: 'dynamicCreativeName',
            key: 'dynamicCreativeName',
            align: 'center',
            width: 120,
            ellipsis: true
        },
        {
            title: '创意ID',
            dataIndex: 'dynamicCreativeId',
            key: 'dynamicCreativeId',
            align: 'center',
            width: 100,
            ellipsis: true,
            render: (a: string, b: any) => {
                return <a onClick={() => copy(a)} >{a}</a>
            }
        },
        {
            title: '是否已删除',
            dataIndex: 'isDeleted',
            key: 'isDeleted',
            align: 'center',
            width: 60,
            render: (a: any) => {
                return <Badge status={!a ? "processing" : "error"} text={a ? '是' : '否'} />
            }
        },
        {
            title: '投放模式',
            dataIndex: 'deliveryMode',
            key: 'deliveryMode',
            align: 'center',
            width: 120,
            render: (a: string) => {
                return DELIVERY_MODE[a as keyof typeof DELIVERY_MODE]
            }
        },
        {
            title: '创意形式匹配方式',
            dataIndex: 'dynamicCreativeType',
            key: 'dynamicCreativeType',
            align: 'center',
            width: 120,
            render: (a: string) => {
                return DYNAMIC_CREATIVE_TYPE[a as keyof typeof DYNAMIC_CREATIVE_TYPE]
            }
        },
        {
            title: '创意形式',
            dataIndex: 'creativeTemplateId',
            key: 'creativeTemplateId',
            align: 'center',
            width: 120,
            ellipsis: true,
            render: (a: string) => {
                return creativeTemplate[a as keyof typeof creativeTemplate] || '--'
            }
        },
        {
            title: '审核状态',
            dataIndex: 'reviewStatusCn',
            key: 'reviewStatusCn',
            align: 'center',
            width: 100,
            render: (a: string, b: any) => {
                return <Space direction="vertical" size={0}>
                    <span style={{ fontSize: 12 }}>{a}</span>
                    <a style={{ fontSize: 12 }} onClick={() => { reviewStatusDetails(b) }}>详情</a>
                </Space>
            }
        }
    ]
}

export const tableConfigDetail = (): TableProps<any>['columns'] => {


    return [
        {
            title: '创意组件',
            dataIndex: 'componentInfo',
            key: 'componentInfo',
            width: 180,
            render: (value) => {
                if (value) {
                    let { componentId, componentType } = value
                    return <Space direction="vertical" size={0}>
                        <Text style={{ fontSize: 12 }}>{ELEMENT_ENUM[componentType as keyof typeof ELEMENT_ENUM]}</Text>
                        <Text type="secondary" style={{ fontSize: 12 }}>{componentId}</Text>
                    </Space>
                }
                return null
            },
            onCell: (record) => ({
                rowSpan: record.rowSpan
            })
        },
        {
            title: '组件审核结果',
            dataIndex: 'temReviewStatus',
            key: 'temReviewStatus',
            width: 120,
            render: (_, records) => {
                if (!records?.componentInfo) {
                    return null
                }
                return <span style={{ fontSize: 12 }}>{AD_STATUS[records?.componentInfo?.reviewStatus  as keyof typeof AD_STATUS]}</span>
            }
        },
        {
            title: '组件元素',
            dataIndex: 'elementName',
            key: 'elementName',
            width: 155,
            render: (value, records) => {
                return <>
                    <Text type="secondary" style={{ fontSize: 12 }}>{value}</Text>
                    <div style={{ maxWidth: 178 }}>
                        {records.elementType === 'VIDEO' ? <Popover
                            placement='right'
                            content={< div >
                                <Space style={{ maxWidth: 300, display: 'flex', flexFlow: 'row wrap', margin: '10px 0' }}>
                                    <video src={records.elementValue} style={{ width: 250 }} controls />
                                </Space>
                            </div >}
                            destroyTooltipOnHide
                            mouseEnterDelay={0.5}
                        >
                            <video src={records.elementValue} style={{ maxHeight: 40, maxWidth: 60 }} />
                        </Popover> : records.elementType === 'IMAGE' ? <img src={records.elementValue} style={{ maxHeight: 40, maxWidth: 60 }} />
                            : <Text style={{ fontSize: 12 }} ellipsis strong>{records.elementValue}</Text>}
                    </div>
                </>
            }
        },
        {
            title: '元素审核结果',
            dataIndex: 'reviewStatus',
            key: 'reviewStatus',
            width: 120,
            render: (value) => {
                return <span style={{ fontSize: 12 }}>{AD_STATUS[value as keyof typeof AD_STATUS]}</span>
            }
        },
        {
            title: '驳回原因',
            dataIndex: 'elementRejectDetailInfo',
            key: 'elementRejectDetailInfo',
            width: 560,
            render: (value) => {
                return value ? <Text style={{ fontSize: 12 }}>{value?.map((item: { reason: any }) => item.reason)?.join('，')}</Text> : null
            }
        },
        {
            title: '影响版位',
            dataIndex: 'siteSetList',
            key: 'siteSetList',
            width: 125,
            render: (_, records) => {
                let siteSetList = records?.elementRejectDetailInfo?.siteSetList
                return siteSetList ? <Text style={{ fontSize: 12 }}>{siteSetList?.map((item: { siteSet: any }) => SITE_SET_ENUM[item?.siteSet as keyof typeof SITE_SET_ENUM])?.join('，')}</Text> : null
            }
        },
    ]
}

export const columnsLog = (): TableProps<any>['columns'] => [
    {
        title: '创意名称',
        dataIndex: 'creativeName',
        key: 'creativeName',
        width: 280,
        ellipsis: true,
        fixed: 'left',
        render: (value) => {
            return <span style={{ fontSize: "12px" }}>{value}</span>
        }
    },
    {
        title: '创意ID',
        dataIndex: 'creativeId',
        key: 'creativeId',
        align: 'center',
        width: 100,
        ellipsis: true,
        fixed: 'left',
        render: (value) => {
            return <span style={{ fontSize: "12px", cursor: 'pointer' }}>{value}</span>
        }
    },
    {
        title: '所属账号',
        dataIndex: 'accountId',
        key: 'accountId',
        align: 'center',
        width: 80,
        ellipsis: true,
        render: (value) => {
            return <span style={{ fontSize: "12px" }}>{value}</span>
        }
    },
    {
        title: '广告ID',
        dataIndex: 'adgroupId',
        key: 'adgroupId',
        align: 'center',
        width: 100,
        ellipsis: true,
        render: (value) => {
            return <span style={{ fontSize: "12px", cursor: 'pointer' }}>{value}</span>
        }
    },
    {
        title: '执行时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 140,
        align: 'center',
        render: (value) => {
            return <span style={{ fontSize: 12 }}>{value}</span>
        }
    },
    {
        title: '操作者名字',
        dataIndex: 'operationByName',
        key: 'operationByName',
        width: 65,
        align: 'center',
        render: (value) => {
            return <span style={{ fontSize: 12 }}>{value}</span>
        }
    },
    {
        title: '操作类型名称',
        dataIndex: 'operationName',
        key: 'operationName',
        width: 70,
        align: 'center',
        render: (value) => {
            return <span style={{ fontSize: 12 }}>{value}</span>
        }
    },
    {
        title: '操作数',
        dataIndex: 'operationCount',
        key: 'operationCount',
        width: 60,
        align: 'center',
        render: (value) => {
            return <span style={{ fontSize: 12 }}>{value}</span>
        }
    },
    {
        title: '成功数',
        dataIndex: 'successCount',
        key: 'successCount',
        width: 60,
        align: 'center',
        render: (value) => {
            return <span style={{ fontSize: 12 }}>{value}</span>
        }
    },
    {
        title: '失败数',
        dataIndex: 'failCount',
        key: 'failCount',
        width: 60,
        align: 'center',
        render: (value) => {
            return <span style={value > 0 ? { color: 'red', fontSize: 12 } : { fontSize: 12 }}>{value}</span>
        }
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 70,
        align: 'center',
        render: (a: any) => {
            let obj = {
                '成功': 'success',
                '失败': 'error',
                '执行中': 'warning'
            }
            return <Badge status={obj[a as keyof typeof obj] as any} text={a} />
        }
    },
    {
        title: '完成时间',
        dataIndex: 'updateTime',
        key: 'updateTime',
        width: 140,
        align: 'center',
        render: (a: string) => {
            return <span style={{ fontSize: 12 }}>{a}</span>
        }
    },
    {
        title: '错误消息',
        dataIndex: 'errorMsg',
        key: 'errorMsg',
        width: 400,
        ellipsis: true,
        render: (value) => {
            return <span style={{ fontSize: 12 }}>{value || '--'}</span>
        }
    },
    {
        title: '操作参数',
        dataIndex: 'requestJson',
        key: 'requestJson',
        width: 400,
        ellipsis: true,
        render: (value) => {
            return <span style={{ fontSize: 12 }}>{value || '--'}</span>
        }
    },
]

export default tableConfig