import React, { useEffect } from 'react';
import '../../../../../tencentAdPutIn/index.less'
import { Form, message, Modal, Select } from 'antd';
import { bandTencentCorpCsgroupApi, getLocalCorpCsgroupListAllApi } from '@/services/adqV3/global';
import { useAjax } from '@/Hook/useAjax';


interface BandLocalProps {
    data: { [x: string]: any };
    accountId: number;
    visible?: boolean;
    onClose?: () => void;
    onChange?: () => void;
}


const BandLocal: React.FC<BandLocalProps> = ({ data, accountId, visible, onClose, onChange }) => {

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

    const getLocalCorpCsgroupListAll = useAjax((params) => getLocalCorpCsgroupListAllApi(params))
    const bandTencentCorpCsgroup = useAjax((params) => bandTencentCorpCsgroupApi(params))
    /*********************************/

    useEffect(() => {
        getLocalCorpCsgroupListAll.run({ accountId, type: 1 })
    }, [])

    const handleOk = () => {
        form.validateFields().then(values => {
            bandTencentCorpCsgroup.run({ ...values, groupId: data.groupId }).then((res) => {
                if (res) {
                    message.success('绑定成功')
                    onChange?.()
                }
            })
        })
    }

    return <Modal
        title={<strong>{data.groupName}与本地客服组绑定关系</strong>}
        open={visible}
        onOk={handleOk}
        onCancel={onClose}
        className='modalResetCss'
        width={550}
        confirmLoading={bandTencentCorpCsgroup.loading}
    >
        <Form
            form={form}
            name='basicbandGroup'
            autoComplete="off"
            colon={false}
            labelCol={{ span: 5 }}
            labelAlign='left'
            initialValues={data}
        >
            <Form.Item label={<strong>本地客服组</strong>} name="localCsgroupId">
                <Select
                    showSearch
                    placeholder="请选择本地客服组"
                    filterOption={(input, option) =>
                        ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                    }
                    allowClear
                    options={getLocalCorpCsgroupListAll?.data?.map((item: { csgroupName: string; id: string; }) => ({ label: item.csgroupName, value: item.id })) || []}
                />
            </Form.Item>
        </Form>
    </Modal>
};

export default BandLocal;