import React from 'react';
import styles from './index.css';
import EditTpl from "../edit/index";
import { Scroll } from "../../components/Animation/index";
class LevelList1 extends React.Component {
    state = {
        activeItem: 0,
        config: {
            data: {
                list: []
            }
        }
    }
    componentWillReceiveProps(props) {
        const { config: _data } = this.state, { data } = props;
        _data != data && this.setState({ config: data });
    }
    itemClick = (e, index) => {
        const {
            active = () => console.log("未绑定itemClick")
        } = this.props;
        this.setState({ activeItem: index });
        active(e, index);
    }
    render() {
        const {
            config,
            config: {
                data: {
                    list = [],
                    scrollTime = 5000
                }
            },
            // activeItem = 0
        } = this.state;
        const {activeItem = 0} = this.props;
        return (
            <div className={styles.Box} style={this.props.style}>
                <EditTpl
                    style={{
                        top: "50%"
                    }}
                    data={config}
                    upData={config => this.setState({ config })}></EditTpl>
                <Scroll time={scrollTime - 0} className={styles.List} index={activeItem} active={e => this.itemClick(list[e], e)}>
                    {!!list.length && list.map((x, i) => {
                        return (
                            <li
                                key={i}
                                className={`${styles.qiebian} ${activeItem == i
                                    ? styles.active
                                    : ''}`}
                                onClick={e => this.itemClick(x, i)}>
                                <p>{x.name}</p>
                            </li>
                        )
                    })}
                </Scroll>
            </div>
        )
    }
}
export { LevelList1 }
export default LevelList1;