import { useAjax } from "@/Hook/useAjax"
import { getLogListApi } from "@/services/launchAdq/adq"
import { Col, Input, Row } from "antd"
import React, { 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 Log: React.FC<Props> = (props) => {

    /**************************/
    let { tableIdClick, queryParmas, userId } = props
    const [queryparams, setQueryparams] = useState<{ accountId?: string, adgroupId?: string, adgroupName?: string, pageNum: number, pageSize: number, userId: string }>({ pageNum: 1, pageSize: 20, userId })

    const getLogList = useAjax((params) => getLogListApi(params), { formatResult: true })
    /**************************/

    useEffect(() => {
        if (queryParmas?.accountId || queryParmas?.adgroupId || userId) {
            setQueryparams({ ...queryparams, ...queryParmas, userId })
        }
    }, [queryParmas, userId])

    useEffect(() => {
        getLogList.run(queryparams)
    }, [queryparams])

    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}
            leftChild={<>
                <Row gutter={[10, 10]}>
                    <Col>
                        <Input
                            placeholder='广告账号'
                            allowClear
                            style={{ width: 150 }}
                            value={queryparams.accountId}
                            onBlur={(e) => {
                                let value = e.target.value
                                setQueryparams({...queryparams, pageNum: 1, pageSize: 20, accountId: value })
                            }}
                            onKeyDownCapture={(e: any) => {
                                let key = e.key
                                if (key === 'Enter') {
                                    let value = e.target.value
                                    setQueryparams({...queryparams, pageNum: 1, pageSize: 20, accountId: value })
                                }
                            }}
                            onChange={(e) => {
                                setQueryparams({...queryparams, pageNum: 1, pageSize: 20, accountId: e.target.value })
                            }}
                        />
                    </Col>
                    <Col>
                        <Input
                            placeholder='广告组id'
                            allowClear
                            style={{ width: 150 }}
                            value={queryparams.adgroupId}
                            onBlur={(e) => {
                                let value = e.target.value
                                setQueryparams({...queryparams, pageNum: 1, pageSize: 20, adgroupId: value })
                            }}
                            onKeyDownCapture={(e: any) => {
                                let key = e.key
                                if (key === 'Enter') {
                                    let value = e.target.value
                                    setQueryparams({...queryparams, pageNum: 1, pageSize: 20, adgroupId: value })
                                }
                            }}
                            onChange={(e) => {
                                setQueryparams({...queryparams, pageNum: 1, pageSize: 20, adgroupId: e.target.value })
                            }}
                        />
                    </Col>
                    <Col>
                        <Input
                            placeholder='定向名称'
                            allowClear
                            style={{ width: 150 }}
                            value={queryparams.adgroupName}
                            onBlur={(e) => {
                                setQueryparams({...queryparams, pageNum: 1, pageSize: 20, adgroupName: e.target.value })
                            }}
                            onKeyDownCapture={(e: any) => {
                                let key = e.key
                                if (key === 'Enter') {
                                    setQueryparams({...queryparams, pageNum: 1, pageSize: 20, adgroupName: e.target.value })
                                }
                            }}
                            onChange={(e) => {
                                setQueryparams({...queryparams, pageNum: 1, pageSize: 20, adgroupName: e.target.value })
                            }}
                        />

                    </Col>
                </Row>
            </>}
            onChange={(props: any) => {
                let { sortData, pagination } = props
                let { current, pageSize } = pagination
                setQueryparams({ ...queryparams, pageNum: current, pageSize })
            }}
        />
    </div>
}


export default React.memo(Log)