import React from 'react';
import styles from './index.css';
import AutoList from '../autoList/index';
import EditTpl from "../edit/index";
import Title from "../Title/index.jsx";

class TitleListText extends React.Component {
    state = {
        config: {
            data: {
                title: "",
                list: []
            }
        }
    }
    componentWillReceiveProps(props) {
        const {data} = props,
        {config} = this.state;
        config != data &&  this.upData(data);
    }
    upData = data => {
        this.setState({config: data});
    }
    render() {
        const {
            config,
            config: {
                data: {
                    title = "",
                    list = [],
                    introduce = ""
                }
            }
        } = this.state;
        return (
            <div className={`${styles.Box} ${this.props.className}`} style={this.props.style}>
                <EditTpl data={config} upData={config => this.upData(config)}></EditTpl>
                {!!title && <Title>{title}</Title>}
                <AutoList
                    row={2}
                    data={list}
                    style={{margin: "10px"}}></AutoList>
                {!!introduce && <p className={styles.Introduce}>{introduce}</p>}
            </div>
        )
    }
}
export {TitleListText}
export default TitleListText;