import { ActionType, FormInstance, ProTable } from "@ant-design/pro-components";
import { Button } from "antd";
import { useRef, useState } from "react";
import { connect } from "umi";
import { handleGetMenuList } from "./service";

const menuIndex: React.FC<{ currentUser: any }> = (props) => {
    const { currentUser } = props

    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    // 打开新增的悬浮框
    const [openAddModal, setOpenAddModal] = useState<boolean>(false)
    // 显示新增和编辑的悬浮框


    // 表格组件
    const columns: any = [
        {
            title: "菜单名称",
            dataIndex: "menuName",
            width: 300,
            hideInSearch: true,
        },
        {
            title: "菜单图标",
            dataIndex: "menuIcon",
            width: 120,
            hideInSearch: true,
        },
        {
            title: "菜单索引",
            dataIndex: "id",
            width: 180,
            hideInSearch: true,
        },
        {
            title: '状态',
            dataIndex: 'hidden',
            hideInSearch: true,
            width: 180,
        },
        {
            title: '说明',
            dataIndex: 'desc',
            width: 200,
            hideInSearch: true
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            hideInDescriptions: true,
            width: 260,
            render: (_, record) => { }
        }
    ]
    // 表格子集的columns
    const childrenColumns: any = [
        {
            title: "模块名称",
            dataIndex: "menuName",
            width: 300,
            hideInSearch: true,
        },
        {
            title: "模块地址",
            dataIndex: "",
            width: 120,
            hideInSearch: true,
        },
        {
            title: "模块索引",
            dataIndex: "id",
            width: 180,
            hideInSearch: true,
        },
        {
            title: '状态',
            dataIndex: 'hidden',
            hideInSearch: true,
            width: 180,
        },
        {
            title: '说明',
            dataIndex: 'desc',
            width: 200,
            hideInSearch: true
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            hideInDescriptions: true,
            width: 260,
            render: (_, record) => { }
        }
    ]

    return (
        <div>
            <ProTable
                actionRef={actionRef}
                formRef={formRef}
                columns={columns}
                bordered
                expandable={{
                    expandRowByClick: true
                }}
                rowKey={(record) => {
                    return `${record?.id}`
                }}
                scroll={{ x: "100%", y: 'calc(100vh - 400px)' }}
                headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>菜单管理</span>}
                request={async (params) => {
                    const req: any = {

                    }
                    const data = await handleGetMenuList()
                    console.log('data', data);
                    if (data && data.length > 0) {
                        return { data, success: true }
                    }
                    return { data: [], success: true }
                }}
                toolbar={{
                    actions: [
                        <Button type="primary" onClick={(e) => {
                            setOpenAddModal(true)
                        }}>
                            新增分类
                        </Button>
                    ]
                }}
            />
        </div>
    )
}

export default connect(({ user }: ConnectState) => ({
    currentUser: user.data
}))(menuIndex);