
import { useAjax } from '@/Hook/useAjax'
import { CampaignTypeEnum, ConfiguredStatusEnum, PromotedObjectType } from '@/services/launchAdq/enum'
import { Col, Row, Input, Select, message, Button, Popconfirm, Tooltip } from 'antd'
import React, { useEffect, useCallback, useState } from 'react'
import TableData from '../../components/TableData'
import tableConfig from './tableConfig'
import { getAdqCampaignList, putAdqCampaignPage, putAdqCampaignConfigStatus, delCampaignIdsApi, putConfigStatusApi } from '@/services/launchAdq/adq'
import { PauseCircleOutlined, PlayCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons'
type Props = {
    accountId: string,
    adAccountId: string,
    userId: string,
    queryParmas: {
        accountId?: string,//账户ID
        campaignId?: string,//计划ID
        adgroupId?: string,//广告ID
        adcreativeId?: string,//创意ID
        pageId?: string,//落地页ID
        targetingId?: string,//定向ID}
    },
    tableIdClick: (props: {
        activeKey: string,
        parma: {
            accountId?: string,//账户ID
            campaignId?: string,//计划ID
            adgroupId?: string,//广告ID
            adcreativeId?: string,//创意ID
            pageId?: string,//落地页ID
            targetingId?: string,//定向ID
        }
    }) => void
}

function Campaign(props: Props) {
    let { userId, queryParmas, tableIdClick } = props
    // api方法
    const listAjax = useAjax((params) => getAdqCampaignList(params), { formatResult: true })
    const syncAjax = useAjax((adAccountId) => putAdqCampaignPage(adAccountId))
    const switchAjax = useAjax((params) => putAdqCampaignConfigStatus(params))
    const delCampaignIds = useAjax((params) => delCampaignIdsApi(params))
    const putConfigStatus = useAjax((params) => putConfigStatusApi(params))
    const [selectedRows, setSelectedRows] = useState<any[]>([])
    const [queryFrom, set_queryFrom] = useState<{
        pageNum: number;
        pageSize: number;
        userId?: string;//用户ID
        accountId?: string;//账号本地ID
        campaignName?: string;//计划名称
        campaignId?: string;//计划ID
        configuredStatus?: string;//计划状态
        campaignType?: string;//计划类型
        promotedObjectType?: string;//推广目标类型
    }>({ pageNum: 1, pageSize: 20 })
    console.log('计划=====》')
    useEffect(() => {
        getList({ pageSize: 20, pageNum: 1, accountId: queryParmas.accountId, campaignId: queryParmas.campaignId })
    }, [userId, queryParmas.accountId, queryParmas.campaignId])
    // 获取列表
    const getList = useCallback((params: any) => {
        listAjax.run({ ...params, userId })
    }, [userId, listAjax,])
    // 同步 
    const sync = useCallback(() => {
        let arr = [...new Set(selectedRows?.map(item => item.accountId))]
        syncAjax.run({ accountIdList: arr }).then(res => {
            res && listAjax.refresh()
            res ? message.success('同步成功！') : message.error('同步失败！')

        })
    }, [listAjax, selectedRows])
    // 启停
    const switchHandle = useCallback((data: any, checked: boolean) => {
        let { accountId, campaignId } = data
        let configuredStatus = checked ? 'AD_STATUS_NORMAL' : 'AD_STATUS_SUSPEND'
        switchAjax.run({ accountId, campaignId, configuredStatus }).then(res => {
            setSelectedRows([])
            listAjax.refresh()
            res ? message.success(checked ? '开启计划成功！' : '关闭计划成功！') : message.error(checked ? '开启计划失败' : '关闭计划失败！')
        })
    }, [listAjax])

    // 修改状态
    const adStatus = (configuredStatus: 'AD_STATUS_NORMAL' | 'AD_STATUS_SUSPEND') => {
        putConfigStatus.run({ list: selectedRows.map(item => item.accountId + '_' + item.campaignId).toString(), configuredStatus }).then(res => {
            message.success(configuredStatus === 'AD_STATUS_NORMAL' ? '开启计划成功！' : '关闭计划成功！')
            setSelectedRows([])
            listAjax.refresh()
        })
    }

    // 批量删除计划
    const delCampaigns = () => {
        // if (selectedRows.some(item => item.configuredStatus === 'AD_STATUS_NORMAL')) {
        //     message.error('只能删除暂停的计划')
        //     return
        // }
        delCampaignIds.run({ list: selectedRows.map(item => item.accountId + '_' + item.campaignId).toString() }).then(res => {
            message.info({ content: res, duration: 5 })
            setSelectedRows([])
            listAjax.refresh()
        })
    }

    return <div>
        <Row gutter={[6, 6]} align='middle' style={{ marginBottom: 15 }}>
            <Col>
                <Input
                    placeholder='广告账号'
                    allowClear
                    style={{ width: 150 }}
                    onChange={(e) => {
                        let value = e.target.value
                        set_queryFrom({ ...queryFrom, accountId: value })
                        tableIdClick({ activeKey: '1', parma: { accountId: '' } })
                    }}
                />
            </Col>
            <Col>
                <Input
                    placeholder='计划名称'
                    allowClear
                    style={{ width: 150 }}
                    onChange={(e) => {
                        let value = e.target.value
                        set_queryFrom({ ...queryFrom, campaignName: value })
                    }}
                />
            </Col>
            <Col>
                <Input
                    placeholder='计划ID'
                    allowClear
                    style={{ width: 150 }}
                    onChange={(e) => {
                        let value = e.target.value
                        set_queryFrom({ ...queryFrom, campaignId: value })
                        tableIdClick({ activeKey: '2', parma: { campaignId: '' } })
                    }}
                />
            </Col>
            <Col>
                <Select placeholder='推广目标选择' style={{ minWidth: 150 }} showSearch filterOption={(input: any, option: any) =>
                    (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                } allowClear onChange={(value: any) => {
                    set_queryFrom({ ...queryFrom, promotedObjectType: value })
                }}>
                    {
                        Object.keys(PromotedObjectType).map(key => {
                            // let obj = JSON.parse(PromotedObjectType[key])
                            return <Select.Option value={key} key={key}>{PromotedObjectType[key as keyof typeof PromotedObjectType]}</Select.Option>
                        })
                    }
                </Select>
            </Col>
            <Col>
                <Select placeholder='计划状态' style={{ minWidth: 150 }} showSearch filterOption={(input: any, option: any) =>
                    (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                } allowClear onChange={(value: any) => {
                    set_queryFrom({ ...queryFrom, configuredStatus: value })
                }}>
                    {
                        Object.keys(ConfiguredStatusEnum).map(key => {
                            // let obj = JSON.parse(PromotedObjectType[key])
                            return <Select.Option value={key} key={key}>{ConfiguredStatusEnum[key as keyof typeof ConfiguredStatusEnum]}</Select.Option>
                        })
                    }
                </Select>
            </Col>
            <Col>
                <Select placeholder='计划类型' style={{ minWidth: 150 }} showSearch filterOption={(input: any, option: any) =>
                    (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                } allowClear onChange={(value: any) => {
                    set_queryFrom({ ...queryFrom, campaignType: value })
                }}>
                    {
                        Object.keys(CampaignTypeEnum).map(key => {
                            // let obj = JSON.parse(PromotedObjectType[key])
                            console.log(key)
                            return <Select.Option value={key} key={key}>{CampaignTypeEnum[key as keyof typeof CampaignTypeEnum]}</Select.Option>
                        })
                    }
                </Select>
            </Col>
            <Col>
                <Button type='primary' onClick={() => { getList({ ...queryFrom, pageNum: 1 }) }}>搜索</Button>
            </Col>
        </Row>
        <TableData
            isCard={false}
            columns={() => tableConfig(switchHandle)}
            ajax={listAjax}
            syncAjax={sync}
            dataSource={listAjax?.data?.data?.records}
            loading={listAjax?.loading || syncAjax?.loading}
            scroll={{ x: 2000, y: 550 }}
            total={listAjax?.data?.data?.total}
            page={listAjax?.data?.data?.current}
            pageSize={listAjax?.data?.data?.size}
            myKey={'campaignId'}
            leftChild={<>
                <Row gutter={[10, 10]}>
                    <Col><Button type='primary' loading={putConfigStatus.loading} style={{ background: '#67c23a', borderColor: '#67c23a' }} icon={<PlayCircleOutlined />} disabled={selectedRows.length === 0} onClick={() => adStatus('AD_STATUS_NORMAL')}>启动</Button></Col>
                    <Col><Button type='primary' loading={putConfigStatus.loading} style={{ background: '#e6a23c', borderColor: '#e6a23c' }} icon={<PauseCircleOutlined />} disabled={selectedRows.length === 0} onClick={() => adStatus('AD_STATUS_SUSPEND')}>暂停</Button></Col>
                    <Col><Popconfirm
                        title="确定删除？"
                        onConfirm={delCampaigns}
                        disabled={selectedRows.length === 0}
                    >
                        <Button danger disabled={selectedRows.length === 0} loading={delCampaignIds.loading}>
                            删除
                            {/* <Tooltip title="只支持删除暂停的计划">
                                <QuestionCircleOutlined />
                            </Tooltip> */}
                        </Button>
                    </Popconfirm></Col>
                    <Col>
                        {selectedRows?.length > 0 && <Button type='link' style={{ padding: 0, color: 'red' }} onClick={() => {
                            setSelectedRows([])
                        }}>清空已选（{selectedRows?.length}）</Button>}
                    </Col>
                </Row>
            </>}
            onChange={(props: any) => {
                let { pagination } = props
                let { current, pageSize } = pagination
                set_queryFrom({ ...queryFrom, pageNum: current, pageSize })
                getList({ ...queryFrom, pageNum: current, pageSize })
            }}
            rowSelection={{
                selectedRowKeys: selectedRows?.map(item => item?.campaignId?.toString()),
                getCheckboxProps: (record: any) => ({
                    disabled: record.isDeleted
                }),
                onSelect: (record: { campaignId: number }, selected: boolean) => {
                    if (selected) {
                        selectedRows.push({ ...record })
                        setSelectedRows([...selectedRows])
                    } else {
                        let newSelectAccData = selectedRows.filter((item: { campaignId: number }) => item.campaignId !== record.campaignId)
                        setSelectedRows([...newSelectAccData])
                    }
                },
                onSelectAll: (selected: boolean, selectedRowss: { campaignId: number }[], changeRows: { campaignId: number }[]) => {
                    if (selected) {
                        let newSelectAccData = [...selectedRows]
                        changeRows.forEach((item: { campaignId: number }) => {
                            let index = newSelectAccData.findIndex((ite: { campaignId: number }) => ite.campaignId === item.campaignId)
                            if (index === -1) {
                                newSelectAccData.push({ ...item })
                            }
                        })
                        setSelectedRows([...newSelectAccData])
                    } else {
                        let newSelectAccData = selectedRows.filter((item: { campaignId: number }) => {
                            let index = changeRows.findIndex((ite: { campaignId: number }) => ite.campaignId === item.campaignId)
                            if (index !== -1) {
                                return false
                            } else {
                                return true
                            }
                        })
                        setSelectedRows([...newSelectAccData])
                    }
                }
            }}
        />
    </div>
}
export default Campaign