import { useAjax } from '@/Hook/useAjax'
import { Row, message, Input, Space, Button } from 'antd'
import React, { useEffect, useState, useCallback } from 'react'
import TableData from '../../components/TableData'
import tableConfig from './tableConfig'
import { putAdqAdAccountSyncByIds, getAdqAdAccountList } from '@/services/launchAdq/adq'
import { getAdAccountListApi } from '@/services/launchAdq/adAuthorize'
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 AdAccount(props: Props) {
    let { adAccountId, accountId, userId, tableIdClick, queryParmas } = props
    let [selectedRowKeys, setSelectedRowKeys] = useState<any[]>([])
    const [queryForm, setQueryForm] = useState<{
        pageNum: number;
        pageSize: number;
        accountIds: any[];
        adcreativeName?: string;
    }>({ pageNum: 1, pageSize: 20, accountIds: [] })
    // api方法
    const listAjax = useAjax((params) => getAdAccountListApi(params), { formatResult: true })
    const syncAjax = useAjax((params) => putAdqAdAccountSyncByIds(params))
    useEffect(() => {
        getList(queryForm)
    }, [accountId])
    // 获取列表
    const getList = useCallback((params?: any) => {
        listAjax.run({ ...params, putUserId: userId })
    }, [userId, listAjax])
    // 同步 
    const sync = useCallback(() => {
        if (selectedRowKeys?.length === 0) {
            message.error('请勾选要同步的广点通账号!')
            return
        }
        syncAjax.run(selectedRowKeys).then(res => {
            res && listAjax.refresh()
            res ? message.success('同步成功！') : message.error('同步失败！')

        })
    }, [adAccountId, listAjax, selectedRowKeys])
    return <div>
        <TableData
            isCard={false}
            columns={() => tableConfig(tableIdClick)}
            ajax={listAjax}
            syncAjax={sync}
            dataSource={listAjax?.data?.data?.records}
            loading={listAjax?.loading || syncAjax?.loading}
            scroll={{ y: 550 }}
            total={listAjax?.data?.data?.total}
            page={listAjax?.data?.data?.current}
            pageSize={listAjax?.data?.data?.size}
            leftChild={<>
                <Space>
                    <Input
                        placeholder='广告账号'
                        allowClear
                        style={{ width: 150 }}
                        onChange={(e) => {
                            let value = e.target.value
                            let arr: any = []
                            if (value) {
                                value = value.replace(/[,，\s]/g, ',')
                                arr = value.split(',').filter((a: any) => a)
                            }
                            setQueryForm({ ...queryForm, accountIds: arr })
                        }}
                    />
                    <Button type='primary' onClick={() => { getList({ ...queryForm, pageNum: 1 }) }}>搜索</Button>
                </Space>
            </>}
            rowSelection={{
                onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
                    setSelectedRowKeys(selectedRowKeys)
                }
            }}
            onChange={(props: any) => {
                let { sortData, pagination } = props
                let { current, pageSize } = pagination
                setQueryForm({ ...queryForm, pageNum: current, pageSize })
                getList({ ...queryForm, pageNum: current, pageSize })
            }}
        />
    </div>
}
export default AdAccount