import React from 'react';
import {Link} from "react-router-dom";
import EditTpl from "../edit/index";
import styles from "./index.css";
import {Scroll} from "../Animation/index";
export class DistributedList extends React.Component {
    state = {
        activeIndex:0,
        config: {
            data: {
                title: "",
                list: []
            }
        }
    }
    componentWillReceiveProps(props) {
        const {data} = props;
        this.setState({config: data});
    }
    //搜索功能
    searTime = null;
    searchValue = e => {
        const searchValue = this.props.searchValue;
        if(typeof searchValue === "function"){
            searchValue(e.target.value);
        }
        return;
        e.persist();
        clearTimeout(this.searTime);
        this.searTime = setTimeout(() => {
            const value = e.target.value, {
                    config,
                    config: {
                        data: {
                            list = []
                        }
                    }
                } = this.state;
            config.data.list = list.map(x => {
                x.show = !x.name.includes(value);
                return x;
            })
            this.setState({config});
        }, 800);
    }
    //查看
    onOpen = (value,e,i) =>{
        this.setState({activeIndex:i});
        e.nativeEvent.stopImmediatePropagation();
        e.stopPropagation();
        const {activePoint = ()=>{}} = this.props;
        typeof activePoint == "function" && activePoint(value,true,i);
    }
    onItem = (e,i) =>{
        const {activePoint = ()=>{}} = this.props;
        typeof activePoint == "function" && activePoint(e,false,i);
    }
    //进入内页
    goLink = (e,i)=>{
        //处理path  替换 页面 与 pId
        let {match:{
            path,
            url
        }} = this.props;
        url = url.split("/");
        path = path.split("/").map((x,i)=>{
            const iu = url[i];
            if(i == 1){
                return "detail";
            }
            const k = x.indexOf(":"),
                    j = x.indexOf("?");
                if (k != -1) {
                    x = x.substring(k + 1, j);
                }
                if (x == 'pId') {
                   return iu+"-"+e.id;
                }
                return iu;
        }).join("/");
        return <Link className={styles.right} to={path}>进入</Link>  
    }
    render() {
        const {
            config,
            config: {
                data = {}
            }
        } = this.state,
        {list = []} = data,
        {activeIndex = 0} = this.props;
        return (
            <div style={this.props.style} className={styles.box}>
                <EditTpl
                    style={{
                    right: "30%"
                }}
                    pId={this.props.pId}
                    data={config}
                    mName={"DistributedList"}
                    upData={config => this.setState({config})}></EditTpl>

                <div className={styles.searchBox}>
                    <i className={`iconfont icon-sousuo ${styles.iconSearch}`}></i>
                    <input placeholder="输入名称" className={styles.searchText} onChange={e => this.searchValue(e)}/>
                </div>
                {/* <Scroll {...this.props} className={styles.List} style={{height: "90%",overflow: "hidden"}} index={activeIndex} active={i=>this.onItem(list[i],i)}> */}
                <ul className={styles.List} style={{height: "90%",overflow: "auto"}}>
                    {!!list.length && list.map((x,i)=>{
                        x.$index = i;
                        if(!x.show){
                            return (
                                <li key={i} onClick={e=>this.onItem(x,i)} className={i == activeIndex?styles.active:''}>
                                    <div className={styles.left}>
                                        <h2>{x.name}</h2>
                                        <i className={styles.Line}></i>
                                        <ol>
                                            {!!x.info.length && x.info.map((x,i)=>{
                                                return <li key={i}>{x.value}</li>
                                            })}
                                        </ol>
                                    </div>
                                    {this.goLink(x,i)}
                                    {/* <div className={styles.right} onClick={e=>this.onOpen(x,e,i)}>查看</div>                      */}
                                </li>
                            )
                        }else{
                            return "";
                        }
                    })}
                </ul>
                {/* </Scroll> */}
            </div>
        )
    }
}

export default DistributedList