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

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

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

    const activeCode = useAjax((params) => activeCodeApi(params))
    /***********************************/

    useEffect(() => {
        form.setFieldsValue({
            activeParam: selectedRows.map(item => {
                return {
                    active_code: item.activeCode,
                    user: undefined
                }
            })
        })
    }, [selectedRows])

    const handleOk = () => {
        form.validateFields().then((values) => {
            const activeParam = values?.activeParam.map(item => {
                return {
                    active_code: item.active_code,
                    userid: item.user?.[0]?.corpUserId
                }
            })
            activeCode.run({
                corpId,
                activeParam
            }).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={activeCode.loading}
    >
        <Form
            form={form}
            name={'active-code'}
            labelAlign='left'
            labelCol={{ span: 5 }}
            colon={false}
            preserve={true}
        >
            <Form.List name="activeParam">
                {(fields) => (
                    <>
                        {fields.map(({ key, name, ...restField }, index) => {
                            const activeP = activeParam?.[index]
                            return <Card
                                key={key}
                                title={<strong>激活码：{activeP?.active_code}</strong>}
                                style={{ background: '#fff', marginBottom: 10 }}
                            >
                                <Form.Item
                                    {...restField}
                                    label={<strong>企业成员</strong>}
                                    name={[name, 'user']}
                                    rules={[
                                        { required: true, message: '请选择企业成员!' }
                                    ]}
                                >
                                    <SelectCorpUserAll type='radio' corpId={corpId} placeholder="请选择企业成员" />
                                </Form.Item>
                            </Card>
                        })}
                    </>
                )}
            </Form.List>
        </Form>
    </Modal>
}

export default React.memo(ActiveCode)