import { useAjax } from "@/Hook/useAjax"
import { getRoleUserListApi } from "@/services/gameData"
// import { getSubUserWithSelfListApi } from "@/services/gameData"
import { modifyRoleDataApi } from "@/services/gameData/roleOperate"
import { Col, Form, Input, Modal, Radio, Row, Select, Space, message } from "antd"
import React, { useEffect, useState } 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 [gsList, setGsList] = useState<any[]>([])
    // const getSubUserWithSelfList = useAjax(() => getSubUserWithSelfListApi())
    const modifyRoleData = useAjax((params) => modifyRoleDataApi(params))
    const getRoleUserList = useAjax((params) => getRoleUserListApi(params))
    /**************************/
    useEffect(() => {
        getRoleUserList.run({ authType: 'GS' }).then((res:any) => {
            if (res) {
                let arr = Object.keys(res).map(key => ({ value: Number(key), label: res[key] }))
                setGsList(arr)
            }
        })
    }, [])
    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, gsAccount, corpId, external_user_id } = data[0]
            form.setFieldsValue({
                userWechat: user_wechat,
                userPhone: user_phone,
                isRemoveGame: is_remove_game === 2 ? undefined : is_remove_game,
                isWakeUp: is_wake_up === 2 ? undefined : is_wake_up,
                remark,
                addCorpUserId: add_corp_user_id,
                gsAccount,
                corpId,
                externalUserId: external_user_id,
                isAddCorpWechat: is_add_corp_wechat === 2 ? undefined : is_add_corp_wechat,
                isChangeGameType: is_change_game_type === 2 ? undefined : is_change_game_type,
            })
        }
    }, [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?.()
            }
        })
    }
    const filterOption = (input: string, option?: { label: string; value: string }) =>
    (option?.label ?? '').toLowerCase().includes(input.toLowerCase());
    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="GS账号" name="gsAccount">
                        <Select
                            maxTagCount={1}
                            showSearch
                            style={{ width: '100%' }}
                            allowClear
                            placeholder={'请选择游戏GS'}
                            filterOption={filterOption}
                            options={gsList}
                        />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="企业ID" name="corpId">
                        <Input placeholder="请输入企业id" />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="企微客户ID" name="externalUserId">
                        <Input placeholder="请输入企微客户id" />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item name='isAddCorpWechat' label="是否添加企微">
                        <Select
                            showSearch
                            allowClear
                            placeholder={'是否添加企微'}
                            filterOption={(input, option) =>
                                (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            <Select.Option value={1}>已添加企微</Select.Option>
                            <Select.Option value={0}>未添加企微</Select.Option>
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item name='isChangeGameType' label="是否转端">
                        <Select
                            showSearch
                            allowClear
                            placeholder={'是否转端'}
                            filterOption={(input, option) =>
                                (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            <Select.Option value={1}>已转端</Select.Option>
                            <Select.Option value={0}>未转端</Select.Option>
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item name='isRemoveGame' label="是否退游">
                        <Select
                            showSearch
                            allowClear
                            placeholder={'是否退游'}
                            filterOption={(input, option) =>
                                (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            <Select.Option value={1}>已退游</Select.Option>
                            <Select.Option value={0}>未退游</Select.Option>
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item name='isWakeUp' label="是否唤醒">
                        <Select
                            showSearch
                            allowClear
                            placeholder={'是否唤醒'}
                            filterOption={(input, option) =>
                                (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            <Select.Option value={1}>已唤醒</Select.Option>
                            <Select.Option value={0}>未唤醒</Select.Option>
                        </Select>
                    </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)