import { Card, Form, message, Modal } from "antd"
import React, { useEffect } from "react"
import SelectCorpUserAll from "../../corpUserManage/selectCorpUserAll"
import { useAjax } from "@/Hook/useAjax"
import { transferCodeApi } from "@/pages/weComTask/API/weChatApiLicense"

interface Props {
    selectedRows: any[]
    visible?: boolean
    onChange?: () => void
    onClose?: () => void
}
const TransferCode: React.FC<Props> = ({ visible, selectedRows, onChange, onClose }) => {

    /***********************************/
    const corpId = selectedRows[0].corpId
    const [form] = Form.useForm();
    const transferParam = Form.useWatch('transferParam', form)

    const transferCode = useAjax((params) => transferCodeApi(params))
    /***********************************/

    useEffect(() => {
        form.setFieldsValue({
            transferParam: selectedRows.map(item => {
                return {
                    handover_user_name: item.userName,
                    handover_userid: item.userId,
                    takeoverUser: undefined
                }
            })
        })
    }, [selectedRows])

    const handleOk = () => {
        form.validateFields().then((values) => {
            const transferParam = values?.transferParam.map(item => {
                return {
                    handover_userid: item.handover_userid,
                    takeover_userid: item.takeoverUser?.[0]?.corpUserId
                }
            })
            transferCode.run({
                corpId,
                transferParam
            }).then(res => {
                if (res?.data) {
                    message.success('继承成功')
                    onChange?.()
                }
            })
        }).catch(err => console.log('校验失败', err))
    }

    return <Modal
        title="激活码继承"
        open={visible}
        onCancel={onClose}
        width={650}
        onOk={handleOk}
        confirmLoading={transferCode.loading}
    >
        <Form
            form={form}
            name={'transfer-code'}
            labelAlign='left'
            labelCol={{ span: 5 }}
            colon={false}
            preserve={true}
        >
            <Form.List name="transferParam">
                {(fields) => (
                    <>
                        {fields.map(({ key, name, ...restField }, index) => {
                            const transferP = transferParam?.[index]
                            return <Card
                                key={key}
                                title={<strong>转移人员：{transferP.handover_user_name}（{transferP?.handover_userid}）</strong>}
                                style={{ background: '#fff', marginBottom: 10 }}
                            >
                                <Form.Item
                                    {...restField}
                                    label={<strong>接收人员</strong>}
                                    name={[name, 'takeoverUser']}
                                    rules={[
                                        { required: true, message: '请选择接收人员!' }
                                    ]}
                                >
                                    <SelectCorpUserAll type='radio' corpId={corpId} placeholder="请选择接收人员" />
                                </Form.Item>
                            </Card>
                        })}
                    </>
                )}
            </Form.List>
        </Form>
    </Modal>
}

export default React.memo(TransferCode)