import { useAjax } from "@/Hook/useAjax"
import { dynamicCreativeLogApi } from "@/services/launchAdq/adqv3"
import { Button, Col, Form, Input, Modal, Row, Space, Table } from "antd"
import React, { useEffect, useState } from "react"
import { columnsLog } from "./tableConfig"

interface Props {
    userId: number
    visible?: boolean,
    onClose?: () => void,
}

/**
 * 创意操作记录
 * @param param0 
 * @returns 
 */
const HandleLog: React.FC<Props> = ({ visible, onClose, userId }) => {

    /*********************************/
    const [form] = Form.useForm();
    const [queryParams, setQueryParams] = useState<ADQV3.DynamicCreativeLogProps>({ pageNum: 1, pageSize: 20 })
    const dynamicCreativeLog = useAjax((params) => dynamicCreativeLogApi(params))
    /*********************************/

    useEffect(() => {
        dynamicCreativeLog.run({ ...queryParams, userId })
    }, [queryParams])

    const onFinish = (values: any) => {
        console.log(values)
        setQueryParams({ ...queryParams, ...values })
    }

    return <Modal
        title={<strong>创意操作记录</strong>}
        className="modalResetCss"
        visible={visible}
        onCancel={onClose}
        footer={null}
        width={1100}
    >
        <Space style={{ width: '100%' }} direction="vertical">
            <Form
                layout="inline"
                form={form}
                name="handleLog"
                onFinish={onFinish}
                style={{ marginBottom: 6 }}
            >
                <Row gutter={[10, 10]}>
                    <Col><Form.Item name='accountId' style={{ marginRight: 0 }}>
                        <Input placeholder="广告账号" style={{ width: 120 }} allowClear />
                    </Form.Item></Col>
                    <Col><Form.Item name='adgroupId' style={{ marginRight: 0 }}>
                        <Input placeholder="广告ID" style={{ width: 120 }} allowClear />
                    </Form.Item></Col>
                    <Col><Form.Item name='creativeName' style={{ marginRight: 0 }}>
                        <Input placeholder="创意名称" style={{ width: 150 }} allowClear />
                    </Form.Item></Col>
                    <Col><Form.Item name='creativeId' style={{ marginRight: 0 }}>
                        <Input placeholder="创意ID" style={{ width: 120 }} allowClear />
                    </Form.Item></Col>
                    <Col><Form.Item style={{ marginRight: 0 }}>
                        <Space>
                            <Button type="primary" htmlType="submit">搜索</Button>
                            <Button onClick={() => {
                                form.resetFields()
                            }}>重置</Button>
                        </Space>
                    </Form.Item></Col>
                </Row>
            </Form>
            <Table
                columns={columnsLog()}
                dataSource={dynamicCreativeLog?.data?.records}
                size="small"
                loading={dynamicCreativeLog?.loading}
                scroll={{ y: 500 }}
                rowKey={'id'}
                pagination={{
                    defaultPageSize: 100,
                    current: dynamicCreativeLog.data?.current || 1,
                    pageSize: dynamicCreativeLog.data?.size || 10,
                    total: dynamicCreativeLog.data?.total || 0
                }}
                onChange={(pagination) => {
                    const { current, pageSize } = pagination
                    setQueryParams({ ...queryParams, pageNum: current || 1, pageSize: pageSize || 10 })
                }}
            />
        </Space>
    </Modal>
}

export default React.memo(HandleLog)