import { Form, Input, InputNumber, message, Modal, Radio } 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 updateType = Form.useWatch('updateType', form)

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

    const handleOk = () => {
        form.validateFields().then(values => {
            let accountAdgroupMaps = [...new Set(selectedRows?.map(item => item.accountId + ',' + item.adgroupId))]
            let paramsCj: any = {}
            if (values?.updateType === 'percent') {
                paramsCj.bidAmountPercent = values?.bidAmountPercent / 100
            } else {
                paramsCj.bidAmount = values?.bidAmount
            }
            modifyAmountBatch.run({ accountAdgroupMaps, ...paramsCj }).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: 6 }}
            className='ad_form_style'
            colon={false}
            labelAlign="left"
            initialValues={{ updateType: 'fixed' }}
        >
            <Form.Item
                label={<strong>出价修改方式</strong>}
                name='updateType'
                rules={[
                    { required: true, message: '请选择出价修改方式' }
                ]}
            >
                <Radio.Group buttonStyle="solid">
                    <Radio.Button value="fixed">固定值</Radio.Button>
                    <Radio.Button value="percent">百分比上下浮动修改</Radio.Button>
                </Radio.Group>
            </Form.Item>

            {updateType === 'fixed' ? <Form.Item label={<strong>出价</strong>} name='bidAmount' rules={[{ required: true, message: '请输入价格' }]}>
                <Input placeholder={`输入价格 元`} style={{ width: 300 }} />
            </Form.Item> : <Form.Item
                label={<strong>浮动比</strong>}
                name='bidAmountPercent'
                rules={[
                    { required: true, message: '请输入' }
                ]}
            >
                <InputNumber placeholder="出价，原有基础上下调百分比" style={{ width: '100%' }} addonAfter="%" />
            </Form.Item>}
        </Form>
    </Modal>
}


export default React.memo(UpdateAd)