import { Popconfirm, TableProps, Typography } from "antd";
import React from "react";
import { MARKETING_CARRIER_TYPE_ENUM, MARKETING_GOAL_ENUM, MARKETING_SUB_GOAL_ENUM, MARKETING_TARGET_TYPE_ENUM, MARKETING_TARGET_TYPE_GAME_ENUM, SITE_SET_ENUM } from "../../const";
const { Paragraph } = Typography;

export const Columns = (del: (id: number) => void): TableProps<any>['columns'] => {

    const columns: TableProps<any>['columns'] = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            width: 60,
            align: 'center'
        },
        {
            title: '创建人',
            dataIndex: 'putUserName',
            key: 'putUserName',
            width: 60,
            align: 'center'
        },
        {
            title: '策略组名称',
            dataIndex: 'strategyKey',
            key: 'strategyKey',
            width: 150
        },
        {
            title: '当前账号ID',
            dataIndex: 'accountId',
            key: 'accountId',
            width: 90,
            align: 'center',
            render: (_, b) => {
                let strategyValue = b.strategyValue
                let { adData } = JSON.parse(strategyValue)
                let AccountSet = new Set(adData.map((item: { accountId: any; }) => item.accountId))
                return <Paragraph style={{ marginBottom: 0, wordBreak: 'break-all' }} ellipsis={{ rows: 3, tooltip: true }}>{[...AccountSet].map(accountId => accountId).join('，')}</Paragraph>
            }
        },
        {
            title: '当前广告ID',
            dataIndex: 'adgroupId',
            key: 'adgroupId',
            width: 90,
            align: 'center',
            render: (_, b) => {
                let strategyValue = b.strategyValue
                let { adData } = JSON.parse(strategyValue)
                return <Paragraph style={{ marginBottom: 0, wordBreak: 'break-all' }} ellipsis={{ rows: 3, tooltip: true }}>{adData.map((item: { adgroupId: any; }) => item.adgroupId).join('，')}</Paragraph>
            }
        },
        {
            title: '当前广告名称',
            dataIndex: 'adName',
            key: 'adName',
            width: 150,
            render: (_, b) => {
                let strategyValue = b.strategyValue
                let { adData } = JSON.parse(strategyValue)
                return <Paragraph style={{ marginBottom: 0, wordBreak: 'break-all' }} ellipsis={{ rows: 3, tooltip: true }}>{adData.map((item: { adgroupName: any; }) => item.adgroupName).join('，')}</Paragraph>
            }
        },
        {
            title: '当前选择广告类型',
            dataIndex: 'ad',
            key: 'ad',
            width: 350,
            render: (_, b) => {
                let strategyValue = b.strategyValue
                let { adData } = JSON.parse(strategyValue)
                return <span dangerouslySetInnerHTML={{
                    __html: `营销目的：<span style="color: #52c41a">${b?.taskType === 'GAME' ?  MARKETING_SUB_GOAL_ENUM[adData?.[0]?.marketingSubGoal as keyof typeof MARKETING_SUB_GOAL_ENUM] : MARKETING_GOAL_ENUM[adData?.[0]?.marketingGoal as keyof typeof MARKETING_GOAL_ENUM]}</span>，
                    推广产品类型：<span style="color: #52c41a">${b?.taskType === 'GAME' ? MARKETING_TARGET_TYPE_GAME_ENUM[adData?.[0]?.marketingTargetType as keyof typeof MARKETING_TARGET_TYPE_GAME_ENUM] : MARKETING_TARGET_TYPE_ENUM[adData?.[0]?.marketingTargetType as keyof typeof MARKETING_TARGET_TYPE_ENUM]}</span>,
                    营销载体类型：<span style="color: #52c41a">${MARKETING_CARRIER_TYPE_ENUM[adData?.[0]?.marketingCarrierType as keyof typeof MARKETING_CARRIER_TYPE_ENUM]}</span>,
                    版位选择：<span style="color: #52c41a">${adData?.[0]?.automaticSiteEnabled ? '自动版位' : '选择特定版位'}</span>,
                    ${!adData?.[0]?.automaticSiteEnabled && `广告版位：<span style="color: #52c41a">${adData?.[0]?.siteSet.map((item: string | number) => SITE_SET_ENUM[item as keyof typeof SITE_SET_ENUM]).toString()}</span>`}
                `}} />
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            ellipsis: true,
            width: 135
        },
        {
            title: '操作',
            dataIndex: 'cz',
            key: 'cz',
            fixed: 'right',
            width: 55,
            align: 'center',
            render: (_, b) => {
                return <Popconfirm
                    title="是否删除?"
                    onConfirm={() => del(b?.id)}
                >
                    <a style={{ color: 'red' }}>删除</a>
                </Popconfirm>
            }
        }
    ];

    return columns
}