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

class Merchants extends React.Component{
    state = {
        config:{
            data: {
                title:"",
                list: []
            }
        }
    }
    componentWillReceiveProps(props) {
        const {data} = props;
        this.setState({config:data});
    }
    /**
     * 判断无数据项隐藏
     */
    hide = obj =>{
        return {
            opacity:(!obj.name && !obj.value)?0:1
        }
    }
    render() {
        const {config,config:{data = {}}} = this.state;
        return(
            <div style={this.props.style}>
                <EditTpl data={config} upData={config => this.setState({config})}></EditTpl>
                <div className={styles.boxSpace}>
                    <Title>{data.title}</Title>
                    <div className={styles.Box2}>
                        <ul className={styles.merchantsBody}>
                            {data.list.length > 0 &&
                                data.list.map((value, index) => {
                                return (
                                    <li key={index} style={this.hide(value)}>
                                        <div className={styles.viewName}>
                                            {value.name}
                                        </div>
                                        <div className={styles.viewVal}>
                                            {value.value}
                                        </div>
                                    </li>
                                );
                            })}
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
}

export {Merchants}
export default Merchants