import React, { useEffect, useCallback, useState } from 'react'
import { Button, Col, Input, message, Row } from 'antd'
import { useAjax } from '@/Hook/useAjax'
import { getAdqTargetingList, putAdqTargetingSyncAll } from '@/services/launchAdq/adq'
import TableData from '../../components/TableData'
import tableConfig from './tableConfig'

function Targeting(props: { adAccountId: any, userId: string, accountId: any, tableIdClick: any }) {
    let { accountId, adAccountId, userId, tableIdClick } = props
    const listAjax = useAjax((params) => getAdqTargetingList(params), { formatResult: true })
    const syncAjax = useAjax((adAccountId) => putAdqTargetingSyncAll(adAccountId))
    const [selectedRows, setSelectedRows] = useState<any[]>([])
    const [queryFrom,set_queryFrom]=useState<{
        pageNum: number;
        pageSize: number;
        accountId?: string;
        targetingName?: string;
    }>({pageNum:1,pageSize:20})
    console.log('定向=====》')
    useEffect(() => {
        getList({ pageNum: 1, pageSize: 20 })
    }, [userId, accountId])
    // 获取列表
    const getList = useCallback((params: {
        pageNum: number;
        pageSize: number;
        accountId?: string;
        targetingName?: string;
    }) => {
        listAjax.run({ ...params, userId })
    }, [listAjax, userId])
    // 同步 
    const sync = useCallback(() => {
        if (selectedRows?.length === 0) {
            message.error('请先勾选要同步的广点通账号!')
            return
        }
        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])
    return <div>
        <TableData
            isCard={false}
            columns={() => tableConfig(tableIdClick)}
            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={'targetingId'}
            leftChild={<>
                <Row gutter={[10, 10]}>
                    <Col>
                        <Input
                            placeholder='广告账号'
                            allowClear
                            style={{ width: 150 }}
                            onChange={(e) => {
                                let value = e.target.value
                                set_queryFrom({...queryFrom, accountId: value})
                            }}
                        />
                    </Col>
                    <Col>
                        <Input
                            placeholder='定向名称'
                            allowClear
                            style={{ width: 150 }}
                            onChange={(e) => {
                                let value = e.target.value
                                set_queryFrom({...queryFrom, targetingName: value})
                            }}
                        />

                    </Col>
                    <Col>
                            <Button type='primary' onClick={()=>{getList({...queryFrom,pageNum:1})}}>搜索</Button>
                    </Col>
                </Row>
            </>}
            onChange={(props: any) => {
                let { sortData, pagination } = props
                let { current, pageSize } = pagination
                set_queryFrom({...queryFrom,pageNum:current,pageSize})
                getList({...queryFrom, pageNum: current, pageSize })
            }}
            rowSelection={{
                selectedRowKeys: selectedRows?.map(item => item?.targetingId?.toString()),
                onChange: (selectedRowKeys: any, selectedRows: any) => {
                    setSelectedRows(selectedRows)
                }
            }}
        />
    </div>
}
export default Targeting