import React ,{ useEffect } from 'react';
import * as echarts from 'echarts';
import 'echarts/lib/chart/line';
import axios from 'axios';
import { getdata } from './data1';

function ProjectScale({url}) {

  useEffect(()=>{
    if(url){
      getInit(url);
    }
  },[url])

  function getInit(url){
    axios.get(url).then(result=>{
      if(result && result.data){
        Init(result.data);
      }
    }).catch(error=>{})
  }

  // useEffect(()=>{
  //   Init();
  // },[])

  function Init(data) {
    let chartDom = document.getElementById('projectScale');
    let myChart = echarts.init(chartDom);
    let option;
    // let data = getdata();
    let last = data && data[data.length-1][0];
    let year = last.split("-")[0];
    let month = last.split("-")[1];
    let day = last.split("-")[2];
    let date = year-1+"-"+month+"-"+day;
    console.log(date);
      myChart.setOption(
        (option = {
          tooltip: {
            trigger: 'axis'
          },
          title: {
            text: '',
            left: 'center',
            y:'bottom'
          },
          color: ['orange'],
          grid: {
            left: '5%',
            right: '1%',
            bottom: '20%'
          },
          xAxis: {
            data: data.map(function (item) {
              return item[0];
            })
          },
          yAxis: {},
          dataZoom: [
            {
              startValue: date
            },
            {
              type: 'inside'
            }
          ],
          series:  [{
            type: 'line',
            name:'index_split',
            data: data.map(function (item) {
              return item[1];
            })
          },{
            type: 'line',
            name:'index_shrink',
            data: data.map(function (item) {
              return item[2];
            })
          },{
            type: 'line',
            name:'index_merge',
            data: data.map(function (item) {
              return item[3];
            })
          },{
            type: 'line',
            name:'index_expand',
            data: data.map(function (item) {
              return item[4];
            })
          }]
        })
      );
    // })
    option && myChart.setOption(option);
  }

  return(
    <div id="projectScale" style={{height:"400px"}}></div>
  )
}
export default ProjectScale;