/**
 * 线形图组件
 */
import React, {Component} from "react";
import ReactEcharts from 'echarts-for-react';
import styles from "./index.css";
import chartConfig from '../config';
let mapTime = '',map = {};
export default class line extends Component {
    constructor(props) {
        super(props);
        /**饼图传入data 数据配置  legendData tool 
        * data包含{
        *   chartData,//图表数据
        *   legendData,//图例数据 - 等于chartData
        *   optionConfig,//用户自定义配置
        *   seriesConfig,//每一项的配置必须是数组 对应每项数据
        * }
        * legendData 存在覆盖 legendData
        */
        this.state = {
            tool: props.tool == 'false'
                ? false
                : true,
            option: chartConfig.getOptionLine({
                chartData: (props.data || {}).chartData || [],
                seriesConfig: (props.data || {}).seriesConfig || [],
                optionConfig:(props.data || {}).optionConfig || {}
            }),
            //图例数据
            legendData: props.legendData || []
        };
        this.event = this.event.bind(this);
    }
    componentWillReceiveProps(props) {
        //取得图表标准配置
        const chartData = (props.data || {}).chartData || [],
        seriesConfig = (props.data || {}).seriesConfig || [],
        optionConfig = (props.data || {}).optionConfig || {};
        //配置图例
        let legendData = props.legendData == false?[]:(props.legendData || (()=>{
            let arr = [];
            chartData.map(x=>{
                x.map(x=>{
                    arr.push(x);
                });
            });
            return arr;
        })());
        const option = chartConfig.getOptionLine({
            chartData,
            seriesConfig,
            optionConfig
        });
        this.setState({
            option,
            legendData
        });
    }
    event(p){
        if(!map.id){
            // map=p;
            // clearInterval(mapTime);
            // let index = 1;
            // mapTime = setInterval(()=> {
            //     map.dispatchAction({
            //         type: 'showTip',
            //         seriesIndex: 0,
            //         dataIndex: index
            //     });
            //     if (index >= this.state.option.series[0].data.length-1) {
            //         index = 0;
            //     }
            //     index++;
            // }, 1000);
        }
    }
    render() {
        const {option, tool,legendData} = this.state;
        return (
            <div className={styles.box}>
                {tool
                    ? <ul className={styles.lineCharLegend}>
                            <li>年</li>
                            <li>月</li>
                            <li>日</li>
                        </ul>
                    : ""}
                <div className={styles.lineChart}>
                    <ReactEcharts
                        option={option}
                        onEvents={{
                            rendered:(e,p)=>{
                                this.event(p);
                            }
                        }}
                        style={{
                        height: '100%',
                        width: "100%",
                        overflow: "hidden"
                    }}></ReactEcharts>
                </div>
                {legendData.length
                    ? <ul
                            className={styles.chartLegend}
                            style={{
                            margin: 0,
                            marginBottom: "15px",
                            justifyContent: "center"
                        }}>
                            {legendData.map((x, i) => {
                                return (
                                    <li key={i}>
                                        <span
                                            style={{
                                            backgroundColor: x.color
                                        }}></span>
                                        {x.name}
                                    </li>
                                )
                            })}
                        </ul>
                    : ""}
            </div>
        );
    }
}