import { useAjax } from "@/Hook/useAjax"
import { getDynamicListApi } from "@/services/adqV3"
import { Button, Card, Table, Tag, Typography } from "antd"
import React, { useEffect, useState } from "react"
import '../index.less'
import { columnsDynamicLog } from "./tableConfig"
const { Title } = Typography;


interface Props {
    record: any,
    isHandle?: boolean
}
/**
 * 创意日志
 * @returns 
 */
const DynamicLog: React.FC<Props> = ({ record, isHandle }) => {

    /****************************************/
    const [queryForm, setQueryForm] = useState<PULLIN.GetDynamicV3LogProps>({ pageNum: 1, pageSize: 20 })
    const getDynamicList = useAjax((params) => getDynamicListApi(params), { formatResult: true })
    /****************************************/

    useEffect(() => {
        if (record?.id) {
            let params = {}
            if (isHandle) {
                params = { ...queryForm, operateLogId: record?.id }
            } else {
                params = { ...queryForm, adgroupCreateLogId: record?.id }
            }
            getDynamicList.run(params)
        }
    }, [record?.id, queryForm, isHandle])

    return isHandle ? <Table
        columns={columnsDynamicLog()}
        dataSource={getDynamicList?.data?.data?.records}
        size="small"
        loading={getDynamicList?.loading}
        scroll={{ y: 300 }}
        bordered
        rowKey={'id'}
        pagination={{
            pageSize: queryForm.pageSize,
            current: queryForm.pageNum,
            total: getDynamicList?.data?.data?.total || 0,
            showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>
        }}
        onChange={(pagination) => {
            let { current, pageSize } = pagination
            let newQueryForm = JSON.parse(JSON.stringify(queryForm))
            newQueryForm.pageNum = current
            newQueryForm.pageSize = pageSize
            setQueryForm(newQueryForm)
        }}
    /> : <Card
        hoverable
        className="cardResetCss"
    >
        <Title level={5}>
            <span>{record?.adgroupName + ' 创意日志'} </span>
            <Button type="link" onClick={() => getDynamicList.refresh()}>刷新</Button>
        </Title>
        <Table
            columns={columnsDynamicLog()}
            dataSource={getDynamicList?.data?.data?.records}
            size="small"
            loading={getDynamicList?.loading}
            scroll={{ y: 300 }}
            bordered
            rowKey={'id'}
            pagination={{
                pageSize: queryForm.pageSize,
                current: queryForm.pageNum,
                total: getDynamicList?.data?.data?.total || 0,
                showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>
            }}
            onChange={(pagination) => {
                let { current, pageSize } = pagination
                let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                newQueryForm.pageNum = current
                newQueryForm.pageSize = pageSize
                setQueryForm(newQueryForm)
            }}
        />
    </Card>
}

export default React.memo(DynamicLog)