import { ActionType } from "@ant-design/pro-components"
import { columns } from "./tableConfig"
import { useAjax } from "@/Hook/useAjax"
import {  useRef, useState } from "react"
import { Button, Modal } from "antd"
import { shelfLisOfPage } from "@/services/miniApp/miniAppUser"
import { useModel } from "@umijs/max"
import MyProTable from "@/components/MyProTable"
type Props={
    data: {
        id: number
    }
}
const Page: React.FC<Props> = (props) => {
    const {initialState} = useModel('@@initialState')
    const [open, setOpen] = useState(false)
    const actionRef = useRef<ActionType>();
    let getList = useAjax((params) => shelfLisOfPage(params), { type: 'table' })
    return <>
        <Button
            size="small"
            type="link"
            onClick={()=>{setOpen(true)}}
        >书架列表</Button>
        <Modal
            open={open}
            footer={false}
            onCancel={()=>{setOpen(false)}}
            title={"书架列表"}
            width={"50%"}
            destroyOnClose
        >
            <MyProTable<any, any>
                actionRef={actionRef}
                scroll={{ x: true ,y:'50vh'}}
                headerTitle={false}
                rowKey={(r) => r.id}
                search={false}
                params={{
                    appId:initialState?.selectApp?.id,
                    userId:props.data.id
                }}
                request={async (params) => {
                    if (params?.appId) {
                        return await getList.run(params)
                    }
                }}
                columns={columns()}
            // bordered
            />
        </Modal>
    </>

}
export default Page