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 validateRollingTime = (value: number) => {
    if (value === 0) return true;
    return value >= 10 || '必须≥10或等于0';
};

const validateRollingTime1 = (value: number) => {
    return value >= 10 ? value % 5 === 0 || '必须是5的倍数' : '必须≥10';
};
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>{`有消耗无加粉异常 (单位：/分)`}</strong>}
                name="noFansCostValue"
            >
                <InputNumber style={{ width: '100%' }} placeholder='请输入有消耗无加粉异常' />
            </Form.Item> */}
            <Form.Item
                label={<strong>{`距今添加时间告警时长  (单位：/分，必须 >= 10，且是5的倍数)`}</strong>}
                name="lastAddWarnTime"
                rules={[
                    {
                        validator: (_, value) =>
                            validateRollingTime1(value) === true
                                ? Promise.resolve()
                                : Promise.reject(validateRollingTime1(value))
                    }
                ]}
            >
                <InputNumber style={{ width: '100%' }} placeholder='请输入距今添加时间告警时长' />
            </Form.Item>
            <Form.Item
                label={<strong>{`距今添加时间下线时长  (单位：/分, 必须 >= 10，且是5的倍数)`}</strong>}
                name="lastAddOfflineTime"
                rules={[
                    {
                        validator: (_, value) =>
                            validateRollingTime1(value) === true
                                ? Promise.resolve()
                                : Promise.reject(validateRollingTime1(value))
                    }
                ]}
            >
                <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，0表示不执行）`}</strong>}
                name="rollingCustomerTime"
                rules={[
                    {
                        validator: (_, value) =>
                            validateRollingTime(value) === true
                                ? Promise.resolve()
                                : Promise.reject(validateRollingTime(value))
                    }
                ]}
            >
                <InputNumber style={{ width: '100%' }} placeholder='请输入加粉成本的计算周期' />
            </Form.Item>
        </Form>
    </Modal>
};

export default React.memo(AddUserRotatePolicy);