import { useAjax } from "@/Hook/useAjax"
import { gamePlayerBanListProps, getBanUserListApi, updateBanUserApi } from "@/services/gameData/player"
import { Button, Card, Col, DatePicker, Form, Input, Row, Space, message } from "antd"
import React, { useEffect, useState } from "react"
import moment from "moment"
import { getPresets } from "@/components/QueryForm/const"
import style from '../../components/TableData/index.less'
import Tables from "@/components/Tables"
import columnsPos from "./tableConfig"

/**
 * 封禁玩家管理
 * @returns 
 */
const BanGamePlayerManage: React.FC = () => {

    /*********************************/
    const [form] = Form.useForm()
    const [initialValues, _setInitialValues] = useState<any>({})
    const [queryFrom, setQueryForm] = useState<gamePlayerBanListProps>({ pageNum: 1, pageSize: 20 })
    const getBanUserList = useAjax((params: gamePlayerBanListProps) => getBanUserListApi(params))
    const updateBanUser = useAjax((params: { userId: string, status: number }) => updateBanUserApi(params))
    /*********************************/

    useEffect(() => {
        getBanUserList.run(queryFrom)
    }, [queryFrom])

    const onFinish = (data: any) => {
        const { banDate, regDate, ...value } = data
        let params = { ...queryFrom, ...value }
        if (banDate) {
            params.beginDate = moment(banDate[0]).format('YYYY-MM-DD')
            params.endDate = moment(banDate[1]).format('YYYY-MM-DD')
        } else {
            delete params?.beginDate
            delete params?.endDate
        }
        if (regDate) {
            params.regBeginTime = moment(regDate[0]).format('YYYY-MM-DD')
            params.regEndTime = moment(regDate[1]).format('YYYY-MM-DD')
        } else {
            delete params?.regBeginTime
            delete params?.regEndTime
        }
        setQueryForm({ ...params, pageNum: 1 })
    }

    // 解封 封禁
    const handle = (data: any) => {
        updateBanUser.run({ userId: data.userId, status: data.status === 0 ? 1 : 0 }).then(res => {
            if (res) {
                if (data.status === 0) {
                    message.success('封禁成功')
                } else {
                    message.success('解封成功')
                }
                getBanUserList.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='userId'>
                        <Input placeholder="玩家ID" allowClear style={{ width: 140 }} />
                    </Form.Item></Col>

                    <Col><Form.Item name='userName'>
                        <Input placeholder="玩家账号" allowClear style={{ width: 140 }} />
                    </Form.Item></Col>

                    <Col><Form.Item name='userNickName'>
                        <Input placeholder="玩家昵称" allowClear style={{ width: 140 }} />
                    </Form.Item></Col>

                    <Col><Form.Item name='regDate'>
                        <DatePicker.RangePicker placeholder={['注册开始日期', '注册结束日期']} ranges={getPresets() as any} />
                    </Form.Item></Col>

                    <Col><Form.Item name='banDate'>
                        <DatePicker.RangePicker placeholder={['封禁开始日期', '封禁结束日期']} ranges={getPresets() as any} />
                    </Form.Item></Col>

                    <Col>
                        <Space>
                            <Button type="primary" htmlType="submit">搜索</Button>
                            <Button onClick={() => form.resetFields()}>重置</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(handle)}
                    dataSource={getBanUserList?.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={getBanUserList?.data?.total}
                    loading={getBanUserList?.loading}
                    defaultPageSize={20}
                />
            </div>
        </Space>
    </Card>
}

export default BanGamePlayerManage