import React from 'react';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import chartConfig from '../bdCharts/config';
import styles from './Text.css';

import  qnJson from '../../assets/json/龙里县.json';
import EditTpl from "../edit/index";

echarts.registerMap('qn', qnJson);
class Warning extends React.Component {
    state = {
        config:{
            data:{
                title: "灾害预警",
                introduce: '',
                list: [{}],
                des:''
            }
        },
        option:{},//百度图表配置
    }
    componentWillReceiveProps(props) {
        const {data,data:{data:{list = [{value:[],signaltype:''}]}}} = props;
        //组装百度图表
        this.setState({config:data,option:chartConfig.getEarlyWarningMap(list)});
    }
    render() {
        const {config,config:{data:{title,des}},option} = this.state;
        return (
            <div className={`box tag ${styles.angleBox} ${styles.space}`} style={this.props.style}>
                 <EditTpl
                    data={config}
                    mName={"Warning"}
                    upData={config => this.setState({ config })}
                ></EditTpl>
                <div className={`tag-top`}></div>
                <div className={`tag-bottom`}></div>
                <div className={styles.warningText}>
                    <h2 
                        key={Math.random()}
                        className={'min-module-title'}
                        style={{
                        position:'relative',
                        zIndex:10
                    }}>{title}</h2>
                    <ReactEcharts
                        option={option}
                        onEvents={{
                            rendered:(e,p)=>{
                                
                            }
                        }}
                        style={{
                        position: 'absolute',
                        top: 0,
                        left:0,
                        bottom:0,
                        right:0,
                        height:"262px",
                        zIndex:0
                    }}></ReactEcharts>
                </div>
                <div className={styles.warningTextDes}>
                    <span>{des}</span>
                </div>
            </div>
        )
    }
}

export {Warning}