import './proj-config-list-mod.css';
import {
    Alert,
     InputNumber,
    message,
    Table, TableProps,
} from "antd";
import {  useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import {get, put} from "../../../util/AjaxUtils.ts";

interface DataType {
    projModId: string;
    projId: string;
    projMenuId: string;
    menuTitle: string;
    menuIcon: string;
    menuUrl: string;
    orderNo: string;
}

export default function ProjConfigMenuList(props:any) {
    // const nav = useNavigate();
    const pathParams = useParams();
    const [projId] = useState(pathParams.projId ? pathParams.projId : props.projId)

    const [messageApi, contextHolder] = message.useMessage();
    const [dataArray, setDataArray] = useState<DataType[]>();

    const height = window.innerHeight - 210;

    const renderData = () => {
        get<DataType[]>({
            messageApi,
            url: '/api/proj-menu/list',
            config: {
                params: {
                    projId:projId
                }
            },
            onSuccess({data}) {
                setDataArray([...data]);
            }
        })
    }

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '菜单标题',
            dataIndex: 'menuTitle',
            align: 'center',
            width: 250
        },
        {
            title: '菜单连接',
            dataIndex: 'menuUrl',
            align: 'center',
        },
        {
            title: '顺序',
            dataIndex: 'orderNo',
            align: 'center',
            width: 120,
            render: (text, record) => {
                return <InputNumber defaultValue={text} onChange={(value) => {
                    put({
                        messageApi,
                        url: `/api/proj-menu/update-order-no/${record.projMenuId}`,
                        body: {
                            orderNo: value
                        },
                        onSuccess() {
                            messageApi.success('修改成功');
                            setTimeout(() => {
                                renderData();
                            }, 500)
                        }
                    })
                }}/>
            }
        },
    ];

    useEffect(() => {
        renderData();
    }, [])

    return (
        <div style={{}}>
            {contextHolder}
            {/* <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>},
                    {title: <Link to={'/proj-create'}>创建项目</Link>},
                    {title: <a onClick={() => {nav(-1)}}>编辑项目</a>},
                    {title: '系统菜单顺序'},
                ]}
            /> */}
            <div className="mod-list-container" style={{height: `${height}px`}}>
                <Alert message="此数据在添加模块候自动生成，编辑顺序列可修改" type="info"/>
                <div className="mod-list" style={{marginTop: '15px'}}>
                    <Table columns={columns} dataSource={dataArray} pagination={{pageSize: 20}}
                           scroll={{y: height - 160}} size="middle" bordered key="dataTable" rowKey="projModId"/>
                </div>
            </div>
        </div>
    )

}