import React from 'react';
import { Modal, Form, Input, InputNumber, message } from 'antd';
import '../../../tencentAdPutIn/index.less'
import { useAjax } from '@/Hook/useAjax';
import { addUserRotatePolicyApi, modifyUserRotatePolicyApi } from '@/services/adqV3/global';

interface AddUserRotatePolicyProps {
    value?: any;
    visible?: boolean;
    onClose?: () => void;
    onChange?: () => void;
}

const AddUserRotatePolicy: React.FC<AddUserRotatePolicyProps> = ({ value, visible, onClose, onChange }) => {

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

    const addUserRotatePolicy = useAjax((params) => addUserRotatePolicyApi(params))
    const modifyUserRotatePolicy = useAjax((params) => modifyUserRotatePolicyApi(params))
    /**************************************/

    const handleOk = () => {
        form.validateFields().then(values => {

            if (value?.id) {
                modifyUserRotatePolicy.run({ ...values, id: value?.id }).then(res => {
                    if (res) {
                        message.success('修改成功')
                        onChange?.()
                    }
                })
            } else {
                addUserRotatePolicy.run(values).then((res) => {
                    if (res) {
                        message.success('新增成功')
                        onChange?.()
                    }
                })
            }
        })
    }

    return <Modal
        title={<strong>{(value && Object.keys(value).length > 0) ? '修改' : '新增'}客服号轮换策略</strong>}
        open={visible}
        onOk={handleOk}
        onCancel={onClose}
        className='modalResetCss'
        confirmLoading={addUserRotatePolicy.loading}
        width={600}
    >
        <Form
            form={form}
            name='basicUserRotatePolicy'
            autoComplete="off"
            colon={false}
            layout='vertical'
            initialValues={value}
        >
            <Form.Item label={<strong>策略名称</strong>} name="policyName" rules={[{ required: true, message: '请输入策略名称!' }]}>
                <Input placeholder='请输入策略名称' />
            </Form.Item>
            <Form.Item
                label={<strong>{`加粉成本的计算周期（/分钟，必须 >= 20，且必须是 10 的整数倍数）`}</strong>}
                name="addCostCalculationCycle"
                rules={[{
                    pattern: /^(|[1-9]\d{2,}|[2-9]0)$/, // 空值或≥20且为10的倍数
                    message: '必须≥20且为10的整数倍',
                }]}
            >
                <InputNumber style={{ width: '100%' }} placeholder='请输入加粉成本的计算周期' />
            </Form.Item>
            <Form.Item
                label={<strong>{`加粉成本异常值 (单位：/分)`}</strong>}
                name="addCostException"
            >
                <InputNumber style={{ width: '100%' }} placeholder='请输入加粉成本异常值' />
            </Form.Item>
            <Form.Item
                label={<strong>单号单日最小加粉数量，默认20，加粉数少于该值永远不触发风控</strong>}
                name="minAddFansCount"
            >
                <InputNumber style={{ width: '100%' }} placeholder='请输入单号单日最小加粉数量' />
            </Form.Item>
            <Form.Item
                label={<strong>单号单日最大加粉数量</strong>}
                name="maxAddFansCount"
            >
                <InputNumber style={{ width: '100%' }} placeholder='请输入单号单日最大加粉数量' />
            </Form.Item>
            <Form.Item
                label={<strong>组内客服号在线数量</strong>}
                name="onlineCount"
            >
                <InputNumber style={{ width: '100%' }} placeholder='请输入组内客服号在线数量' />
            </Form.Item>
            <Form.Item
                label={<strong>{`客服组内滚动客服号的周期（/分钟，必须 >= 10）`}</strong>}
                name="rollingCustomerTime"
                rules={[{
                    type: 'number',
                    min: 10,
                    message: '输入值必须≥10'
                }]}
            >
                <InputNumber style={{ width: '100%' }} placeholder='请输入加粉成本的计算周期' />
            </Form.Item>
        </Form>
    </Modal>
};

export default React.memo(AddUserRotatePolicy);