import React from 'react';
import '../../../../../tencentAdPutIn/index.less';
import { Form, InputNumber, message, Modal, Select } from 'antd';
import { useAjax } from '@/Hook/useAjax';
import { modifyLocalCorpCsgroupUserApi } from '@/services/adqV3/global';
import { POOLTYPE } from '../../const';

interface GroupUserEditProps {
    idList: number[];
    visible?: boolean;
    onClose?: () => void;
    onChange?: () => void;
    isUpdatePoolType?: boolean
}

const GroupUserEdit: React.FC<GroupUserEditProps> = ({ idList, visible, onClose, onChange, isUpdatePoolType = true }) => {

    /**************************************/
    const [form] = Form.useForm();
    const modifyLocalCorpCsgroupUser = useAjax((params) => modifyLocalCorpCsgroupUserApi(params))
    /**************************************/

    const handleOk = () => {
        form.validateFields().then(values => {
            modifyLocalCorpCsgroupUser.run({ ...values, idList }).then((res) => {
                if (res) {
                    message.success('修改成功');
                    onChange?.();
                }
            })
        })
    }

    return <Modal
        title={<strong>{idList?.length > 1 ? '批量' : ''}客服修改</strong>}
        open={visible}
        onCancel={onClose}
        onOk={handleOk}
        className='modalResetCss'
        confirmLoading={modifyLocalCorpCsgroupUser.loading}
    >
        <Form
            form={form}
            name='basicGroupUserEdit'
            autoComplete="off"
            colon={false}
            layout='vertical'
        >
            {isUpdatePoolType && <Form.Item label={<strong>归属客服池</strong>} name="poolType" rules={[{ required: idList?.length > 0 ? false : true, message: '请选择归属客服池!' }]}>
                <Select
                    showSearch
                    placeholder="归属客服池"
                    filterOption={(input, option) =>
                        ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                    }
                    allowClear
                    options={Object.keys(POOLTYPE).map((key) => ({ label: POOLTYPE[key as keyof typeof POOLTYPE], value: key }))}
                />
            </Form.Item>}
            <Form.Item label={<strong>客服号单日限制加粉数量</strong>} name="limitAddFansOfDay">
                <InputNumber style={{ width: '100%' }} placeholder='请输入客服号单日限制加粉数量' />
            </Form.Item>
        </Form>
    </Modal>
};

export default React.memo(GroupUserEdit);