import React from 'react';
import styles from './index.css';
import EditTpl from "../edit/index";
import Title from "../Title/index.jsx";
import {Scroll} from "../Animation/index";
class TitlePieList 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}
                    mName={"RingText"}
                    upData={config => this.setState({config})}></EditTpl>
                <Title>{data.title}</Title>
                <div className={styles.topWarp}>
                    <div
                        className={`${styles.circle} ${data.list.length > 6
                        ? styles.scroll
                        : ''}`}></div>
                    <div className={styles.inCircle}></div>
                    <div className={styles.inCircleMin}>
                        <div className={styles.circleText}>
                            <h4>{data.totalName}</h4>
                            <div className={styles.radialLine}></div>
                            {data.total}
                        </div>
                    </div>
                    <Scroll {...this.props} className={styles.topWarpList}>
                        {data.list.length > 0 && data
                            .list
                            .map((value, index) => {
                                return (
                                    <div
                                        key={index}
                                        className={styles.li}
                                        style={this.hide(value)}>
                                        <h4>
                                            {value.name}</h4>
                                        <div className={styles.radialLine}></div>
                                        {value.value}
                                    </div>
                                );
                            })}
                    </Scroll>
                </div>
            </div>
        );
    }
}
export {TitlePieList}
export default TitlePieList