import './proj-config-list-mod.css';
import {
    Alert,
    Button,
    message,
    Table, TableProps, Modal
} from "antd";
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { SearchOutlined } from "@ant-design/icons";
import { get } from "../../../util/AjaxUtils.ts";
import ConfigModShow from '../../proj/edit/ProjConfigModShow.tsx'
interface DataType {
    projModId: string;
    projId: string;
    modContext: string;
    modName: string;
    modUrl: string;
    modDesc: string;
    modIcon: string;
}

export default function ProjConfigModListShow(props:any) {
    const [projModId, setprojModId] = useState('')
    const [configModShow, setConfigModShow] = useState(false)
    // 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-mod/list',
            config: {
                params: {
                    projId: projId
                }
            },
            onSuccess({ data }) {
                setDataArray([...data]);
            }
        })
    }

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '菜单标题',
            dataIndex: 'modName',
            align: 'center',
            width: 180
        },
        {
            title: '菜单说明',
            dataIndex: 'modDesc',
            align: 'center',
        },
        {
            title: '图标',
            dataIndex: 'modIcon',
            align: 'center',
            width: 80,
            render: (_text) => {
                return <i className={_text}> </i>
            }
        },
        {
            title: '菜单地址',
            dataIndex: 'menuUrl',
            align: 'center',
        },
        {
            title: '创建时间',
            dataIndex: 'gmtCreate',
            align: 'center',
            width: 180
        },
        {
            title: '操作',
            dataIndex: 'option',
            align: 'center',
            width: 100,
            render: (_text, record) => {
                return (
                    <>
                        <Button type="default" size="small"
                            style={{ marginRight: '5px' }}
                            onClick={() => {
                                setprojModId(record.projModId)
                                // lyp
                                // nav(`/proj-edit/config-mod-show/${pathParams.projId}/${record.projModId}`)
                                setConfigModShow(true);
                            }}>
                            <SearchOutlined />
                        </Button>
                    </>
                )
            }
        },
    ];

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

    return (
        <>
            {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`, marginTop: '17px', overflow: 'auto' }}>
                <Alert message="菜单指的是系统的功能，最少10个菜单，最多15个菜单" type="info" />
                <div className="mod-list" style={{ marginTop: '15px' }}>
                    <Table columns={columns} dataSource={dataArray} pagination={{ pageSize: 20 }}
                        scroll={{ y: height - 210 }} size="middle" bordered key="dataTable" rowKey="projModId" />
                </div>
            </div>
            <Modal open={configModShow}
                title="查看"
                width={1500}

                onCancel={() => {
                    // setprojModId('')
                    // console.log(projModId);
                    setConfigModShow(false);


                }}
                footer={null}
            >
                <ConfigModShow
                    key={projModId}
                    // closeModal={() => { setConfigModShow(false) 
                    //     renderData()
                    //  }} 
                    projModId={projModId} ></ConfigModShow>
            </Modal>

        </>
    )

}