import Tables from "@/components/Tables";
import { Button, Card, Col, Divider, message, Row, Select, Space, Modal, Input, Image, Checkbox } from "antd";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import style from './index.less'
import columns from './tableConfig'
import AdBasicConfig from './components/AdBasicConfig'
import SelectPackage from './components/SelectPackage'
import SelectGoods from './components/SelectGoods'
import SelectData from "./components/SelectData";
import AdOriginality, { State as AdState } from './components/AdOriginality'
import { CloseOutlined, SearchOutlined } from "@ant-design/icons";
import { useModel } from "umi";
import moment from "moment";
import SelectPage from '../../../components/selectPage'
import AdLogin from '../../../components/adLogin'

import { initData } from '../../../../../../models/useLaunch/useAdAuthorize'
import { CheckboxChangeEvent } from "antd/lib/checkbox";
import dic from "./components/Dic"
import { getChannelName } from "@/utils/utils";
import { ProductType } from "../../../req";

const { Option } = Select;
function CreatePlan(props: { data: { type: string, item: any } | undefined, }) {
    let { data } = props

    /** =====变量Start===== */
    const userId = useModel('@@initialState', model => model.initialState?.currentUser?.userId)
    const [basicConfigVisible, setBasicConfigVisible] = useState<boolean>(false)  // 广告基本信息弹窗
    const [adOriginalityVisible, setAdOriginalityVisible] = useState<boolean>(false)  // 创意基本信息弹窗
    const [selectPackageVisible, setSelectPackageVisible] = useState<boolean>(false)  // 定向包弹窗
    const [selectGoodsVisible, setSelectGoodsVisible] = useState<boolean>(false)  // 商品弹窗
    const [selectDataSourceVisible, setSelectDataSourceVisible] = useState<boolean>(false)  // 数据源弹窗
    const [localtion, setLaunchSite] = useState<number>(999)  // 投放位置
    const [adBasicData, setAdBasicData] = useState<any>({ adName: "<当前时间>", customName: "", date_module: "2", cpm_set: "2" }) // 设置的广告基本信息
    const [launchAcc, setLaunchAcc] = useState<any[]>([])//定向包数据
    const [adOriginalityData, setAdOriginalityData] = useState<{ name: string, pattern: string }>({ name: '<落地页(小说)>-<当前时间>-', pattern: '' })//创意基本信息数据
    const [tableDate, setTableDate] = useState<any[]>([])//table预览信息
    const [tableSelect, setTableSelect] = useState<any[]>([])//选择
    const [pageShow, setPageShow] = useState<boolean>(false) // 选择落地弹窗
    const [pageData, setPageData] = useState<any[]>([])  // 保存选中落地页
    const [authData, setAuthData] = useState<{ base64: string, code: string }>({ base64: '', code: '' })
    const [releases, setReleases] = useState<{ label: string, value: string, id: number }[]>([])
    const [taskNameShow, setTaskNameShow] = useState<boolean>(false) // 任务名称弹窗
    const [taskName, setTaskName] = useState<string>('')
    const [release, setRelease] = useState<string[]>([])
    const [checkAll, setCheckAll] = React.useState(false); // 投放号全选按钮控制 全部状态
    const [topCanvasType, setTopCanvasType] = useState<number>()   // 选择的推广页类型
    const { getSharePageDetail, addPlan, getAdsPlanXq, state, dispatch } = useModel('useLaunch.useAdAuthorize')

    let { campaign, target_groups, materials: asMaterials, product, pos_type } = state?.first
    let { product_type } = product
    let { ctype, end_time, begin_time } = campaign
    let { ad_group, ad_target } = target_groups[0].ad_groups[0]
    let { budget, bid, bid_strategy } = ad_group
    let { gender, age, ad_behavior } = ad_target
    let { materials } = state?.second
    let { desc, link_name, link_page_type, sns_dynamic_show_type, crt_info, title, out_material_use_canvas_top, crt_size } = materials[0]
    /** =====变量End===== */

    useEffect(() => {
        if (age) {
            setAdBasicData(() => ({ ...adBasicData, begainAge: Number(JSON.parse(age)[0]?.split('~')[0]), endAge: Number(JSON.parse(age)[0]?.split('~')[1]) }))
        }
    }, [age])

    /**计算已选定向包个数 */
    const accNum = useMemo(() => {
        let num = launchAcc?.length
        return num
    }, [launchAcc])
    /**创意基本信息转义 */
    const adOriginalityInit = useMemo(() => {
        let obj: AdState | null = null
        if (adOriginalityData) {
            obj = {
                name: adOriginalityData?.name
            }
        }
        return obj
    }, [adOriginalityData])
    /**分页 */
    const pageChange = useCallback((page: string | number, pageSize?: string | number) => {

    }, [])

    const handleBasicData = useCallback((value: any) => {
        setAdBasicData(value)
    }, [adBasicData])
    /**定向包回调 */
    const selectPackageCallback = useCallback((value: any) => {
        setLaunchAcc(value)
    }, [launchAcc])

    /**删除定向包内容 */
    const selectPackageDel = useCallback((title: string, delId: number,) => {
        let newArr = launchAcc?.map((item: { label: string, package: { id: number }[] }) => {
            if (item.label === title) {
                let newPageage = item.package.filter((pack: { id: number }) => delId !== pack.id)
                item.package = newPageage
            }
            return item
        })
        setLaunchAcc(newArr)
    }, [launchAcc])
    /** 删除商品内容 */
    const goodsDel = useCallback((index: number) => {
        let newArr = JSON.parse(JSON.stringify(launchAcc))
        delete newArr[index].goods
        setLaunchAcc(newArr)
    }, [launchAcc])
    /** 删除数据源 */
    const dataSourceDel = useCallback((title: string, delId: number) => {
        let newArr = launchAcc?.map((item: { label: string, dataSource: { userActionSetId: number }[] }) => {
            console.log(item.label, title)
            if (item.label === title) {
                let newDataSource = item.dataSource.filter((pack: { userActionSetId: number }) => delId !== pack.userActionSetId)
                item.dataSource = newDataSource
            }
            return item
        })
        setLaunchAcc(newArr)
    }, [launchAcc])
    /**创意基本信息内容回调*/
    const adOriginalityCallback = useCallback((value: any) => {
        setAdOriginalityData(value)
    }, [])
    /**预览 */
    const preview = useCallback(() => {
        if (launchAcc.length === 0) {
            message.error('请选择公众号')
            return
        }
        if (pageData?.length === 0) {
            message.error('请选择原生推广页')
            return
        }
        if (JSON.stringify(adBasicData) === '{}') {
            message.error('请填写广告基本信息！')
            return
        } else {
            if (adBasicData?.date_module === '1' && (!begin_time || !end_time)) {
                message.error('请选择开始时间或结束时间')
                return
            } else if (adBasicData?.date_module === '2' && (!begin_time)) {
                message.error('请选择开始时间')
                return
            }
        }
        if (localtion === 999) {
            if (!desc) {
                message.error('请输入广告创意的外层文案')
                return
            } else {
                let length = desc?.length
                let text = desc?.replace(/[\x00-\xff]/g, '')
                if (text?.length + Number(((length - text?.length) / 2).toFixed()) > 40) {
                    message.error('广告文案不得超过40字，请缩短输入内容')
                    return
                }
            }

            if (crt_size === 1707) {
                if (!title) {
                    message.error('请输入外层文案标题')
                    return
                }
                if (out_material_use_canvas_top === 0) {
                    if (!crt_info.image_url) {
                        message.error('请选择外层图片')
                        return
                    }
                }
            }

        } else if (localtion === 0 || localtion === 101) {
            if (crt_size === 538) {
                if (!crt_info?.short_video?.video_url) {
                    message.error('请上传广告创意的广告位视频')
                    return
                }
            } else {
                if (!crt_info.image_url) {
                    message.error('请上传广告创意的广告位图片')
                    return
                }
            }

            if (localtion === 101) {
                if (!title) {
                    message.error('请输入图文标题')
                    return
                }
                if (!crt_info.card_info?.desc[0] || !crt_info.card_info?.desc[1]) {
                    message.error('请输入广告文案')
                    return
                }
            }
        }

        if (!adOriginalityData) {
            message.error('请填写创意基本信息！')
            return
        }
        setTableSelect([])
        // 设置名称
        let cusName = adOriginalityData?.name?.replace('<落地页(小说)>-<当前时间>', '')
        let name: string = (adBasicData?.customName ? adBasicData?.customName : moment(new Date()).format('YYYYMMDDHHmmss'))
        let cyName: string = (pageData?.length > 0 ? pageData[0]?.novelName + '-' : '') + moment(new Date()).format('YYYYMMDDHHmmss') + (cusName && cusName !== '-' ? cusName : '')

        dispatch({
            type: 'setInit', params: {
                ...state,
                first: { ...state.first, campaign: { ...campaign, cname: name }, materials: [{ ...asMaterials[0], tname: cyName }], target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...ad_group, aname: name } }] }] },
                second: { ...state.second, materials: [{ ...materials[0], tname: cyName }], page_name: pageData[0]?.name }
            }
        })

        let arr: any = []
        launchAcc?.forEach((item: any, eq: number) => {
            let name: string = (adBasicData?.customName ? adBasicData?.customName + '-' : '') + moment(new Date()).format('YYYYMMDDHHmmss')
            let cusName = adOriginalityData?.name?.replace('<落地页(小说)>-<当前时间>', '')
            let cyName: string = (pageData?.length > 0 ? pageData[0]?.novelName + '-' : '') + moment(new Date()).format('YYYYMMDDHHmmss') + (cusName && cusName !== '-' ? cusName : '')
            arr.push({
                id: eq,
                service_name: item?.wechat_info?.service_name,//广告主账户
                wechat_name: item?.wechat_info?.wechat_name,//公众号
                title: name?.replace(',', ''),
                tg_target: product_type,//推广目标
                localtion: localtion,//推广位置
                module: localtion === 999 ? crt_size === 1480 ? '常规广告' : '卡片式广告' : localtion === 0 ? '大图式卡片' : localtion === 101 ? '大图' : localtion === 8 ? '激励浏览' : '',//广告形式
                plan_base: [product_type, localtion, 'Bidding'],
                pay_way: adBasicData?.pay_way,//购买方式
                launch_acc: { // 人群包信息商品数据源
                    ...item
                },
                date_set: {//投放时间
                    date_module: adBasicData?.date_module,//投放日期
                    date_list: adBasicData?.date_module == 1 ? [begin_time, end_time] : [begin_time],//投放时间
                    day_time: '全天投放'//投放时段
                },
                cost: {//预算
                    day_cost: budget ? budget / 100 + '元/天' : '(空)',//每日预算
                    bid: bid ? bid / 100 + `元/${!bid_strategy ? '千次曝光' : '下单'}` : '(空)'//出价
                },
                cpm: {//出价方式
                    cpm_set: !bid_strategy ? 'CPM' : 'oCPM',//出价方式
                    module: adBasicData?.module,//投放模式
                    target: adBasicData?.target,//优化目标
                },
                human_info_parameter: {//定向拓展
                    is_tour: adBasicData?.is_tour,//地域
                    localtion_choice: adBasicData?.localtion_choice,//地域选择
                    gender: adBasicData?.gender,//性别
                    age_list: [adBasicData?.begainAge, adBasicData?.endAge],//年龄
                },
                human_info_package: { key: item.key, name: item?.package?.map((items: { name: any; }) => items?.name) },//定向包
                human_info_goods: { ...item?.goods, id: item?.id },
                human_info_dataSource: {},
                idea: {
                    name: cyName?.replace(',', ''),//创意名称
                    crt_info,
                    module: localtion === 999 ? crt_size === 1480 ? '常规广告' : '卡片式广告' : localtion === 0 ? '大图式卡片' : localtion === 101 ? '大图' : '',// 投放模式
                    title,  // 外层文案 标题
                    content: desc,//外层文案
                    jump_type: '原生推广页',//外层素材跳转
                    // button_type: '',//公众号选项
                    // jump_type_button_type: '',//公众号选项
                    jump_type_page_type: pageData[0],//推广页
                    out_material_use_canvas_top,
                    jump_type_text_type: link_name,//文字链文案
                    jump_type_link_type: link_page_type === 4 ? '原生推广页' : link_page_type === 6 ? '公众号详情页' : '空',// 文字链跳转
                    data_show: sns_dynamic_show_type === 0 ? '未启用' : '启用',////数据展示
                    data_show_type: sns_dynamic_show_type === 0 ? '' : '关注',////数据展示 转化
                }
            })
        })
        setTableDate(arr)
    }, [launchAcc, adOriginalityData, adBasicData, accNum, pageData, localtion, product_type, tableSelect, state, crt_size, title, out_material_use_canvas_top])
    /**批量提交 */
    const submit = useCallback(() => {
        if (!taskName) {
            message.error('请输入任务名称！')
            return
        }

        let channelAdqAccount: any = {}
        let channelMpAccount: any = {}
        let channelMpGoods: any = {}
        let channelMpDataSource: any = {}
        tableSelect?.forEach((item: any) => {
            let ids = item?.launch_acc?.package?.map((id: any) => id?.id)
            if (Object.keys(channelMpAccount)?.indexOf(item?.launch_acc?.id) !== -1) {
                channelMpAccount[item?.launch_acc?.id] = [...channelMpAccount[item?.launch_acc?.id], ...ids]
            } else {
                channelMpAccount[item?.launch_acc?.id] = [...ids]
            }
            let dataSourceIds = item?.launch_acc?.dataSource?.map((item: any) => item?.userActionSetId)
            if (Object.keys(channelMpDataSource)?.indexOf(item?.launch_acc?.id) !== -1) {
                channelMpDataSource[item?.launch_acc?.id] = [...channelMpDataSource[item?.launch_acc?.id], ...dataSourceIds]
            } else {
                channelMpDataSource[item?.launch_acc?.id] = Array.isArray(dataSourceIds) ? [...dataSourceIds] : []
            }
            let human_info_goods = item.human_info_goods
            if (human_info_goods && human_info_goods?.key && human_info_goods?.data) {
                let categories = human_info_goods?.data[0]?.categories ? JSON.parse(human_info_goods?.data[0]?.categories) : []
                if (categories?.length > 0) {
                    categories = categories[0]
                    channelMpGoods[human_info_goods.id] = JSON.stringify({
                        material_source_id: human_info_goods.key,
                        dynamic_product_ad_category: human_info_goods.key,
                        dynamic_recommend_type: '[{"parent_method_id":2,"method_id":2001}]',
                        dynamic_ad_type: 11,
                        dynamic_ad_product_id: human_info_goods?.data[0]?.productOuterId,
                        dynamic_category_id: categories[categories.length - 1]?.id
                    })
                }
            }

        })
        let pageId: number = pageData[0]?.id
        addPlan.run({
            channelAdqAccount,
            channelMpAccount,
            channelMpGoods,
            channelMpDataSource,
            taskName: taskName ? taskName + '_' + (parseInt((Date.now() / 100).toString())) : moment().unix(),
            planDto: { content: desc, posType: localtion, planName: state.first.campaign.cname, putLocation: dic.localtion[localtion], putTarget: product_type, pageId, firstContext: JSON.stringify(state.first), secondContext: JSON.stringify(state.second) }
        }).then((res: any) => {
            setTaskNameShow(false)
            if (res?.code === 200) {
                message.success('创建成功')
                window.location.href = '/#/launchSystem/launchManage/taskList'
            } else if (res?.code === 1003 && res?.data?.base64) {
                setAuthData(res?.data)
            }
        })
    }, [tableSelect, userId, taskName, taskNameShow, authData, localtion, product_type])
    /** 输入任务名称 */

    /**保存配置到本地*/
    const severBd = useCallback(() => {
        let obj = {
            launchAcc,
            adOriginalityData,
            adBasicData,
            localtion,
            pageData,
            release,
            state
        }
        localStorage.setItem('bdPlan', JSON.stringify(obj))
        message.success('保存本地成功！')
    }, [launchAcc, adOriginalityData, release, pageData, adBasicData, localtion, state])

    console.log('LaunchAcc--->', launchAcc)
    /**读取本地暂存或者数据回填 */
    useEffect(() => {
        if (data) {//填列表跳转数据
            console.log('=====>', data?.item)
            let { planId, mpAccountInfo, packageInfo, goods, goodsInfo, dataSourceVoList } = data?.item
            getAdsPlanXq.run(planId).then((res: any) => {
                if (res?.code === 200) {
                    let { firstContext, secondContext, planName, sharePageInfo, posType } = res?.data
                    setLaunchSite(posType)
                    if (firstContext && secondContext) {
                        dispatch({ type: 'setInit', params: { first: JSON.parse(firstContext), second: JSON.parse(secondContext) } })
                    }
                    let adBasicData = { adName: "<当前时间>", customName: "", date_module: "1" }
                    if (planName) {
                        let planNames = planName?.split('-')
                        if (planNames?.length > 0) {
                            adBasicData.customName = planNames[0]
                        }
                    }
                    if (firstContext) {
                        let first = JSON.parse(firstContext)
                        if (first?.campaign?.begin_time && first?.campaign?.end_time) {
                            adBasicData.date_module = '1'
                        } else if (first?.campaign?.begin_time) {
                            adBasicData.date_module = '2'
                        } else {
                            adBasicData.date_module = '1'
                        }
                    }


                    setAdBasicData(adBasicData) // 广告基本信息
                    let adOriginalityData = { name: '<落地页(小说)>-<当前时间>-', pattern: '' }
                    if (secondContext) {
                        let second = JSON.parse(secondContext)
                        let tname = second?.materials[0]?.tname
                        let tnames = tname?.split('-')
                        if (tnames?.length > 0) {
                            adOriginalityData.name = "<落地页(小说)>-<当前时间>-" + tnames[tnames?.length - 1]
                        }
                    }
                    setAdOriginalityData(adOriginalityData) // 创意name
                    Object.keys(sharePageInfo).length > 0 && setPageData([{ ...sharePageInfo }]) // 原生推广页

                    if (Object.keys(mpAccountInfo).length > 0) {
                        let newlaunchAcc: any = []
                        setRelease([mpAccountInfo?.id?.toString()]) // 投放号
                        let newGoods: any = {}
                        if (goods) {
                            let goodsParams = JSON.parse(goods)
                            newGoods = {
                                key: goodsParams.material_source_id,
                                data: [{ ...goodsInfo }],
                                id: mpAccountInfo?.id
                            }
                        }
                        newlaunchAcc.push({ // 定向包
                            id: mpAccountInfo?.id,
                            label: getChannelName(mpAccountInfo?.channel?.accountName) + '-' + mpAccountInfo?.uname,
                            package: packageInfo?.length > 0 ? [...packageInfo] : [],
                            goods: goods ? newGoods : {},
                            dataSource: dataSourceVoList ? dataSourceVoList : [],
                            value: mpAccountInfo?.id?.toString(),
                            serverId: mpAccountInfo?.channel?.id,
                            wechat_info: {
                                wechat_name: mpAccountInfo?.uname,
                                service_name: mpAccountInfo?.channel?.accountName
                            }
                        })
                        setLaunchAcc([...newlaunchAcc])
                    }
                }
            })
        } else {//填本地
            let plan = localStorage.getItem('bdPlan')
            if (plan) {
                let obj = JSON.parse(plan)
                if (obj?.launchAcc.length > 0) {
                    setLaunchAcc(obj?.launchAcc)
                }
                if (obj?.localtion || obj?.localtion === 0) {
                    setLaunchSite(obj?.localtion)
                }
                if (obj?.adBasicData) {
                    setAdBasicData(obj?.adBasicData)
                }
                if (obj?.adOriginalityData) {
                    setAdOriginalityData(obj?.adOriginalityData)
                }
                if (obj?.pageData) {
                    setPageData(obj?.pageData)
                    if (obj?.pageData && obj?.pageData.length > 0) {
                        let topType = JSON.parse(obj?.pageData[0]?.pageContextList[0]?.pageContextList)[0]?.type
                        setTopCanvasType(Number(topType))
                    }
                }
                if (obj?.state) {
                    dispatch({ type: 'setInit', params: { ...obj?.state } })
                }
                if (obj?.release) {
                    setRelease(obj?.release)
                }
            }
        }
        return () => {
            dispatch({ type: 'setInit', params: { ...initData } })
        }
    }, [])
    /**清空本地暂存*/
    const delBdPlan = useCallback(() => {
        setTopCanvasType(0)
        setLaunchSite(999)
        setAdBasicData({ adName: '<当前时间>' })
        setLaunchAcc([])
        setAdOriginalityData({ name: '<落地页(小说)>-<当前时间>', pattern: '' })
        setTableDate([])
        setPageData([])
        setRelease([])
        setReleases([])
        localStorage.setItem('bdPlan', '')
        dispatch({ type: 'setInit', params: { ...initData } })
        message.success('本地保存已清空！')
    }, [localtion, adBasicData, state, pageData, release, releases])

    /** 选中落地页 获取账号 */
    useEffect(() => {
        if (pageData && pageData?.length > 0) {
            getSharePageDetail.run(pageData[0]?.id).then((res: { data: { createRecords: any } }) => {
                let newReleases: { label: string, value: string, id: number, wechat_info: any, serverId: number }[] = []
                res?.data?.createRecords?.forEach((item: { createStatus: number, channelAccountMpInfo: { channel: any, id: number, uname: string } }) => {
                    if (item?.createStatus === 100) {
                        newReleases.push(
                            {
                                label: getChannelName(item?.channelAccountMpInfo?.channel?.accountName) + '-' + item?.channelAccountMpInfo?.uname,
                                value: item?.channelAccountMpInfo?.id.toString(),
                                id: item?.channelAccountMpInfo?.id,
                                serverId: item?.channelAccountMpInfo?.channel?.id,
                                wechat_info: {
                                    service_name: item?.channelAccountMpInfo?.channel?.accountName,
                                    wechat_name: item?.channelAccountMpInfo?.uname
                                }
                            }
                        )
                    }
                })
                let a = newReleases.reduce((prev: any, cur) => {
                    let rele = prev?.find((item: any) => item?.id === cur?.id)
                    if (!rele) {
                        prev.push(cur)
                    }
                    return prev
                }, [])
                setReleases(() => a)
            })
        }
    }, [pageData, crt_size])

    // 判断落地页类型 还原第二步
    useEffect(() => {
        if (pageData && pageData?.length > 0) {
            if (localtion === 999 && pageData[0]?.topCanvasType === 41) {
                let pageContext = pageData[0]?.pageContextList[0]?.pageContextList
                if (pageContext) {
                    pageContext = JSON.parse(pageContext)
                    let { adLocation, viewType } = pageContext[0]
                    if (adLocation === 'sns' && viewType === '1' && crt_size === 1480) {
                        dispatch({
                            type: 'setSecond',
                            params: {
                                ...state,
                                second: {
                                    ...state.second,
                                    materials: [{
                                        rid: '',
                                        cid: '',
                                        desc: "",
                                        link_hidden: 1,
                                        link_name: "",
                                        is_show_friend: 0,
                                        show_first_comment: 0,
                                        interaction: 0,
                                        crt_size: 1707,
                                        tname: "",
                                        page_id: '',
                                        page_id_str: '',
                                        link_page_id: 0,
                                        link_page_id_str: "0",
                                        page_type: 4,
                                        link_page_type: 0,
                                        dest_conf: "{}",
                                        ext_click_url: "",
                                        ext_exposure_url: "",
                                        dest_url: "",
                                        appmsg_info: "{}",
                                        title: "",
                                        scheme_url: "",
                                        is_hidden_comment: 0,
                                        crt_info: {
                                            image_url: ''
                                        },
                                        out_material_use_canvas_top: 0,  // 1 用落地页
                                        sns_dynamic_show_type: 0,
                                        sns_dynamic_show_text: ""
                                    }]
                                }
                            }
                        })
                    }
                }
            }
        }
    }, [pageData, crt_size, localtion])

    // 选择投放号
    const onSetRelease = useCallback((e: any) => {
        setRelease(e)
        let newlaunchAcc: any = []
        releases?.forEach((item: any) => {
            if (e?.indexOf(item?.value) !== -1) {
                newlaunchAcc.push({
                    ...item,
                    package: [],
                    dataSource: []
                })
            }
        })
        setLaunchAcc(newlaunchAcc)
        if (e?.length >= releases?.length) {
            setCheckAll(true);
        } else {
            setCheckAll(false);
        }
    }, [release, launchAcc, releases])

    const onCheckAllChange = (e: CheckboxChangeEvent) => {
        if (releases?.length > 0) {
            setRelease(e.target.checked ? releases?.map((item: any) => item?.value) : [])
            setCheckAll(e.target.checked);

            let data = e.target.checked ? releases?.map((item: any) => item?.value) : []
            let newlaunchAcc: any = []
            releases?.forEach((item: any) => {
                if (data?.indexOf(item?.value) !== -1) {
                    newlaunchAcc.push({
                        ...item,
                        package: []
                    })
                }
            })

            setLaunchAcc(newlaunchAcc)
        }
    }

    // 设置投放位置
    const launchSiteHandle = useCallback((value: number) => {
        setLaunchSite(value)
        // 999 朋友圈 0 底部 5 中部
        if (value === 999 || value === 0 || value === 101 || value === 8) {
            let crt_info: {
                card_info: {
                    head_desc_type: 1 | 2,
                    mp_tag_type: 0,
                    auto_close_time?: 15,
                    launch_time?: 0.001,
                    frequency_time?: 5,
                    font_color?: "#FFFFFF",
                    bg_img?: "http://wxsnsdythumb.wxs.qq.com/109/20204/snsvideodownload?m=e341a5a67ca7d2b5a937d6a4c49f8e99&filekey=30340201010420301e02016d040253480410e341a5a67ca7d2b5a937d6a4c49f8e990203032712040d00000004627466730000000131&amp;hy=SH&amp;storeid=32303231313130333134303634323030303666323566313336666664393338623634623430623030303030303664&bizid=1023",
                    desc?: string[],
                    description?: string
                },
                image_url: string
            } = { card_info: { head_desc_type: 1, mp_tag_type: 0 }, image_url: '' }
            if (value === 101) {
                crt_info = {
                    image_url: '',
                    card_info: {
                        auto_close_time: 15,
                        launch_time: 0.001,
                        frequency_time: 5,
                        font_color: "#FFFFFF",
                        bg_img: "http://wxsnsdythumb.wxs.qq.com/109/20204/snsvideodownload?m=e341a5a67ca7d2b5a937d6a4c49f8e99&filekey=30340201010420301e02016d040253480410e341a5a67ca7d2b5a937d6a4c49f8e990203032712040d00000004627466730000000131&amp;hy=SH&amp;storeid=32303231313130333134303634323030303666323566313336666664393338623634623430623030303030303664&bizid=1023",
                        head_desc_type: 1,
                        mp_tag_type: 0,
                        desc: []
                    }
                }
            }
            let { cost_type, ...new1_ad_group } = ad_group
            let buttonPageType: any = {}
            if (product_type === 'PRODUCTTYPE_WECHAT') {
                buttonPageType = { button_page_type: 4 }
            }
            dispatch({
                type: 'setInit', params: {
                    ...state,
                    first: { ...state.first, pos_type: value, materials: [{ ...asMaterials[0], crt_size: value === 0 ? 666 : 929 }], target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...new1_ad_group, pos_type: value, multi_slot_type: value === 101 ? 2 : 0, timeset: value === 999 ? '' : '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111' } }] }] },
                    second: {
                        ...state.second, pos_type: value, materials: [value === 999 ? {
                            rid: '',
                            cid: '',
                            desc: '',
                            link_hidden: 0,
                            link_name: product_type === 'PRODUCTTYPE_WECHAT' ? "阅读小说" : "查看详情",
                            is_show_friend: 0,
                            show_first_comment: 0,
                            interaction: 0,
                            crt_size: 1480,
                            tname: '',
                            page_id: '',
                            page_id_str: '',
                            link_page_id: 2225950003,
                            link_page_id_str: "0",
                            page_type: 4,
                            link_page_type: 4,
                            dest_conf: "{}",
                            ext_click_url: "",
                            ext_exposure_url: "",
                            dest_url: "",
                            appmsg_info: "{}",
                            title: "",
                            scheme_url: "",
                            is_hidden_comment: 0,
                            crt_info: '',
                            sns_dynamic_show_type: 0,
                            sns_dynamic_show_text: "",
                        } : value === 101 || value === 0 ? {
                            rid: '',
                            cid: '',
                            desc: "",
                            link_hidden: 0,
                            link_name: "",
                            is_show_friend: 0,
                            show_first_comment: 0,
                            interaction: 0,
                            crt_size: value === 101 ? 928 : value === 0 ? 666 : 998,
                            tname: "",
                            page_id: '',
                            page_id_str: '',
                            link_page_id: 0,
                            link_page_id_str: "0",
                            page_type: 4,
                            link_page_type: 0,
                            dest_conf: "{}",
                            ext_click_url: "",
                            ext_exposure_url: "",
                            dest_url: "",
                            appmsg_info: "{}",
                            title: "",
                            scheme_url: "",
                            crt_info,
                            button_param: product_type === 'PRODUCTTYPE_WECHAT' ? "{\"title\":\"阅读小说\"}" : "{\"title\":\"查看详情\"}",
                            ...buttonPageType
                        } : {
                            rid: "",
                            cid: "",
                            desc: "",
                            link_hidden: 0,
                            link_name: "",
                            is_show_friend: 0,
                            show_first_comment: 0,
                            interaction: 0,
                            crt_size: 910,
                            tname: "",
                            page_id: "",
                            page_id_str: "2298514123",
                            link_page_id: 0,
                            link_page_id_str: "0",
                            page_type: 4,
                            link_page_type: 0,
                            dest_conf: "{}",
                            ext_click_url: "",
                            ext_exposure_url: "",
                            dest_url: "",
                            appmsg_info: "{}",
                            title: "",
                            scheme_url: "",
                            crt_info: ""
                        }]
                    }
                }
            })
        }

    }, [localtion, state, product_type])
console.log(state)
    // 设置推广目标
    const setTarget = (value: ProductType) => {
        let new_ad_behavior = JSON.parse(ad_behavior)
        let not_in_action_list = new_ad_behavior[0].not_in_action_list
        if (value === 'PRODUCTTYPE_LEAD_AD') {
            if (not_in_action_list?.length === 1 && not_in_action_list?.indexOf(101) !== -1) {
                new_ad_behavior[0].not_in_action_list = []
            }
        } else {
            if (not_in_action_list?.length === 0) {
                new_ad_behavior[0].not_in_action_list = [101]
            }
        }
        let linkName = link_name
        // 999 朋友圈 0 底部 5 中部
        if (localtion === 999) {
            if (value === 'PRODUCTTYPE_LEAD_AD') {
                linkName = '查看详情'
            } else if (value === 'PRODUCTTYPE_WECHAT') {
                linkName = '阅读小说'
            }
        } else {
            linkName = ""
        }
        let btType: any = {}
        if (pos_type === 101 || pos_type === 0) {
            if (value === 'PRODUCTTYPE_LEAD_AD') {
                delete materials[0]?.button_page_type
                btType = {
                    button_param: "{\"title\":\"查看详情\"}"
                }
            } else if (value === 'PRODUCTTYPE_WECHAT') {
                btType = {
                    button_param: "{\"title\":\"阅读小说\"}"
                }
            }
        }
        // ad_behavior
        dispatch({
            type: 'setInit', params: {
                ...state,
                first: { ...state.first, product: { ...product, product_type: value }, sub_product: { ...state.first.sub_product, product_type: value }, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...ad_group, product_type: value }, ad_target: { ...ad_target, ad_behavior: JSON.stringify(new_ad_behavior) } }] }] },
                second: { ...state.second, materials: [{ ...materials[0], link_name: linkName, ...btType }], product: { ...state.second.product, product_type: value } }
            }
        })
    }
    console.log('state--->', state)

    return <>
        {/* 授权登录 */}
        <AdLogin onClose={() => { setAuthData({ base64: '', code: '' }) }} value={authData} onChange={() => { setAuthData({ base64: '', code: '' }); message.success('再次点击按钮提交') }} />
        {/* =============广告基本信息弹窗=========== */}
        {basicConfigVisible && <AdBasicConfig data={adBasicData} visible={basicConfigVisible} hideModel={() => { setBasicConfigVisible(false) }} onChange={handleBasicData} localtion={localtion}></AdBasicConfig>}
        {/* =============定向包弹窗=========== */}
        {selectPackageVisible && <SelectPackage launchAcc={launchAcc} visible={selectPackageVisible} hideModel={() => { setSelectPackageVisible(false) }} callback={selectPackageCallback}></SelectPackage>}
        {/* =============商品弹窗=========== */}
        {selectGoodsVisible && <SelectGoods launchAcc={launchAcc} visible={selectGoodsVisible} hideModel={() => { setSelectGoodsVisible(false) }} callback={selectPackageCallback} />}
        {/* =============数据源弹窗=========== */}
        {selectDataSourceVisible && <SelectData launchAcc={launchAcc} visible={selectDataSourceVisible} hideModel={() => { setSelectDataSourceVisible(false) }} callback={selectPackageCallback} />}
        {/* =============创意基本信息弹窗=========== */}
        {adOriginalityVisible && <AdOriginality visible={adOriginalityVisible} hideModel={() => { setAdOriginalityVisible(false) }} callback={adOriginalityCallback} defaultValue={adOriginalityData} pageData={pageData} localtion={localtion}></AdOriginality>}
        {/* 选择落地页 */}
        {pageShow && <SelectPage
            show={pageShow}
            localtion={localtion}
            productType={product_type}
            crtSize={crt_size}
            onClose={() => { setPageShow(false) }}
            onChange={(data) => {
                setTopCanvasType(data[0]?.topCanvasType)
                setPageShow(false);
                if (pageData?.length === 0) {
                    setPageData(data);
                } else if (pageData[0]?.id === data[0]?.id) {

                } else {
                    setPageData(data);
                    setReleases([]);
                    setRelease([])
                    setLaunchAcc([])
                    setTableDate([])
                }
            }}
            pageData={pageData}
        ></SelectPage>}
        {/* 任务名称 */}
        <Modal title="输入任务名称" confirmLoading={addPlan?.loading} visible={taskNameShow} onOk={submit} onCancel={() => { setTaskNameShow(false) }}>
            <Space>
                <Input value={taskName} style={{ width: 370 }} onChange={(e) => { setTaskName(e.target.value) }} placeholder="请输入任务名称" />
                <div>+ 当前时间</div>
            </Space>
        </Modal>

        <Space direction='vertical' style={{ width: '100%' }}>
            <Card title={<div className={style.cardTitle}>配置区</div>} className={style.createPlan} bordered={false} hoverable>
                <div className={style.cardBody}>
                    {/* =============头部选项=========== */}
                    <div className={style.headerform}>
                        <Space align='start' wrap>
                            <Space>
                                <span>推广目标</span>
                                <Select value={product_type} style={{ width: 160 }} onChange={(e) => { setTarget(e as ProductType) }}>
                                    <Option value="PRODUCTTYPE_WECHAT">推广公众号</Option>
                                    <Option value="PRODUCTTYPE_LEAD_AD">收集线索</Option>
                                </Select>
                            </Space>
                            <Space>
                                <span>投放位置</span>
                                <Select value={localtion} style={{ width: 160 }} onChange={(e) => { launchSiteHandle(e) }}>
                                    <Option value={999}>微信朋友圈</Option>
                                    <Option value={0} disabled={topCanvasType === 101}>公众号文章底部</Option>
                                    <Option value={101} disabled={topCanvasType === 101 || topCanvasType === 142}>优雅横板大图</Option>
                                    <Option value={8} disabled={topCanvasType === 142}>激励式广告</Option>
                                </Select>
                            </Space>
                            <Space>
                                <span>原生推广页</span>
                                {pageData && pageData?.length > 0 && <div style={{ backgroundColor: 'rgb(237, 237, 237)', padding: 5, borderRadius: 4, fontSize: 12 }}>{pageData[0]?.name}</div>}
                                <Button type='link' onClick={() => { setPageShow(true) }}>{pageData && pageData?.length > 0 ? '修改' : '选择'}原生页</Button>
                            </Space>
                            <Space>
                                <span>投放号</span>
                                <Select
                                    mode="tags"
                                    placeholder="选择投放号"
                                    onChange={onSetRelease}
                                    style={{ minWidth: '180px', maxWidth: 400 }}
                                    maxTagCount={1}
                                    allowClear
                                    value={release}
                                    dropdownRender={menu => (
                                        <div>
                                            <div style={{ marginLeft: 10 }}><Checkbox indeterminate={!!release.length && release.length < releases.length} onChange={onCheckAllChange} checked={checkAll}>全选</Checkbox></div>
                                            <Divider style={{ margin: '4px 0' }} />
                                            {menu}
                                        </div>
                                    )}
                                >
                                    {releases?.map((item: { label: string, value: string, id: number }) => <Option key={item?.id} value={item?.value}>{item?.label}</Option>)}
                                </Select>
                            </Space>
                        </Space>
                    </div>
                    <Row className={style.content}>
                        <Col span={18} className={style.conLeft}>
                            <Row className={`${style.conTitle} ${style.conRightBorder}`}><Col span={24}>广告</Col></Row>
                            <Row className={style.items}>
                                {/* =============广告基本信息=========== */}
                                <Col span={6} className={style.conRightBorder}>
                                    <div className={style.top}>广告基本信息</div>
                                    <div className={style.center}>
                                        <div>推广目标：{dic.promotionTarget[product_type] || '(空)'}</div>
                                        <div>广告位置：{dic.localtion[localtion] || '(空)'}</div>
                                        <div>购买类型：{dic.adBasicData_pay_way[ctype] || '(空)'}</div>
                                        <div>投放时间：{begin_time && end_time ? `选择开始与结束日期（${moment(begin_time * 1000).format('YYYY-MM-DD')} 00:00至${moment(end_time as number * 1000).format('YYYY-MM-DD')} 23:59）` : begin_time ? `长期投放（${moment(begin_time * 1000).format('YYYY-MM-DD')} 00:00至长期）` : '(空)'}</div>
                                        <div>投放时段：{'全天投放'}</div>
                                        <div>计划预算：不限</div>
                                        <div>出价方式：{!bid_strategy ? 'CPM' : '智能优化(oCPM)'}</div>
                                        {bid_strategy && <>
                                            <div>投放模式：{bid_strategy && dic.adBasicData_day_time[bid_strategy.toString()] || '(空)'}</div>
                                            <div>优化目标：{'下单'}</div>
                                        </>}
                                        <div>广告预算：{budget ? budget / 100 + '元/天' : '(空)'} </div>
                                        <div>出价：{bid ? bid / 100 + `元/${!bid_strategy ? '千次曝光' : '下单'}` : '(空)'}</div>
                                        <div>地域：常住地</div>
                                        <div>地域选择：全选</div>
                                        <div>年龄：{JSON.parse(age)[0]?.split('~')[0] ? `${Number(JSON.parse(age)[0]?.split('~')[0])}岁-${Number(JSON.parse(age)[0]?.split('~')[1]) > 65 ? '65岁以上' : Number(JSON.parse(age)[0]?.split('~')[1]) + '岁'}` : '(空)'}</div>
                                        <div>性别：{gender === '[]' ? '全部' : gender?.indexOf('FEMALE') !== -1 ? '女' : '男' || '(空)'}</div>
                                        <div>自动扩量：不开启</div>
                                        <div>一键起量：不开启</div>
                                        <div style={{ marginTop: 10 }}>计划：{adBasicData?.adName ? `${adBasicData?.customName ? adBasicData?.customName + '+' : ''}` + adBasicData?.adName : '(空)'}</div>
                                    </div>
                                    <div className={style.bottom}><span onClick={() => { setBasicConfigVisible(true) }}>编辑</span></div>
                                </Col>
                                {/* =============定向包=========== */}
                                <Col span={6} className={style.conRightBorder}>
                                    <div className={style.top}>
                                        定向包<span>已选：{accNum}</span>
                                    </div>
                                    <div className={style.center}>
                                        {
                                            launchAcc.map((item: { label: string, package: { name: string, id: number }[] }, index: number) => {
                                                return <div className={style.acc} key={index}>
                                                    <div className={style.accName}>{item.label}</div>
                                                    {
                                                        item?.package?.map((pack: { name: string, id: number }) => {
                                                            return <div className={style.accCon} key={pack.id}>
                                                                <span className={style.title}>{pack.name}</span>
                                                                <CloseOutlined className={style.close} onClick={() => {
                                                                    selectPackageDel(item.label, pack.id)
                                                                }} /></div>
                                                        })
                                                    }
                                                </div>
                                            })
                                        }
                                    </div>
                                    <div className={style.bottom}><span onClick={() => { if (launchAcc?.length > 0) { setSelectPackageVisible(true) } else { message.error('请选择投放号') } }}>添加</span></div>
                                </Col>
                                {/* =============商品=========== */}
                                <Col span={6} className={style.conRightBorder}>
                                    <div className={style.top}>
                                        商品<span>已选：{accNum}</span>
                                    </div>
                                    <div className={style.center}>
                                        {
                                            launchAcc.map((item: { label: string, goods: { data: any[], key: number } }, index: number) => {
                                                return <div className={style.acc} key={index}>
                                                    <div className={style.accName}>{item.label}</div>
                                                    {
                                                        item?.goods?.data?.map((pack: { productName: string, author: string, id: number }, index: number) => {
                                                            return <div className={style.accCon} key={pack.id}><span className={style.title}>{pack.productName + '-' + pack.author}</span><CloseOutlined className={style.close} onClick={() => {
                                                                goodsDel(index)
                                                            }} /></div>
                                                        })
                                                    }
                                                </div>
                                            })
                                        }
                                    </div>
                                    <div className={style.bottom}><span onClick={() => { if (launchAcc?.length > 0) { setSelectGoodsVisible(true) } else { message.error('请选择投放号') } }}>添加</span></div>
                                </Col>
                                {/* 数据源 */}
                                <Col span={6} className={style.conRightBorder}>
                                    <div className={style.top}>
                                        数据源<span>已选：{accNum}</span>
                                    </div>
                                    <div className={style.center}>
                                        {
                                            launchAcc.map((item: { label: string, dataSource: { name: string, userActionSetId: number }[] }, index: number) => {
                                                return <div className={style.acc} key={index}>
                                                    <div className={style.accName}>{item.label}</div>
                                                    {
                                                        item?.dataSource?.map((pack: { name: string, userActionSetId: number }, index: number) => {
                                                            return <div className={style.accCon} key={pack.userActionSetId}><span className={style.title}>{pack.name}</span><CloseOutlined className={style.close} onClick={() => {
                                                                dataSourceDel(item.label, pack.userActionSetId)
                                                            }} /></div>
                                                        })
                                                    }
                                                </div>
                                            })
                                        }
                                    </div>
                                    <div className={style.bottom}><span onClick={() => { if (launchAcc?.length > 0) { setSelectDataSourceVisible(true) } else { message.error('请选择投放号') } }}>添加</span></div>
                                </Col>
                            </Row>
                        </Col>
                        {/* =============广告创意=========== */}
                        <Col span={6} className={style.conRight}>
                            <Row className={style.conTitle}><Col span={24}>广告创意 <span style={{ fontSize: 12, color: '#898989' }}>({dic.localtion[localtion]})</span></Col></Row>
                            <Row className={style.items}>
                                <Col span={24}>
                                    <div className={style.top}>创意基本信息</div>
                                    <div className={style.center}>
                                        <div>广告样式：{localtion === 999 ? crt_size === 1480 ? '常规广告' : '卡片式广告' : localtion === 0 ? '大图式卡片' : localtion === 101 ? '大图' : localtion === 8 ? '激励浏览' : '空'}</div>
                                        {localtion === 999 ? <>
                                            <div>外层文案：{desc || '空'}</div>
                                            {crt_size === 1480 ? <>
                                                <div>外层素材跳转：{'原生推广页' || '空'}</div>
                                                {/* <div>原生推广页：{adOriginalityInit?.jump_type_page_type && <Image src={adOriginalityInit?.jump_type_page_type?.img_url} style={{ width: 50 }} />}</div> */}
                                                <div>文字链文案：{link_name || '空'}</div>
                                                <div>文字链跳转：{link_page_type === 4 ? '原生推广页' : link_page_type === 6 ? '公众号详情页' : '空'}</div>
                                            </> : <>
                                                <div>外层文案标题：{title || '空'}</div>
                                                <div>外层素材: {out_material_use_canvas_top === 1 ? '使用原生推广页顶部素材' : '上传素材'}</div>
                                                {out_material_use_canvas_top === 0 && <div>
                                                    外层图片: <Image width={80} src={crt_info?.image_url} style={{ borderRadius: 8 }} />
                                                </div>}
                                            </>}

                                            <div>数据展示：{sns_dynamic_show_type === 0 ? '未启用' : '关注'}</div>
                                        </> : localtion === 0 || localtion === 101 ? <>
                                            {crt_size === 538 ?
                                                <div style={{ display: 'flex', alignItems: 'flex-start' }}>广告位视频：{crt_info?.short_video?.video_url ? <video width={100} src={crt_info?.short_video?.video_url} style={{ borderRadius: 8, overflow: 'hidden' }} /> : '<空>'}</div>
                                                : <div style={{ display: 'flex', alignItems: 'flex-start' }}>广告位图片：{crt_info?.image_url ? <Image width={100} src={crt_info?.image_url} style={{ borderRadius: 8, overflow: 'hidden' }} /> : '<空>'}</div>}

                                            <div>信息栏类型：{crt_info?.card_info?.head_desc_type === 1 ? '头像昵称型' : '文案型'}</div>
                                            {crt_info?.card_info?.head_desc_type === 2 && <div>信息栏文案：{crt_info?.card_info?.description}</div>}
                                            {localtion === 101 && <>
                                                <div>图文标题：{title}</div>
                                                <div style={{ display: 'flex', alignItems: 'flex-start' }}>广告文案：<span>
                                                    <span>首行：{(crt_info?.card_info?.desc?.length > 0 && crt_info?.card_info?.desc[0]) || '<空>'}</span> <br />
                                                    <span>次行：{(crt_info?.card_info?.desc?.length > 1 && crt_info?.card_info?.desc[1]) || '<空>'}</span> <br />
                                                    <span>第三行：{(crt_info?.card_info?.desc?.length > 2 && crt_info?.card_info?.desc[2]) || '<空>'}</span>
                                                </span></div>
                                            </>}
                                            <div>标签展示: 不启用</div>
                                            <div>点击跳转: 原生推广页</div>
                                            <div>点击按钮跳转: 原生推广页</div>
                                            <div>按钮文案：阅读小说</div>
                                        </> : <></>}
                                        <div>原生推广页：{pageData.length > 0 ? pageData[0]?.name : '空'}</div>
                                        {pageData.length > 0 && <div>
                                            原生推广页顶部素材预览：
                                            <div>{pageData[0]?.topCanvasType === 101 ? // 顶部轮播图
                                                <Space>
                                                    {JSON.parse(pageData[0]?.pageContextList[0]?.pageContextList)[0]?.componentGroupList?.componentGroup?.map((item: any, index: number) => {
                                                        return <Image width={80} src={item?.componentItem?.pureImageUrl} style={{ borderRadius: 8 }} key={index} />
                                                    })}
                                                </Space>
                                                :
                                                pageData[0]?.topCanvasType === 41 ? // 顶部图片
                                                    <Image width={80} src={pageData[0]?.thumbUrl} style={{ borderRadius: 8, overflow: 'hidden' }} />
                                                    :
                                                    <span>无此类型预览，请联系管理员</span>}</div>
                                        </div>}

                                        <div style={{ marginTop: 10 }}>创意名称：{adOriginalityInit?.name || '空'}</div>
                                    </div>
                                    <div className={style.bottom}><span onClick={() => { if (pageData && pageData?.length > 0) { setAdOriginalityVisible(true) } else { message.error('请先选择原生页') } }}>编辑</span></div>
                                </Col>
                                {/* <Col span={6}>
                                <div className={style.top}>创意素材<span>已选：0</span></div>
                                <div className={style.center}>
                                </div>
                                <div className={style.bottom}><span>添加</span></div>
                            </Col>
                            <Col span={6}>
                                <div className={style.top}>创意文案</div>
                                <div className={style.center}>
                                </div>
                                <div className={style.bottom}><span>添加</span></div>
                            </Col>
                            <Col span={6}>
                                <div className={style.top}>落地页<span>已选：0</span></div>
                                <div className={style.center}>
                                </div>
                                <div className={style.bottom}><span>添加</span></div>
                            </Col> */}
                            </Row>
                        </Col>
                    </Row>
                    {/* =============广告底部按钮=========== */}
                    <Space className={style.bts}>
                        <Button type='primary' onClick={severBd}>暂存到本地</Button>
                        <Button type='primary' onClick={preview}><SearchOutlined /> 批量预览广告</Button>
                        <Button onClick={delBdPlan}>清空本地配置</Button>
                    </Space>
                </div>
            </Card>

            {/* =============预览=========== */}
            {tableDate?.length > 0 && <Card
                title={<div className={style.cardTitle}>预览区</div>}
                className={style.createPlan}
                bordered={false}
                hoverable
                extra={
                    <Space>
                        <span>推广计划总数：{accNum}</span>
                        <span> 广告总数：{accNum}</span>
                        {tableSelect?.length > 0 && <span> 已选：<span style={{ color: '#1890FF' }}>{tableSelect?.length}</span> 条</span>}
                        {
                            data?.type !== '详情' && <Button type='primary' onClick={() => {
                                if (tableSelect.length === 0) {
                                    message.error('请选择要提交的计划！')
                                    return
                                };
                                setTaskNameShow(true)
                            }} loading={addPlan?.loading}>批量提交审核</Button>
                        }
                    </Space>
                }
            >
                <div className={style.cardBody}>
                    <div className={style.content} style={{ marginTop: 20 }}>
                        <Tables
                            columns={columns(out_material_use_canvas_top, crt_size)}
                            dataSource={tableDate}
                            total={0}
                            pageChange={pageChange}
                            sizeChange={pageChange}
                            size="small"
                            bordered
                            scroll={{ x: 1800 }}
                            rowSelection={{
                                selectedRowKeys: tableSelect?.map((item: any) => item?.id.toString()),
                                onChange: (selectedRowKeys: React.Key[], selectedRows: any) => {
                                    setTableSelect(selectedRows)
                                }
                            }}
                        />
                    </div>
                </div>
            </Card>}
        </Space>

    </>
}
export default CreatePlan