import React from 'react';
import styles from './index.css';
import EditTpl from "../edit/index";
import {Scroll} from "../../components/Animation/index";
class VerticalList 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 {
            itemClick = () => console.log("未绑定itemClick")
        } = this.props;
        this.setState({activeItem: index});
        itemClick(e, index);
    }
    render() {
        const {
            config,
            config: {
                data: {
                    list = []
                }
            },
            activeItem = 0
        } = this.state;
        return (
            <div className={styles.Box} style={this.props.style}>
                <EditTpl
                    style={{
                    right: '50%'
                }}
                    data={config}
                    upData={config => this.setState({config})}></EditTpl>
                <Scroll time={500000} 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>
                                <i></i>
                                <p>
                                    <span>{x.value}</span>
                                    {x.unit}
                                </p>
                            </li>
                        )
                    })}
                </Scroll>
            </div>
        )
    }
}
export {VerticalList}
export default VerticalList;