import { useAjax } from "@/Hook/useAjax"
import { getBindMpListApi } from "@/pages/weComTask/API/corpUserAssign"
import { setQLMpApi } from "@/pages/weComTask/API/global"
import { App, Form, Modal, Select } from "antd"
import React, { useEffect } from "react"

interface Props {
    editSelectedRow: any[],
    corpId: string,
    visible?: boolean
    onClose?: () => void
    onChange?: () => void
}
/**
 * 指派公众号
 * @returns 
 */
const ZpMp: React.FC<Props> = ({ visible, onClose, onChange, editSelectedRow, corpId }) => {

    /*******************************/
    const [form] = Form.useForm()
    const { message } = App.useApp()

    const setQLMp = useAjax((params) => setQLMpApi(params))
    const getBindMpList = useAjax(() => getBindMpListApi())
    /*******************************/

    useEffect(() => {
        getBindMpList.run()
    }, [])

    const handleOk = async () => {
        const values = await form.validateFields()
        setQLMp.run({ chatIds: editSelectedRow.map(item => item.chatId), corpId, ...values }).then(res => {
            if (res?.data) {
                message.success('指派成功')
                onChange?.()
            }
        })
    }

    return <Modal
        title="指派公众号"
        open={visible}
        onCancel={onClose}
        onOk={handleOk}
        maskClosable={false}
        confirmLoading={setQLMp.loading}
    >
        <Form
            name="basic_oper_zp_mp"
            form={form}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            autoComplete="off"
            labelAlign="left"
            colon={false}
        >
            <Form.Item label="公众号" name="mpAccountId" rules={[{ required: true, message: '请选择公众号!' }]}>
                <Select
                    showSearch
                    allowClear
                    placeholder="选择公众号"
                    filterOption={(input, option) =>
                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {getBindMpList?.data?.data?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>)}
                </Select>
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(ZpMp)