import React from "react";
import styles from "./index.css";
import {Scroll} from "../Animation/index";
class LevelList2 extends React.Component{
    state = {
        config:{
            data:{
                list:[]
            }
        },
        activeIndex:0
    }
    componentWillReceiveProps(props){
        const {config} = this.state,
        {data} = props;
        config != data && this.setState({config:data});
    }
    active = e=>{
        this.setState({activeIndex:e});
        typeof this.props.active == "function" && this.props.active(e);
    }
    render(){
        const {children,...ohtprops} = this.props;
        const {config:{data:{list = []}},activeIndex} = this.state;
        return (
            <Scroll reverse={false} {...ohtprops} className={`${styles.Box} ${this.props.className}`} index={activeIndex} active={e=>this.active(e)}>
                {!!list.length && list.map((x,i)=>{
                    return (
                        <li style={{width: `calc(${100/list.length}% - 16px)`}} key={i} className={activeIndex == i?styles.active:''} onClick={e=>this.active(i)}>
                            <p className={styles.minTitle}>{x.title}</p>
                            <div className={"level-line"}></div>
                            <p>{x.name}</p>
                        </li>
                    )
                })}
            </Scroll>
        )
    }
}
export {
    LevelList2
}
export default LevelList2;