import { useAjax } from "@/Hook/useAjax"
import { getPromotedObjectList, putPromotedObjectSync } from "@/services/launchAdq/adq"
import { PromotedObjectType } from "@/services/launchAdq/enum"
import { Button, Col, Input, message, Row, Select } from "antd"
import React, { useCallback, useEffect, useState } from "react"
import TableData from "../../components/TableData"
import tableConfig from "./tableConfig"

type Props = {
    accountId: string,
    adAccountId: string,
    userId: string,
    queryParmas: {
        accountId?: string,//账户ID
        adgroupId?: 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
}
/**
 * 操作记录
 */
const Promoted: React.FC<Props> = (props) => {
    /**************************/
    let { tableIdClick, queryParmas, userId } = props
    const [queryparams, setQueryparams] = useState<{ accountIdList?: string, promotedObjectName?: string, promotedObjectType?: string, pageNum: number, pageSize: number, userId: string }>({ pageNum: 1, pageSize: 20, userId })

    const getLogList = useAjax((params) => getPromotedObjectList(params), { formatResult: true })
    const syncAjax = useAjax((adAccountId) => putPromotedObjectSync(adAccountId))
    const [selectedRows, setSelectedRows] = useState<any[]>([])
    /**************************/
    useEffect(() => {
        getList(queryparams)
    }, [userId])

    const getList = useCallback((params: any) => {
        getLogList.run({ ...params, userId })
    }, [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 && getLogList.refresh()
            res ? message.success('同步成功！') : message.error('同步失败！')

        })
    }, [getLogList, selectedRows])
    return <div>
        <TableData
            isCard={false}
            columns={() => tableConfig(tableIdClick)}
            ajax={getLogList}
            dataSource={getLogList?.data?.data?.records}
            loading={getLogList?.data?.loading}
            scroll={{ y: 550 }}
            total={getLogList?.data?.data?.total}
            page={getLogList?.data?.data?.current}
            pageSize={getLogList?.data?.data?.size}
            syncAjax={sync}
            leftChild={<>
                <Row gutter={[10, 10]}>
                    <Col>
                        <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)
                                }
                                setQueryparams({ ...queryparams, accountIdList: arr })
                            }}
                        />
                    </Col>
                    <Col>
                        <Input
                            placeholder='推广目标名称'
                            allowClear
                            style={{ width: 150 }}
                            value={queryparams.promotedObjectName}
                            onChange={(e) => {
                                setQueryparams({ ...queryparams, promotedObjectName: e.target.value })
                            }}
                        />
                    </Col>
                    <Col>
                        <Select
                            placeholder='推广目标选择'
                            style={{ width: 120 }}
                            showSearch
                            filterOption={(input: any, option: any) =>
                                (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                            }
                            allowClear
                            onChange={(value: any) => {
                                setQueryparams({ ...queryparams, promotedObjectType: value })
                            }}
                        >
                            {Object.keys(PromotedObjectType).map(key => {
                                return <Select.Option value={key} key={key}>{PromotedObjectType[key]}</Select.Option>
                            })}
                        </Select>
                    </Col>
                    <Col>
                        <Button type='primary' onClick={() => { getList({ ...queryparams, pageNum: 1 }) }}>搜索</Button>
                    </Col>
                </Row>
            </>}
            onChange={(props: any) => {
                let { sortData, pagination } = props
                let { current, pageSize } = pagination
                setQueryparams({ ...queryparams, pageNum: current, pageSize })
                getList({ ...queryparams, pageNum: current, pageSize })
            }}
            rowSelection={{
                onChange: (selectedRowKeys: any, selectedRows: any) => {
                    setSelectedRows(selectedRows)
                }
            }}
        />
    </div>
}


export default React.memo(Promoted)