import Tables from '@/components/Tables';
import { useAjax } from '@/Hook/useAjax';
import { Button, Card, Col, Form, Input, message, Row, Select, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import style from '../../components/TableData/index.less'
import { DefaultOptionType } from 'antd/lib/select';
import columnsPos from './tableConfig';
import { delPlayerWhiteApi, getPlayerWhiteListApi, GetPlayerWhiteListProps, getWhiteGameListApi } from '@/services/gameData/roleOperate';
import { PlusOutlined } from '@ant-design/icons';
import AddWhite from './addWhite';

const PlayrWhiteList: React.FC = () => {

    /*********************************/
    const [form] = Form.useForm()
    const [queryFrom, setQueryFrom] = React.useState<GetPlayerWhiteListProps>({ gameId: 0, pageNum: 1, pageSize: 20 })
    const [gameList, setGameList] = useState<DefaultOptionType[]>([])
    const [addVisible, setAddVisible] = useState<boolean>(false)

    const getWhiteGameList = useAjax(() => getWhiteGameListApi())
    const getPlayerWhiteList = useAjax((params) => getPlayerWhiteListApi(params))
    const delPlayerWhite = useAjax((params) => delPlayerWhiteApi(params))
    /*********************************/

    useEffect(() => {
        getWhiteGameList.run().then(res => {
            if (res) {
                const arrayGame = Object.keys(res)
                setGameList(arrayGame.map(key => ({ label: res[key], value: key })))
                form.setFieldsValue({ gameId: arrayGame[0] })
                setQueryFrom({ ...queryFrom, gameId: arrayGame[0] as any })
            }
        })
    }, [])


    useEffect(() => {
        if (queryFrom.gameId) {
            getPlayerWhiteList.run(queryFrom)
        }
    }, [queryFrom])

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

    // 删除
    const delHandle = (id: number) => {
        const hide = message.loading('正在删除...', 0)
        delPlayerWhite.run({ id }).then(res => {
            hide()
            if (res) {
                message.success('删除成功')
                getPlayerWhiteList.refresh()
            }
        }).catch(() => hide())
    }

    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'
                name="basicGameChat"
                form={form}
                onFinish={onFinish}
                initialValues={{
                    gameId: gameList[0]?.value
                }}
            >
                <Row gutter={[0, 6]}>
                    <Col><Form.Item name='gameId'>
                        <Select
                            showSearch
                            style={{ minWidth: 140 }}
                            placeholder={'请选择游戏'}
                            filterOption={(input, option) =>
                                (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                            options={gameList}
                        />
                    </Form.Item></Col>
                    <Col><Form.Item name='account'>
                        <Input placeholder="玩家账号/手机号/ID" allowClear style={{ width: 180 }} />
                    </Form.Item></Col>
                    <Col><Form.Item name='roleName'>
                        <Input placeholder="角色名称" allowClear style={{ width: 140 }} />
                    </Form.Item></Col>
                    <Col><Form.Item name='roleId'>
                        <Input placeholder="角色ID" allowClear style={{ width: 140 }} />
                    </Form.Item></Col>
                    <Col>
                        <Space>
                            <Button type="primary" htmlType="submit">搜索</Button>
                            <Button onClick={() => form.resetFields()}>重置</Button>
                            <Button type="primary" icon={<PlusOutlined />} onClick={() => { setAddVisible(true) }}>新增白名单</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(delHandle)}
                    dataSource={getPlayerWhiteList?.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
                        setQueryFrom({ ...newQueryForm })
                    }}
                    size="small"
                    total={getPlayerWhiteList?.data?.total}
                    loading={getPlayerWhiteList?.loading}
                    defaultPageSize={20}
                />
            </div>
        </Space>

        {/* 新增白名单 */}
        {addVisible && <AddWhite
            gameList={gameList}
            visible={addVisible}
            onChange={() => {
                getPlayerWhiteList.refresh()
                setAddVisible(false)
            }}
            onClose={() => { setAddVisible(false) }}
        />}
    </Card>
};

export default PlayrWhiteList;