import { ActionType, PageContainer, ProTable } from "@ant-design/pro-components"
import { columns } from "./tableConfig"
import { useAjax } from "@/Hook/useAjax"
import { useModel } from "@umijs/max"
import PageExtend from "./extend"
import { useEffect, useRef } from "react"
import { listOfPage } from "@/services/miniApp/extend"
type Props = {
    isModal?: boolean
    value?: any
    onChange?: (v: any) => void
    onClose?: (v: any) => void
}
const Page: React.FC<Props> = (props) => {
    let { isModal, value } = props
    let { initialState } = useModel("@@initialState")
    const actionRef = useRef<ActionType>();
    let getList = useAjax((params) => listOfPage(params), { type: 'table' })
    let form = useRef<any>()
    // 当作为组件使用时首次打开存在链接名称以链接名称搜索
    useEffect(() => {
        if (value?.linkName && !value?.bookName) {
            form?.current?.setFieldValue("linkName", value?.linkName)
            form?.current?.submit()
        }
    }, [])
    return <PageContainer title={false}
        header={isModal ? { breadcrumb: {} } : {}}
    >
        <ProTable<any, any>
            scroll={{ x: true }}
            actionRef={actionRef}
            toolBarRender={() => {
                return !isModal ? [
                    <PageExtend reload={actionRef?.current?.reload} />,
                ] : [];
            }}
            params={{
                appId: initialState?.selectApp?.id || "",
                appType: initialState?.selectApp?.appType || "",
                linkType: 2
            }}
            headerTitle={"页面推广列表"}
            rowKey={(r) => r.linkId}
            //多选
            rowSelection={!!props?.onChange ? {
                hideSelectAll: true,
                type: 'radio',
                selectedRowKeys: [props?.value?.linkId || props?.value],
                onSelect: (record, selected) => {
                    props?.onChange?.(record)
                    // props?.onClose?.(false)
                },
            } : false}
            // 点击行
            onRow={(record) => ({
                onClick: () => {
                    props?.onChange?.(record)
                    props?.onClose?.(false)
                }
            })}
            //多选展示按钮
            tableAlertOptionRender={false}
            //多选展示栏
            tableAlertRender={false}
            formRef={form}
            search={{
                labelWidth: 90,
                span: 6
            }}
            request={async (params) => {
                return await getList.run(params)
            }}
            columns={columns()}
        // bordered
        />

    </PageContainer>

}
export default Page