Highways4Good/web/client/src/sections/quanju/containers/footer/operation/left.js

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Input, Tree } from 'antd'
import Module from '../../public/module'
import { getBusTierList } from '../../../actions/example'
import './style.less'

const Left = (props) => {
    const [treeData, setTreeData] = useState([])
    const [treeDataList, setTreeDataList] = useState([])
    const [expandedKeys, setExpandedKeys] = useState([]);
    const [searchValue, setSearchValue] = useState('');
    const [autoExpandParent, setAutoExpandParent] = useState(true);

    const onExpand = (newExpandedKeys) => {
        setExpandedKeys(newExpandedKeys);
        setAutoExpandParent(false);
    };

    useEffect(() => {
        const { dispatch } = props
        dispatch(getBusTierList())

    }, [])
    const { busTier } = props
    const style = { height: "97%", marginTop: "3%" }

    const onChange = (e) => {
        const { value } = e.target;
        let titles = []
        const newExpandedKeys = treeDataList.filter(e => e.title != null && e.title.match(value))
        newExpandedKeys.forEach(e => {
            titles.push(e.title)
        })
        setExpandedKeys(titles);
        setSearchValue(value);
        setAutoExpandParent(true);
    };
    const loop = (treeData) =>
        treeData.map((item) => {
            // console.log(item,'===> item -----');
            const index = item.title != null && item.title.indexOf(searchValue);
            const beforeStr = item.title != null && item.title.substr(0, index);
            const afterStr = item.title != null && item.title.substr(index + searchValue.length);
            const title =
                index > -1 ? (
                    <span>
                        {beforeStr}
                        <span className="site-tree-search-value">{searchValue}</span>
                        {afterStr}
                    </span>
                ) : (
                    <span>{item.title}</span>
                );
            if (item.children && item.children.length > 0) {
                const children = loop(item.children);
                return {
                    ...item,
                    title: index > -1 || children.length ? title : null,
                    children: children.length ? children : undefined
                };
            }
            return index > -1
                ? {
                    ...item,
                    title
                }
                : {
                    ...item,
                    title: null
                };
        })
            .filter((item) => !!item.title);
    useEffect(() => {
        let busTierList = []
        let busTierOpen = []
        let dataList = []
        let busTierNewList = []
        // Math.ceil(Math.random() * 100);
        // if (busTier && busTier.data && busTier.data.length > 0) {
        //     busTierNewList.push(busTier && busTier.data && busTier.data[0])
        // }
        // if (busTierNewList.length > 0) {
        // }
        busTier && busTier.data && busTier.data.forEach((e, index) => {
            if (index == 0) {
                busTierOpen.push(e.name)
            }
            busTierList.push({
                key: e.name,
                title: e.name,
                children: e.child.map(s => {
                    return {
                        key: s.name == '--' ||  s.name == null ? Math.ceil(Math.random() * 100) : s.name,
                        title: s.name,
                        children: s.child.map(i => {
                            return {
                                key: i.name == '--' || i.name == null ? Math.ceil(Math.random() * 100) : i.name,
                                title: i.name,
                                children: i.child.map(x => {
                                    return {
                                        key: x.name == '--' || x.name == null ? Math.ceil(Math.random() * 100) : x.name,
                                        title: x.name == null ? '--' : x.name,
                                    }
                                })

                            }
                        })
                    }

                })
            })
        })
        busTier && busTier.data && busTier.data.forEach(e => {
            e.child.forEach(i => {
                i.child.forEach(s => {
                    s.child.forEach(x => {
                        dataList.push({
                            key: x.name,
                            title: x.name
                        })
                    })
                })
            })
        })
        setTreeData(busTierList)
        setExpandedKeys(busTierOpen)
        setTreeDataList(dataList)
    }, [busTier])
    return (
        <div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginLeft: "1%" }}>
            <Module style={style} customize={true} title={"公交车辆信息"}>
                <div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden' }}>
                    <div style={{ border: '1px solid rgba(10, 114, 255, 1)', backgroundColor: 'rgba(10, 114, 255, 0.1)' }}>
                        <img src='/assets/images/quanju/search.png' style={{ width: '5%', margin: '0 1.5% 1% 3.5%' }} />
                        <Input
                            style={{
                                width: '90%',
                                background: 'none',
                                backgroundColor: 'none',
                                color: 'rgba(216, 240, 255, 0.8)',
                                border: 'none',
                                boxShadow: 'none',
                            }}
                            placeholder="请输入车牌号"
                            onChange={onChange}
                        />
                    </div>
                    <div className='busList'>
                        {
                            treeData.length > 0 ?
                                <Tree
                                    rootStyle={{
                                        marginTop: '1%',
                                        background: 'none',
                                        borderColor: 'none',
                                        color: 'rgba(255, 255, 255, 1)'
                                    }}
                                    onExpand={onExpand}
                                    expandedKeys={expandedKeys}
                                    autoExpandParent={autoExpandParent}
                                    treeData={loop(treeData)}
                                /> : <div style={{ width: '100%', color: '#fff', textAlign: 'center', marginTop: '90%' }}>暂无数据</div>
                        }

                    </div>
                </div>
            </Module>
        </div>
    );
};
function mapStateToProps(state) {
    const { busTier } = state
    return {
        busTier: busTier
    }
}

export default connect(mapStateToProps)(Left);