import React, { Component } from "react";
import style from "../index.less";
import { Radio} from '@commonComp';
import echarts from 'echarts';
/**
 * 来源于后台数据
 * 图表类型
 *
 *
 * **/
class ChartItem extends Component {
  constructor(props) {
    super(props);
    this.state={
      weekArr:[],
      oneMonthArr:[],
      threeMonthArr:[],
      yearMonthArr:[]
    };
    this.getContainers = this.getContainers.bind(this);
  }
  getXAxisArr(){
    let now = new Date().getTime();
    let arr = [],temp=0;
    for(let i=0;i<7;i++){
      temp=i*1000*60*60*24;
      arr.unshift(...this.getDayHours(now-temp));
    }console.log(arr)
    return arr;
  }
  getDayHours(time){
    const year = new Date(time).getFullYear();
    const month = new Date(time).getMonth()+1;
    const date = new Date(time).getDate();
    const hour = new Date(time).getHours();
    let arr=[],temp='';
    for(let i=0;i<24;i++){
      temp = hour-i>-1?hour-i:hour-i+24;
      arr.unshift(year+'-'+(month<10?'0'+month:month)+'-'+(date<10?'0'+date:date)+" "+(temp<10?'0'+temp:temp));
    }
    return arr;
  }
  getContainers(){
    const {nameObj,obj} = this.props.data;
    const {weekArr} = this.state;
    let arr = [];
    for(let i in obj){
      arr.push(<Chart data={obj[i]} index={i} xAxis = {weekArr}/>)
    }
    return arr;
  }
  componentDidMount(){
    const {initFn} = this.props;
    initFn&&initFn();
    this.setState({
      weekArr:this.getXAxisArr(),
      oneMonthArr:[],
      threeMonthArr:[],
      yearMonthArr:[]
    });
  }
  render() {
    const {title,data } = this.props;
    return <div className={style['assess-item']}>
      <h2>{title}</h2>
      <div className={style['item-content']}>
        {this.getContainers()}
      </div>
    </div>;
  }
}

class Chart extends Component{
  constructor(props) {
    super(props);
    this.drawChart = this.drawChart.bind(this);
  }
  drawChart(){
    const {index,xAxis,data} = this.props;
    const id = 'chart'+index;
    let series = [],names=[],inx=-1;
    var myChart = echarts.init(document.getElementById(id));

    data.map((it)=>{
      let values=new Array(168);
      //values[24]=10;
      it.creatTime.map((x,i)=>{
        inx=xAxis.findIndex((a)=>{return a==x.substr(0,13)});     //日期对应横坐标的位置
        if(inx!=-1){
          values[inx] = it.indexValue[i];       //值对应横坐标的位置
        }
      });
      names.push(it.itemName);
      series.push({
        name: it.itemName,
        type: 'line',
        data: values,
        showAllSymbol:true
      });
    });
    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data:names
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxis,
        splitLine:{
          show:false
        },
        axisPointer:{
          //show:false
        },
        axisTick:{
          show:false,
          interval:24
        },
        axisLabel:{
          show:true,
          showMaxLabel:true,
          interval:24,
          rotate:45,
          fontSize:10
        }
      },
      yAxis: {
        type: 'value',
        axisTick:{
          show:false
        },
        axisLabel:{
          show:true,
          showMaxLabel:true
        }
      },
      series: series
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
  componentDidMount(){
    this.drawChart();
  }
  render(){
    return <div className={style["chart-box"]} id={'chart'+this.props.index}></div>
  }
}

export default ChartItem;