import { useAjax } from "@/Hook/useAjax"
import { getGameListNewApi } from "@/services/gameData"
import { GameVipProps, delGameVipApi, getGameVipApi } from "@/services/gameData/roleOperate"
import { PlusOutlined } from "@ant-design/icons"
import { Button, Card, Col, Form, Input, Row, Select, Space, message } from "antd"
import React, { useEffect, useState } from "react"
import VipModal from "./vipModal"
import Tables from "@/components/Tables"
import style from '../../components/TableData/index.less'
import columnsPos from "./tableConfig"
import VipModalS from "./vipModalS"

/**
 * 游戏VIP档位
 * @returns 
 */
const Vip: React.FC = () => {

    /******************************/
    const [form] = Form.useForm()
    const [initialValues, setInitialValues] = useState<any>({})
    const [queryFrom, setQueryForm] = useState<GameVipProps>({ pageNum: 1, pageSize: 20 })
    const [thatStoreData, setThatStoreData] = useState<{ gameList: any[] }>({ gameList: [] })
    const [superGameList, setSuperGameList] = useState<any[]>([])
    const [visible, setVisible] = useState<boolean>(false)
    const [visibleS, setVisibleS] = useState<boolean>(false)
    const getGameVip = useAjax((params) => getGameVipApi(params))
    const delGameVip = useAjax((params) => delGameVipApi(params))
    const getGameList = useAjax((params) => getGameListNewApi(params))
    /******************************/

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

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

    useEffect(() => {
        getGameList.run({ sourceSystem: 'ZX_ONE' }).then(res => {
            if (res) {
                const { parentGameList, superGameList } = res
                setSuperGameList(superGameList)
                setThatStoreData({ gameList: parentGameList?.map((item: { parent_game_name: any; super_game_id: any, parent_game_id: any }) => ({ name: item.parent_game_name, id: item.parent_game_id, superId: item.super_game_id })) })
            }
        })
    }, [])

    const editVip = (data: any) => {
        setInitialValues(data)
        setVisible(true)
    }

    const del = (id: number) => {
        delGameVip.run(id).then(res => {
            if (res) {
                message.success('删除成功')
                getGameVip.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' }}>
            VIP档位
        </div>
        <Space style={{ width: '100%' }} direction="vertical" size={10}>
            <Form layout="inline" className='queryForm' initialValues={initialValues} name="basicGameVip" form={form} onFinish={onFinish}>
                <Row gutter={[0, 6]}>
                    <Col><Form.Item name='vipLevel'>
                        <Input placeholder="VIP档位" allowClear style={{ width: 140 }} />
                    </Form.Item></Col>
                    <Col><Form.Item name='superGameId'>
                        <Select
                            maxTagCount={1}
                            showSearch
                            style={{ minWidth: 140 }}
                            allowClear
                            placeholder={'请选择超父游戏'}
                            filterOption={(input, option) =>
                                (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {superGameList?.map((item: any) => <Select.Option value={item.super_game_id} key={item.super_game_id}>{item.super_game_name}</Select.Option>)}
                        </Select>
                    </Form.Item></Col>
                    <Col><Form.Item name='parentGameId'>
                        <Select
                            maxTagCount={1}
                            showSearch
                            style={{ minWidth: 140 }}
                            allowClear
                            placeholder={'请选择父游戏'}
                            filterOption={(input, option) =>
                                (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {thatStoreData?.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({}) }}>新增VIP档位</Button>
                            <Button icon={<PlusOutlined />} type="primary" onClick={() => { setVisibleS(true); setInitialValues({}) }}>批量新增VIP档位</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(editVip, del)}
                    dataSource={getGameVip?.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={getGameVip?.data?.total}
                    loading={getGameVip?.loading}
                    defaultPageSize={20}
                />
            </div>
        </Space>

        {visible && <VipModal
            visible={visible}
            onClose={() => { setInitialValues({}); setVisible(false) }}
            superGameList={superGameList}
            thatStoreData={thatStoreData}
            initialValues={initialValues}
            onChange={() => {
                setInitialValues({}); 
                getGameVip.refresh()
                setVisible(false)
            }}
        />}
        {visibleS && <VipModalS
            visible={visibleS}
            onClose={() => { setInitialValues({}); setVisibleS(false) }}
            superGameList={superGameList}
            thatStoreData={thatStoreData}
            initialValues={initialValues}
            onChange={() => {
                setInitialValues({}); 
                getGameVip.refresh()
                setVisibleS(false)
            }}
        />}
    </Card>
}

export default Vip