import React, {Component} from "react";
import styles from "./index.css";
import EditTpl from "../edit/index";

class LeftMenu extends Component {
    state = {
        config:{
            data:{
                list:[]
            }
        },
        active:0//当前选择项
    }
    componentWillReceiveProps(props){
        const {data:config,data:{data:{list = []}},activeIndex = 0} = props;
        this.state.config.data.list.length-list.length && list.length && this.itemClick(list[activeIndex],activeIndex);
        this.setState({config});
    }
    el = null
    scorll = z =>{
        if(!this.el)return;
        const s = this.el.offsetHeight;
        let h = !z?-s:s;
        this.el.scrollBy({
            left:0,
            top:h
        });
    }
    itemClick = (x,active) =>{
        const {click} = this.props;
        typeof click === "function" && click(x,active);
        this.setState({active});
    }
    render() {
        const {activeIndex = "",mName = "LeftMenu"} = this.props;
        const {config,config:{data:{list = []}},active} = this.state;
        return (
            <div className={"tag " + styles.leftMenu} style={this.props.style}>
                <EditTpl style={{left:"50%",right:"-50%"}} data={config} mName={mName} upData={config=>this.setState({config})}></EditTpl>
                <div className={`${styles.direction} ${styles.top}`} onClick={e=>this.scorll(0,e)}></div>
                    <div className={styles.menuList} ref={el=>this.el = el}>
                        {!!list.length && list.map((x, i) => {
                            return (
                                <div
                                    key={i}
                                    className={`${styles.liLink} ${((activeIndex+'') || active) == i ? styles.activeLink : ''}`}
                                    onClick={e=>this.itemClick(x,i,e)}
                                >
                                    <i className={`iconfont ${x.icon}`}></i>
                                    <span style={{fontSize:'18px'}}>{x.name}</span>
                                </div>
                            )
                        })}
                    </div>
                <div className={`${styles.direction} ${styles.bottom}`} onClick={e=>this.scorll(1,e)}></div>
            </div>
        );
    }
}

export default LeftMenu;