import { Form, Input, message, Modal } from "antd"
import React from "react"
import { useAjax } from "@/Hook/useAjax";
import { modifyAmountBatchApi } from "@/services/launchAdq/adqv3";

interface Props {
    visible?: boolean,
    onChange?: () => void,
    onClose?: () => void,
    selectedRows: any[]
}
/**
 * 修改广告
 * @returns 
 */
const UpdateAd: React.FC<Props> = ({ visible, onChange, onClose, selectedRows }) => {

    /***************************/
    const [form] = Form.useForm();

    const modifyAmountBatch = useAjax((params) => modifyAmountBatchApi(params))
    /***************************/

    const handleOk = () => {
        form.validateFields().then(values => {
            let accountAdgroupMaps = [...new Set(selectedRows?.map(item => item.accountId + ',' + item.adgroupId))]
            modifyAmountBatch.run({ accountAdgroupMaps, ...values }).then(res => {
                if (res) {
                    message.success(`修改操作完成！`)
                    onChange?.()
                }
            })
        })
    }

    return <Modal
        title={'修改出价'}
        open={visible}
        onOk={handleOk}
        onCancel={() => onClose && onClose()}
        confirmLoading={modifyAmountBatch.loading}
    >
        <Form
            form={form}
            labelCol={{ span: 4 }}
            className='ad_form_style'
            colon={false}
            labelAlign="left"
            initialValues={{}}
        >
            <Form.Item label={<strong>出价</strong>} name='bidAmount' rules={[{ required: true, message: '请输入价格' }]}>
                <Input placeholder={`输入价格 元`} style={{ width: 300 }} />
            </Form.Item>
        </Form>
    </Modal>
}


export default React.memo(UpdateAd)