import React from  'react';
import styles from './index.css';
import EditTpl from "../edit/index";

class HorizontalListTitle extends React.Component{
    state = {
        config:{
            data: {
                list: []
            }
        },
        navIndex:0
    }
    componentWillReceiveProps(props) {
        const {data} = props;
        data && this.setState({config:data});
    }
    clickActive = (item,i)=>{
        this.setState({navIndex:i});
        const {click} = this.props;
        typeof click === "function" && click(item);
    }
    render() {
        const {config,config:{data = {}},navIndex = 0} = this.state,
        {list = []} = data;
        return(
            <div style={this.props.style}>
                <EditTpl style={{top:'-40px',bottom:"auto"}} data={config} upData={config => this.setState({config})}></EditTpl>
                <div className={styles.priceTitleBox}>
                    {!!list.length && list.map((x,i)=>{
                        return (
                            <div key={i} className={`${styles.priceTitle} ${navIndex == i?styles.active:''}`} onClick={()=>this.clickActive(x,i)}>
                                {x.name}
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }
}

export {HorizontalListTitle}
export default HorizontalListTitle