import { useAjax } from "@/Hook/useAjax"
// import { getSubUserWithSelfListApi } from "@/services/gameData"
import { modifyRoleDataApi } from "@/services/gameData/roleOperate"
import { Col, Form, Input, Modal, Radio, Row, Space, message } from "antd"
import React, { useEffect } from "react"

interface Props {
    data: any[]
    visible?: boolean
    onClose?: () => void
    onChange?: () => void
}
/**
 * 角色操作
 * @returns 
 */
const RoleCz: React.FC<Props> = ({ data = [], visible, onClose, onChange }) => {

    /**************************/
    const [form] = Form.useForm()
    // const [userIdList, setUserIdList] = useState<any[]>([])

    // const getSubUserWithSelfList = useAjax(() => getSubUserWithSelfListApi())
    const modifyRoleData = useAjax((params) => modifyRoleDataApi(params))
    /**************************/

    useEffect(() => {
        if (data?.length === 1) {
            const { user_wechat, user_phone, is_remove_game, is_wake_up ,remark, add_corp_user_id, is_add_corp_wechat, is_change_game_type} = data[0]
            form.setFieldsValue({
                userWechat: user_wechat,
                userPhone: user_phone,
                isRemoveGame: is_remove_game?.toString() || '0',
                isWakeUp: is_wake_up?.toString() || '0',
                remark,
                add_corp_user_id,
                isAddCorpWechat: is_add_corp_wechat?.toString() || '0',
                isChangeGameType: is_change_game_type?.toString() || '0'
            })
        }
    }, [data])

    /** 投手列表 */
    // useEffect(() => {
    //     getSubUserWithSelfList.run().then(res => {
    //         setUserIdList(res ? Object.keys(res)?.map(key => ({ userId: key, nickname: res[key] })) : [])
    //     })
    // }, [])

    const handleOk = async () => {
        let validate = await form.validateFields()
        let params: any = { ...validate }
        let roleInfoList = data.map(item => {
            return {
                gameId: item.role_reg_game_id,
                roleId: item.role_id,
                serverId: item.server_id,
                userId: item.association_user_id,
            }
        })
        params.roleInfoList = roleInfoList
        console.log('validate--->', params)
        modifyRoleData.run(params).then(res => {
            if (res) {
                message.success('成功')
                onChange?.()
            }
        })
    }

    return <Modal
        title={<Space>
            <strong>角色操作</strong>
            <span style={{ color: 'red' }}>操作有延时，请勿重复提交!!!</span>
        </Space>}
        visible={visible}
        onCancel={onClose}
        onOk={handleOk}
        width={900}
        confirmLoading={modifyRoleData.loading}
    >
        <Form
            name="basicExportRoleCz"
            form={form}
            layout="vertical"
            autoComplete="off"
            initialValues={{ isAddCorpWechat: '0', isChangeGameType: '0', isRemoveGame: '0', isWakeUp: '0' }}
        >
            <Row gutter={[20, 0]}>
                <Col span={12}>
                    <Form.Item label="客户微信" name="userWechat">
                        <Input placeholder="请输入客户微信" />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="运营企微号" name="addCorpUserId">
                        <Input placeholder="请输入客户企微号" />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="客户手机" name="userPhone">
                        <Input placeholder="请输入客户手机" />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    {/* <Form.Item label="投手" name='putUserId'>
                        <Select
                            showSearch
                            allowClear
                            placeholder={'请选择投手'}
                            filterOption={(input, option) =>
                                (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {userIdList.map((item: any) => <Select.Option value={item.userId} key={item.userId}>{item.nickname}</Select.Option>)}
                        </Select>
                    </Form.Item> */}
                </Col>
                <Col span={12}>
                    <Form.Item name='isAddCorpWechat' label="是否添加企微">
                        <Radio.Group>
                            <Radio value={'1'}>已添加企微</Radio>
                            <Radio value={'0'}>未添加企微</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item name='isChangeGameType' label="是否转端">
                        <Radio.Group>
                            <Radio value={'1'}>已转端</Radio>
                            <Radio value={'0'}>未转端</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item name='isRemoveGame' label="是否退游">
                        <Radio.Group>
                            <Radio value={'1'}>已退游</Radio>
                            <Radio value={'0'}>未退游</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item name='isWakeUp' label="是否唤醒">
                        <Radio.Group>
                            <Radio value={'1'}>已唤醒</Radio>
                            <Radio value={'0'}>未唤醒</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Col>
                <Col span={24}>
                    <Form.Item label="备注" name="remark">
                        <Input.TextArea placeholder="请输入备注" />
                    </Form.Item>
                </Col>
            </Row>
        </Form>
    </Modal>
}

export default React.memo(RoleCz)