import React from 'react';
import {Link} from "react-router-dom";
import styles from './index.css';
const SearchBox = props => {
    const {
            data = {},
            id = ''
        } = props, {
            list = []
        } = data;
    const navList = [
            "湾滩河镇",
            "醒狮镇",
            "龙山镇",
            "谷脚镇",
            "洗马镇",
            "冠山街道"
        ],
        //处理参数
        path = item => {
            const {
                match: {
                    params = {}
                }
            } = props;
            let path = [];
            for (let i in params) {
                if (i == "pId") {
                    path.push(item.id);
                } else {
                    const c = params[i];
                    if ((c + "") != "undefined" && c != "") {
                        path.push(c);
                    }
                }
            }
            return "/" + path.join("/") + "/";
        },
        isLink = value => {
            return <Link className={styles.kindBtn} to={path(value)}>进 入</Link>
        };
        const stop = e=>{
            e.nativeEvent.stopImmediatePropagation();
            e.stopPropagation();
        }
    return (
        <div className={styles.box} onClick={props.showClick}>
            <div className={styles.sbox} onClick={stop}>
                <p className={"min-module-title"}>龙里县坝区</p>
                <br/>
                <div className="cuspate-line"></div>
                <ul>
                    <li
                        className={id == ''
                        ? styles.isActive
                        : ""}
                        onClick={e => props.click()}>
                        <p>全部</p>
                    </li>
                    {!!navList.length && navList.map((x, i) => {
                        return (
                            <li
                                key={i}
                                className={id == x
                                ? styles.isActive
                                : ""}
                                onClick={e => props.click(x)}>
                                <p>{x}</p>
                            </li>
                        )
                    })
}
                </ul>
                <ol>
                    {!!list.length && list.map((x, i) => {
                        return (
                            <li key={i}>
                                <h2>
                                    {x.name}
                                    {isLink(x)}
                                </h2>
                                <p>
                                    {x.info}
                                </p>
                                <p>
                                    {x.info1}
                                </p>
                            </li>
                        )
                    })
}
                </ol>
            </div>
        </div>
    );
}
export {SearchBox}