system-copyright-react/src/route/index/Index.tsx

import './index.css';
// import { MouseEvent, Reducer, useEffect, useReducer, useState, useContext } from "react";
import { MouseEvent, Reducer, useEffect, useReducer, useState } from "react";
import { useNavigate, useSearchParams, Outlet } from "react-router-dom";
import { IMenuListItem, IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx";
// import MenuWithBottomButtom from '../../components/menu/MenuWithBottomButton.tsx'
import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx";
// import ListProj from "../../components/list/ListProj.tsx";
// import ListProjAgent from "../../components/list/ListProjAgent.tsx";
import { MenuProps } from 'antd';
import {
    IndexListContext,
    IndexListDataType,
    IndexListDispatchContext,
    ListAction,
    ListData,
} from "../../context/IndexListContext.ts";


import { useLocation } from 'react-router-dom';

import gpsImg from '../../static/right/gps.png'
import backImg from '../../static/right/back.png'
import { Link } from "react-router-dom";
import { Input, Breadcrumb } from 'antd';
const { Search } = Input;



export default function Index() {

    // const [keywords, setKeywords] = useState('');
    // const indexListContext = useContext(IndexListContext);



    const nav = useNavigate();
    const [searchParams] = useSearchParams();

    const listReducer = (state: ListData, action: ListAction) => {
        if (action.type == IndexListDataType.PROJ) {
            state.type = IndexListDataType.PROJ;
            state.status = action.value as string;
        } else if (action.type == IndexListDataType.AGENT) {
            state.type = IndexListDataType.AGENT;
            state.status = action.value as string;
        } else if (action.type == IndexListDataType.CATEGORY) {
            state.categorys = action.value as MenuProps['items'];
            state.categoryChangeCount++;
        } else if (action.type == IndexListDataType.CATEGORY_CHANGE) {
            state.category = action.value as string;
            state.categoryChangeCount++;
        } else if (action.type == IndexListDataType.CATEGORY_DELETE) {
            state.categorys = action.value as MenuProps['items'];
            state.category = '';
            state.categoryChangeCount++;
        }
        return {
            ...state
        };
    }

    const [listData, dispatch] = useReducer<Reducer<ListData, ListAction>>(listReducer, {
        type: IndexListDataType.PROJ,
        categoryChangeCount: 0
    });

    const [projMenu, setProjMenu] = useState<IMenuWithTopButton>({
        button: {
            name: '项目',
            handle() {
                nav('/proj-create')
            }
        },
        list: [
            { id: 'ALL', name: '全部项目', active: true },
            { id: 'PROCESSING', name: '进行中的' },
            { id: 'COMPLETE', name: '已完成的' }
        ],
        handleListItem(_e, _index, item: IMenuListItem) {
            projMenu.list.forEach(item => item.active = false);
            sellMenu.list.forEach(item => item.active = false);
            buyMenu.list.forEach(item => item.active = false);

            item.active = true;
            setProjMenu({
                ...projMenu
            })
            dispatch({
                type: IndexListDataType.PROJ,
                value: item.id,
                // keywords: ''

            })
        },

    });
    // const [agentMenu, setAgentMenu] = useState<IMenuWithTopButton>({
    //     button: {
    //         name: '代理服务',
    //         handle() {
    //             dispatch({
    //                 type: IndexListDataType.PROJ,
    //                 value: 'COMPLETE',
    //             })
    //         }
    //     },
    //     list: [
    //         { id: 'ALL', name: '全部项目' },
    //         { id: 'PROCESSING', name: '进行中的' },
    //         { id: 'COMPLETE', name: '已完成的' },
    //     ],
    //     handleListItem(_e: MouseEvent<HTMLLIElement>, _index: number, item: IMenuListItem) {
    //         projMenu.list.forEach(item => item.active = false);
    //         agentMenu.list.forEach(item => item.active = false);
    //         item.active = true;
    //         setAgentMenu({
    //             ...agentMenu
    //         })
    //         dispatch({
    //             type: IndexListDataType.AGENT,
    //             value: item.id,

    //         })
    //     }
    // })
    const [sellMenu, setSellMenu] = useState<IMenuWithTopButton>({
        button: {
            name: '我要卖',
            handle() {
                // dispatch({
                //     type: IndexListDataType.PROJ,
                //     value: 'COMPLETE',
                // })
            }
        },
        list: [
            { id: '1', name: '商品发布', path: '/product-release' },
            { id: '2', name: '交易订单', path: '/transaction-order' },
            // { id: 'COMPLETE', name: '已完成的' },
        ],
        handleListItem(_e: MouseEvent<HTMLLIElement>, _index: number, item: IMenuListItem) {
            projMenu.list.forEach(item => item.active = false);
            sellMenu.list.forEach(item => item.active = false);
            buyMenu.list.forEach(item => item.active = false);

            item.active = true;
            setSellMenu({
                ...sellMenu
            })
            // dispatch({
            //     type: IndexListDataType.AGENT,
            //     value: item.id,

            // })
        }
    })
    const [buyMenu, setBuyMenu] = useState<IMenuWithTopButton>({
        button: {
            name: '我要买',
            handle() {
                // dispatch({
                //     type: IndexListDataType.PROJ,
                //     value: 'COMPLETE',
                // })
            }
        },
        list: [
            { id: '1', name: '著作权商品', path: '/copyright-goods' },
            { id: '2', name: '交易商品', path: '/trading-goods' },
            // { id: 'COMPLETE', name: '已完成的' },
        ],
        handleListItem(_e: MouseEvent<HTMLLIElement>, _index: number, item: IMenuListItem) {
            projMenu.list.forEach(item => item.active = false);
            sellMenu.list.forEach(item => item.active = false);
            buyMenu.list.forEach(item => item.active = false);
            item.active = true;
            setBuyMenu({
                ...buyMenu
            })
            // dispatch({
            //     type: IndexListDataType.AGENT,
            //     value: item.id,

            // })
        }
    })

    const location = useLocation()
    const [now, setNow] = useState<string>('首页')
    // 编辑项目路由名
    // const [editname,setEditname] = useState('')
    // 新建项目路由名字
    // const [newname,setNewname] = useState('')

    const [pathArray, setPathArray] = useState<any>([])
    useEffect(() => {
        // const nowname = sessionStorage.getItem('now')
        console.log('路由名字', location.pathname);
        if (location.pathname.includes('/home')) {
            setNow('首页')
            setPathArray([{ title: '首页' }])
        } else if (location.pathname.includes('/proj-create')) {
            setNow('创建项目')
            setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: '创建项目' }])
            // /config-mod-list    /config-menu-list
        } else if (location.pathname.includes('/proj-edit')&& !location.pathname.includes('/config-mod-edit') && !location.pathname.includes('/step') && !location.pathname.includes('/config-loginpage')&& !location.pathname.includes('/config-mod-save')&& !location.pathname.includes('/config-mod-list')&& !location.pathname.includes('/config-menu-list')) {
            setNow('编辑项目')
            // setEditname(location.pathname)
            setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: '编辑项目' }])
        } else if (location.pathname.includes('/proj-new')) {
            setNow('新建项目')
            // setNewname(location.pathname)
            setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: '新建项目' }])
        } else if (location.pathname.includes('/proj-efree')) {
            setNow('编辑项目')
            // setNewname(location.pathname)
            setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: '编辑项目' }])
        } else if (location.pathname.includes('/proj-eall')) {
            setNow('编辑项目')
            // setNewname(location.pathname)
            setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: '编辑项目' }])
        } else if (location.pathname.includes('/proj-edit/step1')) {
            setNow('标题简介')
            // setNewname(location.pathname)
            setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '标题简介' }])
        } else if (location.pathname.includes('/proj-edit/step2')) {
            setNow('标题简介')
            // setNewname(location.pathname)
            setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '基本信息' }])
        } else if (location.pathname.includes('/proj-edit/config-loginpage')) {
            setNow('登录界面设置')
            // setNewname(location.pathname)
            setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '登录界面设置' }])
        }else if (location.pathname.includes('/proj-edit/config-mod-list')) {
            setNow('系统菜单管理')
            // setNewname(location.pathname)
            setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '系统菜单管理' }])
        }else if (location.pathname.includes('/proj-edit/config-menu-list')) {
            setNow('系统菜单顺序')
            // setNewname(location.pathname)
            setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '系统菜单顺序' }])
        }else if (location.pathname.includes('/step3')) {
            setNow('软件功能特点')
            // setNewname(location.pathname)
            setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '软件功能特点' }])
        }else if (location.pathname.includes('/proj-edit/config-mod-save')) {
            setNow('添加菜单')
            setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '添加菜单' }])
        }else if (location.pathname.includes('/proj-edit/config-mod-edit')) {
            setNow('编辑菜单')
            setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-2) }}>编辑项目</a> },{ title: <a onClick={() => { nav(-1) }}>系统菜单管理</a> }, { title: '编辑菜单' }])
        //  /config-mod-edit
        }
    }, [location.pathname])
    useEffect(() => {
        // nav('/home')
        // sessionStorage.setItem('pathArray', JSON.stringify([{ title: <Link to={'/home'}>首页</Link> }]));
        // sessionStorage.setItem('now', '首页');
        if (searchParams.get('type') == 'agent') {
            dispatch({
                type: IndexListDataType.AGENT,
                value: 'ALL',

            })

        }


    }, []);

    // useEffect(() => {
    //     console.log('监听',keywords);
    // }, [keywords]);

    const handleSearch = (value: string) => {
        console.log(value);
        nav('/home', {
            state: {
                keyword: value
            }
        })
    }
    return (
        <>
            {/* <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>}
                ]}
            /> */}
            <IndexListContext.Provider value={listData} >
                <IndexListDispatchContext.Provider value={dispatch}>
                    <div className="index">
                        <div className="left">
                            <div style={{ height: '15px', width: '230px', background: 'white' }}></div>
                            <MenuWithTopButton
                                button={projMenu.button}
                                list={projMenu.list}
                                handleListItem={projMenu.handleListItem}
                            />
                            <MenuTreeWithTopButton />
                            {/* <MenuWithBottomButtom
                                button={agentMenu.button}
                                list={agentMenu.list}
                                handleListItem={agentMenu.handleListItem}
                            /> */}
                            {/* <MenuWithBottomButtom
                                button={sellMenu.button}
                                list={sellMenu.list}
                                handleListItem={sellMenu.handleListItem}
                            />
                            <MenuWithBottomButtom
                                button={buyMenu.button}
                                list={buyMenu.list}
                                handleListItem={buyMenu.handleListItem}
                            /> */}
                        </div>
                        <div className="right">
                            <div>
                                <div className="top">
                                    {/* 标签 */}
                                    {/* {renderStatus()} */}
                                    <div className='gps'>
                                        <img src={gpsImg} alt="" />
                                        <div>当前位置:{now}</div>
                                    </div>
                                    <div className='line'></div>
                                    <Search placeholder="输入项目名称" onSearch={handleSearch} style={{
                                        width: '253px',
                                        height: '31px',
                                    }} />
                                    <div className='nowPosition'>
                                        <img src={backImg} alt="" />
                                        <div>
                                            <Breadcrumb
                                                separator="|"
                                                // items={[
                                                //     { title: <Link to={'/home'}>首页</Link> },
                                                // ]}
                                                items={pathArray}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {/* {
                                listData.type === IndexListDataType.PROJ ? <ListProj/> : (
                                    listData.type == IndexListDataType.AGENT ? <ListProjAgent/> : <></>
                                )
                            } */}
                            <div>
                                <Outlet></Outlet>
                            </div>
                        </div>
                    </div>
                </IndexListDispatchContext.Provider>
            </IndexListContext.Provider>
        </>
    )
}