import { useAjax } from "@/Hook/useAjax"
import { getDynamicCreativeV3ListApi } from "@/services/launchAdq/adqv3"
import { Button, Col, Form, Input, Row, Select, Space } from "antd"
import React, { useEffect } from "react"
import { txDynamicConfig } from "../config"
import tableConfig from "./tableConfig"
import TableData from "@/pages/launchSystemNew/components/TableData"


const Creative: React.FC<ADQV3.CreativeProps> = ({ queryForm, setQueryForm, userId }) => {

    /*********************************/
    const [form] = Form.useForm();
    const getDynamicCreativeV3List = useAjax((params) => getDynamicCreativeV3ListApi(params), { formatResult: true })
    /*********************************/

    useEffect(() => {
        form.setFieldsValue({ adgroupId: queryForm.adgroupId })
    }, [queryForm.adgroupId])

    useEffect(() => {
        getDynamicCreativeV3List.run({ ...queryForm, userId })
    }, [userId, queryForm])

    const onFinish = (values: any) => {
        console.log(values)
        setQueryForm({ ...queryForm, ...values })
    }

    return <div>
        <Form
            layout="inline"
            form={form}
            name="basignCreative"
            initialValues={queryForm}
            onFinish={onFinish}
        >
            <Row gutter={[10, 10]}>
                <Col><Form.Item name='accountId' style={{ marginRight: 0 }}>
                    <Input placeholder="广告账号" allowClear />
                </Form.Item></Col>
                <Col><Form.Item name='adgroupId' style={{ marginRight: 0 }}>
                    <Input placeholder="广告ID" allowClear />
                </Form.Item></Col>
                <Col><Form.Item name='creativeName' style={{ marginRight: 0 }}>
                    <Input placeholder="创意名称" allowClear />
                </Form.Item></Col>
                <Col><Form.Item name='creativeId' style={{ marginRight: 0 }}>
                    <Input placeholder="创意ID" allowClear />
                </Form.Item></Col>
                <Col><Form.Item name='isDeleted'>
                    <Select
                        placeholder='是否删除？'
                        style={{ width: 100 }}
                        showSearch
                        filterOption={(input: any, option: any) =>
                            (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                        }
                    >
                        <Select.Option value={true}>是</Select.Option>
                        <Select.Option value={false}>否</Select.Option>
                    </Select>
                </Form.Item></Col>
                <Col><Form.Item style={{ marginRight: 0 }}>
                    <Button type="primary" htmlType="submit">搜索</Button>
                    <Button onClick={() => form.resetFields()}>重置</Button>
                </Form.Item></Col>
            </Row>
        </Form>

        <TableData
            isCard={false}
            columns={() => tableConfig()}
            ajax={getDynamicCreativeV3List}
            fixed={{ left: 2, right: 4 }}
            dataSource={getDynamicCreativeV3List?.data?.data?.records}
            loading={getDynamicCreativeV3List?.loading}
            scroll={{ y: 560 }}
            total={getDynamicCreativeV3List?.data?.data?.total}
            page={getDynamicCreativeV3List?.data?.data?.current}
            pageSize={getDynamicCreativeV3List?.data?.data?.size}
            myKey={'dynamicCreativeId'}
            gutter={[0, 10]}
            config={txDynamicConfig}
            configName="创意3.0"
            leftChild={<Space direction='vertical'>
                <Row gutter={[10, 10]} align='middle'>

                </Row>
            </Space>}
            onChange={(props: any) => {
                let { pagination } = props
                let { current, pageSize } = pagination
                setQueryForm({ ...queryForm, pageNum: current, pageSize })
            }}
        />
    </div>
}

export default React.memo(Creative)