import { useAjax } from "@/Hook/useAjax"
import { GetPackLinkCodeListProps, getPackLinkLqLogListApi } from "@/services/gameData/roleOperate"
import { Button, Col, DatePicker, Form, Modal, Row, Space } from "antd"
import React, { useEffect, useState } from "react"
import style from '../../components/TableData/index.less'
import moment from "moment"
import Tables from "@/components/Tables"
import columnsPosLqLog from "./tableConfigLqLog"

interface Props {
    data: any
    visible?: boolean
    onClose?: () => void
}

/**
 * 链接访问记录
 * @param param0 
 * @returns 
 */
const LinkLqLog: React.FC<Props> = ({ data, visible, onClose }) => {

    /******************************/
    const [form] = Form.useForm()

    const [queryFrom, setQueryForm] = useState<GetPackLinkCodeListProps>({ pageNum: 1, pageSize: 20, linkId: data.id })
    const getPackLinkLqLogList = useAjax((params) => getPackLinkLqLogListApi(params))
    /******************************/

    const onFinish = (data: any) => {
        let oldQueryFrom = JSON.parse(JSON.stringify(queryFrom))
        let params = { ...oldQueryFrom, ...data, pageNum: 1 }
        if (params?.createTime?.length > 1) {
            params.createBeginTime = moment(params.createTime[0]).format('YYYY-MM-DD')
            params.createEndTime = moment(params.createTime[1]).format('YYYY-MM-DD')
        } else {
            delete params?.createBeginTime
            delete params?.createEndTime
        }
        setQueryForm(params)
    }

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


    return <Modal
        title={<strong>{data?.gameName}({data?.codeTypeName}) 链接领取记录</strong>}
        visible={visible}
        onCancel={onClose}
        footer={null}
        width={1000}
    >
        <Space style={{ width: '100%' }} direction="vertical" size={10}>
            <Form layout="inline" className='queryForm' name="basicGameServer" form={form} onFinish={onFinish}>
                <Row gutter={[0, 6]}>
                    <Col><Form.Item name='createTime'>
                        <DatePicker.RangePicker style={{ width: 250 }} placeholder={['创建时间开始', '创建时间结束']} />
                    </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={columnsPosLqLog()}
                    dataSource={getPackLinkLqLogList?.data?.records}
                    scroll={{ x: 800, 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={getPackLinkLqLogList?.data?.total}
                    loading={getPackLinkLqLogList?.loading}
                    defaultPageSize={20}
                />
            </div>
        </Space>
    </Modal>
}


export default React.memo(LinkLqLog)