import { useAjax } from "@/Hook/useAjax"
import { getSysWarningRuleListApi, modifySysWarningRuleApi } from "@/services/adMonitor/earlyWarning"
import { AlertOutlined } from "@ant-design/icons"
import { Button, Form, Input, message, Modal, Select } from "antd"
import React, { useState } from "react"



interface Props {
    selectedRows?: any[],
    onChange?: () => void
}
const SetEarlyWarning: React.FC<Props> = (props) => {

    /******************************/
    const { selectedRows = [], onChange } = props
    const [visible, setVisible] = useState<boolean>(false)
    const [form] = Form.useForm();
    const getSysWarningRuleList = useAjax((params) => getSysWarningRuleListApi(params))
    const modifySysWarningRule = useAjax((params) => modifySysWarningRuleApi(params))
    /******************************/

    const openModal = () => {
        setVisible(true)
        getSysWarningRuleList.run()
        form.setFieldsValue({ adgroupId: selectedRows?.map(item => item.adgroup_id).toString() })
    }

    const handleOk = () => {
        form.validateFields().then(values => {
            let params = selectedRows?.map(item => ({ adgroupId: item.adgroup_id, accountId: item.account_id, campaignId: item.campaign_id }))
            console.log('values--->', params);
            modifySysWarningRule.run({ addAds: params, ruleId: values.ruleId }).then(res => {
                message.success('设置成功')
                onChange?.()
                setVisible(false)
            })
        })
    }

    return <>
        <Button icon={<AlertOutlined />} onClick={openModal} disabled={selectedRows.length === 0}>设置预警</Button>
        {visible && <Modal
            open={visible}
            title="预警设置"
            onOk={handleOk}
            confirmLoading={modifySysWarningRule.loading}
            onCancel={() => setVisible(false)}
        >
            <Form
                form={form}
                labelCol={{ span: 5 }}
                colon={false}
                initialValues={{

                }}
            >
                <Form.Item label="当前广告ID" name="adgroupId">
                    <Input.TextArea autoSize disabled />
                </Form.Item>
                <Form.Item name="ruleId" label={<strong>预警规则</strong>} rules={[{ required: true, message: '请选择预警规则' }]}>
                    <Select
                        showSearch
                        allowClear
                        placeholder="选择预警规则"
                        filterOption={(input, option) =>
                            ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                        }
                    >
                        {getSysWarningRuleList?.data?.filter((item: any) => !item?.defaultRule)?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.ruleName}</Select.Option>)}
                    </Select>
                </Form.Item>
            </Form>
        </Modal>}
    </>
}


export default React.memo(SetEarlyWarning)