/**
 * 饼图组件
 */
import React, {Component} from "react";
import styles from './index.css';
import {Pie} from "../../../components/Charts/Pie";
import "../../../components/Charts/Pie.css";
export default class pie extends Component {
    updata = ()=>{

    }
    render() {
        const {tableConfig:{title = []},data:{data:{list = [],subtitle = ""}}} = this.props;
        let total = 0,_list = [];
        if(!!list.length){
            list.map(value => {
                total+=(value.value-0);
            });
            _list = list.map(x=>{
                //转换百分比
                let num = (x.value/total)*100;
                return {
                    ...x,
                    value:Math.round(num)
                }
            });
        }
        let pieData = {
            data:{
                subtitle:subtitle+total,
                list:_list
            }
        }
        return (
            <div className={styles.box} style={this.props.style}>
                <div className={styles.topBox}>
                    <div className={'tag '+styles.pieChart} style={{padding:"10px"}}>
                        <Pie data={pieData}/>
                    </div>
                    <div className={styles.textList}>
                        <div className={`${styles.textListTitle} ${styles.tLItem}`}>
                            {/*表头*/}
                            {title && title.map((x, i) => {
                                return (
                                    <span key={i}>{x}</span>
                                )
                            })}
                        </div>
                        {/*表身*/}
                        <div style={{
                            maxHeight: "120px",
                            overflow: "auto"
                        }}>
                            {!!list.length && list.map((row, i) => {
                                return (
                                    <div className={styles.tLItem} key={i}>
                                        <span>{row.name}</span>
                                        <span>{row.value}</span>
                                    </div>
                                )
                            })}
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}