import { useAjax } from "@/Hook/useAjax"
import Tables from "@/components/Tables"
import { getGameChoiceListApi, getGameListNewApi } from "@/services/gameData"
import { CreateRoleConfigProps, delGameUserConfigApi, getCreateRoleConfigListApi } from "@/services/gameData/roleOperate"
import { PlusOutlined } from "@ant-design/icons"
import { Button, Card, Col, Form, Row, Select, Space, message } from "antd"
import React, { useEffect, useState } from "react"
import style from '../../components/TableData/index.less'
import columnsPos from "./tableConfig"
import EditModal from "./editModal"

/**
 * 有效创角配置
 * @returns 
 */
const CreateRoleConfig: React.FC = () => {

    /**************************/
    const [form] = Form.useForm()
    const [initialValues, setInitialValues] = useState<any>({})
    const [queryFrom, setQueryForm] = useState<CreateRoleConfigProps>({ pageNum: 1, pageSize: 20 })
    const [visible, setVisible] = useState<boolean>(false)
    const [gameList, setGameList] = useState<any[]>([])

    const getGameChoiceList = useAjax((params) => getGameListNewApi(params))
    const getCreateRoleConfigList = useAjax((params) => getCreateRoleConfigListApi(params))
    const delGameUserConfig = useAjax((params) => delGameUserConfigApi(params))
    /**************************/
    useEffect(() => {
        getCreateRoleConfigList.run(queryFrom)
    }, [queryFrom])

    useEffect(() => {
        getGameChoiceList.run({ sourceSystem: 'ZX_ONE' }).then((res: { gameList: any; parentGameList: any; superGameList: any }) => {
            const { gameList } = res
            setGameList(gameList?.map((item: { id: any; game_name: any }) => ({ id: item.id, name: item.game_name })) || [])
        })
    }, [])

    const onFinish = (data: any) => {
        let oldQueryFrom = JSON.parse(JSON.stringify(queryFrom))
        setQueryForm({ ...oldQueryFrom, ...data, pageNum: 1 })
    }

    const editGameServer = (data: any) => {
        setVisible(true)
        const { id, gameId, roleLevel } = data
        setInitialValues({ id, gameId, roleLevel })
    }

    const del = (id: number) => {
        delGameUserConfig.run({ id }).then((res: any) => {
            if (res) {
                message.success('删除成功')
                getCreateRoleConfigList.refresh()
            }
        })
    }

    return <Card
        style={{ borderRadius: 8 }}
        headStyle={{ textAlign: 'left' }}
        bodyStyle={{ padding: '5px 10px' }}
    >
        <div style={{ textAlign: 'center', fontWeight: 'bold', padding: '4px 6px 6px', fontSize: 16, marginBottom: 4, position: 'relative' }}>
            有效创角配置
        </div>

        <Space style={{ width: '100%' }} direction="vertical" size={10}>
            <Form layout="inline" className='queryForm' initialValues={initialValues} name="basicGameServer" form={form} onFinish={onFinish}>
                <Row gutter={[0, 6]}>
                    <Col><Form.Item name='gameId'>
                        <Select
                            maxTagCount={1}
                            showSearch
                            style={{ minWidth: 140 }}
                            allowClear
                            placeholder={'请选择游戏'}
                            filterOption={(input, option) =>
                                (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                            loading={getGameChoiceList.loading}
                        >
                            {gameList?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>)}
                        </Select>
                    </Form.Item></Col>

                    <Col>
                        <Space>
                            <Button type="primary" htmlType="submit">搜索</Button>
                            <Button onClick={() => form.resetFields()}>重置</Button>
                            <Button icon={<PlusOutlined />} type="primary" onClick={() => { setVisible(true); setInitialValues({}) }}>新增有效创角配置</Button>
                        </Space>
                    </Col>
                </Row>
            </Form>

            <div className={`${style['small']}`}>
                <Tables
                    className={`all_table content_table_body`}
                    bordered
                    sortDirections={['ascend', 'descend', null]}
                    current={queryFrom.pageNum}
                    pageSize={queryFrom.pageSize}
                    columns={columnsPos(editGameServer, del)}
                    dataSource={getCreateRoleConfigList?.data?.records}
                    scroll={{ x: 1000, y: 600 }}
                    onChange={(pagination: any, filters: any, sortData: any) => {
                        let { current, pageSize } = pagination
                        let newQueryForm = JSON.parse(JSON.stringify(queryFrom))
                        if (sortData && sortData?.order) {
                            newQueryForm['sortType'] = sortData?.order === 'ascend' ? 'asc' : 'desc'
                            newQueryForm['sortFiled'] = sortData?.field
                        } else {
                            delete newQueryForm['sortType']
                            delete newQueryForm['sortFiled']
                        }
                        newQueryForm.pageNum = current
                        newQueryForm.pageSize = pageSize
                        setQueryForm({ ...newQueryForm })
                    }}
                    size="small"
                    total={getCreateRoleConfigList?.data?.total}
                    loading={getCreateRoleConfigList?.loading}
                    defaultPageSize={20}
                />
            </div>
        </Space>

        {visible && <EditModal
            visible={visible}
            initialValues={initialValues}
            gameList={gameList}
            onClose={() => { setVisible(false); }}
            onChange={() => {
                getCreateRoleConfigList.refresh()
                setVisible(false);
            }}
        />}
    </Card>
}

export default CreateRoleConfig