import React from "react"
import { Badge, Dropdown, Menu, Tooltip, Image, Button } from "antd"
import { DownOutlined, EyeOutlined } from "@ant-design/icons"
import style from './index.less'
import moment from 'moment'
import ToMp from '../../../../components/toMp'
import dic from "../createPlan/components/Dic"
let columns = (backMenuKey: (item: any, key: any) => void, look: (value: any) => void, posType: number) => [
    {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        align: 'center',   
        width: 75,
        fixed: 'left',
        ellipsis: true
    },
    {
        title: '服务商',
        dataIndex: 'mpAccountInfo',
        key: 'mpAccountInfo',
        align: 'center',
        width: 140,
        fixed: 'left',
        render: (a: any, b: any) => {
            return <Tooltip title={a?.channel?.accountName}>
                <div style={{ fontSize: "12px" }} className={style.oneText}>{a?.channel?.accountName || '--'}</div>
            </Tooltip>
        }
    },
    {
        title: '广告主名称',
        dataIndex: 'mpAccountInfo',
        key: 'mpAccountInfo',
        align: 'center',
        width: 90,
        fixed: 'left',
        render: (a: any, b: any) => {
            let props = {
                name: a?.uname,
                type: b?.posType === 999 ? 1 : 4,
                planId: b?.planTxId || '',
                id: b?.mpAccountInfo?.id

            }
            return <ToMp {...props} />
        }
    },
    {
        title: '账户ID',
        dataIndex: 'mpAccountInfo',
        key: 'mpAccountInfo',
        align: 'center',
        width: 75,
        render: (a: any, b: any) => {
            return <span style={{ fontSize: "12px" }}>{a?.uid || '--'}</span>
        }
    },
    {
        title: '投放计划名称',
        dataIndex: 'planInfo',
        key: 'planName',
        align: 'center',
        width: 130,
        ellipsis: true,
        render: (a: any, b: any) => {
            return a?.planName ? <span style={{ fontSize: "12px" }}>{a?.planName}</span> : '--'
        }
    },
    {
        title: '计划ID',
        dataIndex: 'planTxId',
        key: 'planTxId',
        align: 'center',
        width: 90,
        render: (a: any, b: any) => {
            return a ? <span style={{ fontSize: "12px" }} className={style.twoText}>{a}</span> : '--'
        }
    },
    {
        title: '投放位置',
        dataIndex: 'planInfo',
        key: 'putLocation',
        align: 'center',
        width: 95,
        render: (a: any, b: any) => {
            return a?.putLocation ? <span style={{ fontSize: "12px" }} className={style.twoText}>{a?.putLocation}</span> : '--'
        }
    },
    {
        title: '广告样式',
        dataIndex: 'planInfo',
        key: 'secondContext',
        align: 'center',
        width: 85,
        render: (a: any, b: any) => {
            if (a?.secondContext) {
                a = JSON.parse(a.secondContext)
                let idea = a?.materials[0]
                let crt_size = idea?.crt_size
                return <div>{crt_size === 1480 ? '常规广告' : crt_size === 1707 ? '卡片式广告' : crt_size === 998 ? '大图式卡片' : crt_size === 928 ? '大图式卡片' : crt_size === 666 ? '大图式卡片' : crt_size === 538 ? '视频式卡片' : crt_size === 910 ? '激励浏览' : ''}</div>
            } else {
                return null
            }
        }
    },
    {
        title: '广告名称',
        dataIndex: 'planInfo',
        key: 'planName',
        align: 'center',
        width: 120,
        render: (a: any, b: any) => {
            return a?.planName ? <Tooltip title={a?.planName}><div style={{ fontSize: "12px" }} className={style.oneText}>{a?.planName}</div></Tooltip> : '--'
        }
    },
    {
        title: '创意名称',
        dataIndex: 'planInfo',
        key: 'secondContext',
        align: 'center',
        width: 130,
        render: (a: any, b: any) => {
            if (a?.secondContext) {
                a = JSON.parse(a.secondContext)
                let idea = a?.materials[0]
                return <div>
                    {idea?.tname && <Tooltip title={idea?.tname}>
                        <div style={{ fontSize: "12px" }} className={style.oneText}>{idea?.tname}</div>
                    </Tooltip>}
                </div>
            } else {
                return null
            }
        }
    },
    {
        title: '推广页名称',
        dataIndex: 'planInfo',
        key: 'secondContext',
        align: 'center',
        width: 130,
        render: (a: any, b: any) => {
            if (a?.secondContext) {
                a = JSON.parse(a.secondContext)
                let idea = a
                return <div className={style.oneText}>
                    {idea?.page_name && <Tooltip title={idea?.page_name}>
                        <span style={{ fontSize: "12px" }}>{idea?.page_name}</span>
                    </Tooltip>}
                </div>
            } else {
                return null
            }
        }
    },
    {
        title: '投放时间',
        dataIndex: 'planInfo',
        key: 'firstContext',
        align: 'center',
        width: 95,
        render: (a: any, b: any) => {
            if (a?.firstContext) {
                a = JSON.parse(a?.firstContext)
                let campaign = a?.campaign
                let { begin_time, end_time } = campaign
                return <>
                    {begin_time && end_time ? <span style={{ fontSize: 12 }} className={style.twoText}>{moment(begin_time * 1000).format('YYYY-MM-DD')} ~ {moment(end_time * 1000).format('YYYY-MM-DD')}</span> :
                        begin_time ? <span style={{ fontSize: 12 }}  className={style.twoText}>{moment(begin_time * 1000).format('YYYY-MM-DD')} ~ 长期投放</span> : '--'}
                </>
            } else {
                return null
            }
        }
    },
    {
        title: '推广目标',
        dataIndex: 'planInfo',
        key: 'putTarget',
        align: 'center',
        width: 80,
        render: (a: any, b: any) => {
            return a?.putTarget ? <span style={{ fontSize: "12px" }} className={style.twoText}>{dic.promotionTarget[a?.putTarget]}</span> : '--'
        }
    },
    {
        title: '购买类型',
        dataIndex: 'typesetting',
        key: 'typesetting',
        align: 'center',
        width: 70,
        render: (a: any, b: any) => {
            return '竞价'
        }
    },
    {
        title: '定向人群',
        dataIndex: 'planInfo',
        key: 'age',
        align: 'center',
        width: 100,
        render: (a: any, b: any) => {
            if (a?.firstContext) {
                a = JSON.parse(a?.firstContext)
                let { gender, age } = a?.target_groups[0]?.ad_groups[0]?.ad_target
                let ages = JSON.parse(age)[0]
                let [begin_age, end_age] = ages?.split('~')
                return <>{<span style={{ fontSize: 12 }}  className={style.twoText}>全国-{gender === "[]" ? '全选' : gender?.indexOf('FEMALE') !== -1 ? '女' : '男'}-{begin_age}岁至{end_age == 66 ? '65岁以上' : end_age + '岁'}</span>}</>
            } else {
                return null
            }
        }
    },
    {
        title: '任务名称',
        dataIndex: 'planInfo',
        key: 'taskName',
        align: 'center',
        width: 120,
        render: (a: any, b: any) => {
            return a?.taskInfo?.taskName ? <span style={{ fontSize: "12px" }} className={style.twoText}>{a?.taskInfo?.taskName}</span> : '--'
        }
    },
    {
        title: '出价方式',
        dataIndex: 'planInfo',
        key: 'firstContext',
        align: 'center',
        width: 70,
        render: (a: any, b: any) => {
            if (a?.firstContext) {
                a = JSON.parse(a?.firstContext)
                let { bid_strategy } = a?.target_groups[0]?.ad_groups[0]?.ad_group
                return <>{bid_strategy ? <span style={{ fontSize: "12px" }}>oCPM</span> : <span style={{ fontSize: "12px" }}>CPM</span>}</>
            } else {
                return null
            }
        }
    },
    {
        title: '出价',
        dataIndex: 'planInfo',
        key: 'firstContext',
        align: 'center',
        width: 45,
        render: (a: any, b: any) => {
            if (a?.firstContext) {
                a = JSON.parse(a?.firstContext)
                let { bid } = a?.target_groups[0]?.ad_groups[0]?.ad_group
                return <>{<span style={{ fontSize: "12px" }}>{bid ? bid / 100 : 0}</span>}</>
            } else {
                return null
            }
        }
    },
    {
        title: '广告预算',
        dataIndex: 'planInfo',
        key: 'firstContext',
        align: 'center',
        width: 70,
        render: (a: any, b: any) => {
            if (a?.firstContext) {
                a = JSON.parse(a?.firstContext)
                let { budget } = a?.target_groups[0]?.ad_groups[0]?.ad_group
                return <>{<span style={{ fontSize: "12px" }}>{budget ? budget / 100 : 0}</span>}</>
            } else {
                return null
            }
        }
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center',
        width: 140,
        render: (a: any, b: any) => {
            return <>{a && <span style={{ fontSize: "12px" }}>{a}</span>}</>
        }
    },
    {
        title: '失败信息',
        dataIndex: 'failedMsg',
        key: 'failedMsg',
        align: 'left',
        width: 280,
        render: (a: any, b: any) => {
            return <>{a && <div className={style.twoText}>
                <Tooltip title={a}>
                    <span style={{ fontSize: "12px" }}>{a}</span>
                </Tooltip>
            </div>}</>
        }
    },
    {
        title: (posType === 101 || posType === 0) ? '广告位图/视频' : posType === 999 ? '外层图片' : '',
        dataIndex: 'planInfo',
        key: 'planInfo',
        align: 'center',
        width: (posType === 101 || posType === 0 || posType === 999) ? posType === 0 ? 110 : 80 : 0,
        fixed: 'right',
        render: (a: any, b: any) => {
            let second = typeof a?.secondContext === 'string' ? JSON.parse(a?.secondContext) : a?.secondContext
            let img = second?.materials[0]?.crt_info.image_url
            let video = second?.materials[0]?.crt_info?.short_video?.video_url
            return posType === 101 || posType === 0 || posType === 999 ? <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-around'}}>
                {img ? <Image src={img} width={50} /> : video ? <video src={video} width={50} /> : '<空>'}
            </div> : null
        }
    },
    {
        title: '顶部素材',
        dataIndex: 'planInfo',
        key: 'planInfo',
        align: 'center',
        width: 80,
        fixed: 'right',
        render: (a: any, b: any) => {
            return <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-around'}}>
                <Image src={a?.sharePageInfo?.thumbUrl} width={30} height={30} />
                <div onClick={() => look(a?.sharePageInfo)}>
                    <a><EyeOutlined /></a>
                </div>
            </div>
        }
    },
    {
        title: '状态',
        dataIndex: 'createStatus',
        key: 'createStatus',
        align: 'center',
        width: 80,
        fixed: 'right',
        render: (a: any, b: any) => {
            return <span style={{ fontSize: "12px" }}>
                {a === 0 ? <span><Badge color="yellow" />创建中</span> : a === 100 ? <span><Badge status="success" />创建成功</span> : a === -1 ? <span><Badge status='error' />创建失败</span> : <></>}
            </span>
        }
    },
    {
        title: '操作',
        dataIndex: 'createStatus',
        key: 'createStatus',
        align: 'center',
        width: 80,
        fixed: 'right',
        render: (a: any, b: any) => {
            return <Dropdown overlay={
                <Menu onClick={(e) => { backMenuKey(b, e?.key) }}>
                    {a === 100 ? <>
                        <Menu.Item key="0">
                            <Button type='link' style={{ fontSize: 12 }} size='small'>批量复制</Button>
                        </Menu.Item>
                        <Menu.Item key="5">
                            <Button type='link' style={{ fontSize: 12 }} size='small'>批量更换落地页</Button>
                        </Menu.Item>
                        <Menu.Item key="1">
                            <Button type='link' style={{ fontSize: 12 }} size='small'>复制</Button>
                        </Menu.Item>
                        <Menu.Item key="3">
                            <Button type='text' danger style={{ fontSize: 12 }} size='small'>删除</Button>
                        </Menu.Item>
                    </> : a === -1 ?
                        <>
                            <Menu.Item key="6">
                                <Button type='link' style={{ fontSize: 12 }} size='small'>重新提交</Button>
                            </Menu.Item>
                            <Menu.Item key="1">
                                <Button type='link' style={{ fontSize: 12 }} size='small'>复制</Button>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <Button type='text' danger style={{ fontSize: 12 }} size='small'>删除</Button>
                            </Menu.Item>
                        </> :
                        <>
                            <Menu.Item key="1">
                                <Button type='link' style={{ fontSize: 12 }} size='small'>复制</Button>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <Button type='text' danger style={{ fontSize: 12 }} size='small'>删除</Button>
                            </Menu.Item>
                        </>
                    }
                </Menu>}
                trigger={['click']}
            >
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>操作<DownOutlined /> </a>
            </Dropdown>
        }
    }
]

export default columns