import { AjaxPromise, useAjax } from '@/Hook/useAjax';
import { App, Form, Modal, Select } from 'antd';
import React, { useEffect } from 'react';
import { configCorpUserWxApi, getAllWxListApi } from '../../API/corpUserAssign';
import { getBookPlatInfoAllApi } from '../../API/global';


interface Props {
    corpId: string,
    editSelectedRow: any[],
    visible?: any,
    onClose?: () => void,
    onChange?: () => void
}

const AssignAccount: React.FC<Props> = ({ corpId, editSelectedRow, visible, onClose, onChange }) => {

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

    const configCorpUsers = useAjax((params) => configCorpUserWxApi(params))
    const getAccountList = useAjax(() => getAllWxListApi())
    const getBookAll = useAjax(() => getBookPlatInfoAllApi())
    /*******************************************/


    useEffect(() => {
        getAccountList.run()
        getBookAll.run()
    }, [])
    const handleOk = async () => {
        const values = await form.validateFields()

        const params = {
            corpId,
            corpUserIds: visible?.corpUserId ? [visible?.corpUserId] : editSelectedRow?.map(item => item.corpUserId),
            appName: getAccountList?.data?.data?.find(item => item.appId === values.appId)?.name,
            ...values
        }
        console.log(params)
        configCorpUsers.run(params).then(res => {
            if (res?.data) {
                message.success('指派成功')
                onChange?.()
                onClose?.()
            }
        })
    }
    useEffect(() => {
        if (visible.mpAccountInfo) {
            form.setFieldsValue({ appId: visible.mpAccountInfo?.appId, platform: visible.mpAccountInfo?.platform })
        }
    }, [visible])
    return <Modal
        title='批量指派公众号'
        open={!!visible}
        onCancel={onClose}
        onOk={handleOk}
        confirmLoading={configCorpUsers.loading}
    >
        <Form
            name="basic_oper_zs"
            form={form}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            autoComplete="off"
            labelAlign="left"
            colon={false}
        >
            <Form.Item label="公众号" name="appId" rules={[{ required: true, message: '请选择公众号!' }]}>
                <Select
                    showSearch
                    style={{ minWidth: 180 }}
                    allowClear
                    placeholder="选择公众号"
                    filterOption={(input, option) =>
                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {getAccountList?.data?.data?.map((item: any) => <Select.Option value={item.appId} key={item.appId}>{item.name}</Select.Option>)}
                </Select>
            </Form.Item>
            <Form.Item label="书城" name="platform" rules={[{ required: true, message: '请选择书城!' }]}>
                <Select
                    showSearch
                    style={{ minWidth: 180 }}
                    allowClear
                    placeholder="选择书城"
                    filterOption={(input, option) =>
                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {getBookAll?.data?.data?.map((item: any) => <Select.Option value={item.platformKey} key={item.platformKey}>{item.platformName}</Select.Option>)}
                </Select>
            </Form.Item>
        </Form>
    </Modal>
};

export default AssignAccount;