import React, { useEffect, useState } from "react"
import DayAd from "./dayAd"
import columns12 from "./tableConfig"
import { getPresets } from "@/components/QueryForm/const"
import TableData from "../../components/TableData"
import QueryForm from "@/components/QueryForm"
import { PromotionDataDay, getDynamicTencentListApi, getDynamicTencentTotalApi, updateBatchDynamicCreativesInfoApi } from "@/services/gameData/adlist"
import { useAjax } from "@/Hook/useAjax"
import moment from "moment"
import { Button, Modal, Space, Table, message, notification } from "antd"
import { PauseCircleOutlined, PlayCircleOutlined } from "@ant-design/icons"



const TencentMonitor: React.FC = () => {

    /***************************************/
    const [queryForm, setQueryForm] = useState<PromotionDataDay>({ pageNum: 1, pageSize: 50, sourceSystem: 'ZX_ONE', costBeginDate: moment().format('YYYY-MM-DD'), costEndDate: moment().format('YYYY-MM-DD') })
    const [totalData, setTotalData] = useState<any[]>([])
    const [visible, setVisible] = useState<boolean>(false)
    const [promotionId, setPromotionId] = useState<number>()
    const [adName, setAdName] = useState<string>('')
    const [selectedRows, setSelectedRows] = useState<any[]>([])
    const [isZj, setIsZj] = useState<boolean>(true)
    const [failIdList, setFailIdList] = useState<{ adgroupId: number, code: number, message: string, messageCn: string }[]>([])
    const [failVisible, setFailVisible] = useState<boolean>(false)

    const getDynamicTencentList = useAjax((params) => getDynamicTencentListApi(params))
    const getDynamicTencentTotal = useAjax((params) => getDynamicTencentTotalApi(params))
    const updateBatchDynamicCreativesInfo = useAjax((params) => updateBatchDynamicCreativesInfoApi(params))
    /***************************************/

    useEffect(() => {
        getDynamicTencentList.run(queryForm)
        getDynamicTencentTotal.run(queryForm).then((res: { id: number; accountName: string }) => {
            res.id = 1
            res.accountName = '总计'
            setTotalData([res])
        })
    }, [queryForm])

    const dayHandle = (data: any) => {
        setVisible(true)
        setAdName(data.promotionName)
        setPromotionId(data.promotionId)
    }

    // 批量启停
    const adStatus = (type: '启动' | '暂停') => {
        const accountAdgroupMaps = [...new Set(selectedRows?.map(item => item.accountId + ',' + item.dynamicCreativeId))]
        updateBatchDynamicCreativesInfo.run({ accountAdgroupMaps, suspend: type === '暂停' }).then(res => {
            if (res?.failIdList?.length === 0) {
                message.success(`修改操作完成！`)
                getDynamicTencentList.refresh()
                getDynamicTencentTotal.refresh()
                setSelectedRows([])
            } else {
                setFailIdList(res?.list || [])
                setFailVisible(true)
            }
        })
    }

    return <div>
        <TableData
            czChild={<Space>
                {/* <Switch checkedChildren="开启全选" unCheckedChildren="关闭全选" checked={!isZj} onChange={(e) => { setIsZj(!e); }} /> */}
                <Button type='primary' size="small" style={{ background: '#67c23a', borderColor: '#67c23a' }} loading={updateBatchDynamicCreativesInfo.loading} icon={<PlayCircleOutlined />} disabled={selectedRows.length === 0} onClick={() => adStatus('启动')}>启动</Button>
                <Button type='primary' size="small" style={{ background: '#e6a23c', borderColor: '#e6a23c' }} loading={updateBatchDynamicCreativesInfo.loading} icon={<PauseCircleOutlined />} disabled={selectedRows.length === 0} onClick={() => adStatus('暂停')}>暂停</Button>
                {selectedRows.length > 0 && <Button type="link" danger onClick={() => setSelectedRows([])}>清空</Button>}
                <span style={{ color: 'red' }}>操作完数据结果延时5分钟之内，即时结果去腾讯后台查看</span>
            </Space>}
            leftChild={<QueryForm
                initialValues={{ sourceSystem: 'ZX_ONE', consumeDay: [moment(), moment()] }}
                onChange={(data: any) => {
                    const { type, gameClassify, costBeginDay, costEndDay, sysUserName, ...params } = data
                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                    newQueryForm.pageNum = 1
                    newQueryForm.pitcherName = sysUserName
                    newQueryForm.accountType = type
                    newQueryForm.classify = gameClassify
                    if (costBeginDay && costEndDay) {
                        newQueryForm.costBeginDate = costBeginDay
                        newQueryForm.costEndDate = costEndDay
                    } else {
                        delete newQueryForm.costBeginDate
                        delete newQueryForm.costEndDate
                    }
                    setQueryForm({ ...newQueryForm, ...params })
                }}
                isSource
                isAccountId
                isAccount
                isType
                isAgentId
                isBGGameClassify
                isConsumeDay={{ ranges: getPresets() }}
                isCpName
                isGameId
                isSysUserId
                isProjectId
                isProjectName
                isDynamicCreativeName
                isPromotionId
                isDynamicCreativeId
                isPromotionName
                isAdTXStatus
                isConfiguredStatus
            />}
            isZj={isZj}
            totalData={totalData}
            scroll={{ x: 1000, y: 600 }}
            ajax={getDynamicTencentList}
            fixed={{ left: 3, right: 0 }}
            dataSource={getDynamicTencentList?.data?.records?.map((item: any) => ({ ...item, id: Number(item.dynamicCreativeId) }))}
            total={getDynamicTencentList?.data?.total}
            page={queryForm.pageNum}
            pageSize={queryForm.pageSize}
            sortData={{
                field: queryForm?.sortFiled,
                order: queryForm?.sortType === 'asc' ? 'ascend' : 'descend'
            }}
            title='腾讯创意监控'
            onChange={(props: any) => {
                let { pagination, sortData } = props
                let { current, pageSize } = pagination
                let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                if (sortData && sortData?.order) {
                    newQueryForm['sortType'] = sortData?.order === 'ascend' ? 'asc' : 'desc'
                    newQueryForm['sortFiled'] = sortData?.field
                } else {
                    delete newQueryForm['sortType']
                    delete newQueryForm['sortFiled']
                }
                newQueryForm.pageNum = current
                newQueryForm.pageSize = pageSize
                setQueryForm({ ...newQueryForm })
            }}
            rowSelection={{
                selectedRowKeys: selectedRows.map(item => item.dynamicCreativeId + ''),
                getCheckboxProps: (record: any) => ({
                    disabled: record.status === 'STATUS_DELETED' || record?.accountName === '总计'
                }),
                onSelect: (record: { dynamicCreativeId: number }, selected: boolean) => {
                    if (selected) {
                        selectedRows.push({ ...record })
                        setSelectedRows([...selectedRows])
                    } else {
                        let newSelectAccData = selectedRows.filter((item: { dynamicCreativeId: number }) => item.dynamicCreativeId !== record.dynamicCreativeId)
                        setSelectedRows([...newSelectAccData])
                    }
                },
                onSelectAll: (selected: boolean, selectedRowss: { dynamicCreativeId: number }[], changeRows: { dynamicCreativeId: number }[]) => {
                    if (selected) {
                        let newSelectAccData = [...selectedRows]
                        changeRows.forEach((item: { dynamicCreativeId: number }) => {
                            let index = newSelectAccData.findIndex((ite: { dynamicCreativeId: number }) => ite.dynamicCreativeId === item.dynamicCreativeId)
                            if (index === -1) {
                                newSelectAccData.push({ ...item })
                            }
                        })
                        setSelectedRows([...newSelectAccData])
                    } else {
                        let newSelectAccData = selectedRows.filter((item: { dynamicCreativeId: number }) => {
                            let index = changeRows.findIndex((ite: { dynamicCreativeId: number }) => ite.dynamicCreativeId === item.dynamicCreativeId)
                            if (index !== -1) {
                                return false
                            } else {
                                return true
                            }
                        })
                        setSelectedRows([...newSelectAccData])
                    }
                }
            }}
            config={columns12(dayHandle, () => { getDynamicTencentList.refresh() })}
            configName={'腾讯创意监控'}
        />

        {visible && <DayAd adName={adName} visible={visible} onClose={() => { setVisible(false); setPromotionId(undefined) }} queryForm={queryForm} promotionId={promotionId} />}

        {failVisible && <Modal
            title={<strong>报错信息</strong>}
            visible={failVisible}
            className='modalResetCss'
            width={650}
            onCancel={() => { setFailVisible(false); setFailIdList([]) }}
            footer={null}
        >
            <Table
                size="small"
                bordered
                rowKey={'creativeId'}
                columns={[{
                    title: '创意ID',
                    dataIndex: 'creativeId',
                    key: 'creativeId',
                    width: 110,
                    render: (value) => <span style={{ fontSize: 12 }}>{value}</span>,
                }, {
                    title: 'code',
                    dataIndex: 'code',
                    key: 'code',
                    width: 70,
                    align: 'center',
                    render: (value) => <span style={{ fontSize: 12 }}>{value}</span>,
                }, {
                    title: '错误信息',
                    dataIndex: 'messageCn',
                    key: 'messageCn',
                    render: (value) => <span style={{ fontSize: 12 }}>{value}</span>,
                }]}
                dataSource={failIdList}
            />
        </Modal>}
    </div>
}

export default TencentMonitor