<template>
  <div class="charts">
    <div :id="configId" :style="{width:'100%',height:'450px'}"></div>
  </div>
</template>

<script>
    export default {
      name: "",
      data() {
        return {
          setTimer: null
        }
      },
      props: ['config', 'configId', 'datas', 'tit', 'danwei'],
      created() {
      },
      mounted(){
        eventBus.$on('closeBox',(val)=>{
          console.log('监听成功', val)
          if(this.setTimer){
            clearInterval(this.setTimer)
          }
        })
        this.drawLine();
      },
      methods: {
        drawLine(){
          var str_spanvar =  this.configId

          var data_in = this.datas
          var oneDay = 24 * 3600 *1000;
          var fiveMinutes = 300 * 1000;
          // var timestr = '2016/2/18 00:00:00';
          var startTime = +new Date()-fiveMinutes;
          //把new Date出来的时间格式转换为data123中的日期格式
          function riqigeshi(now){
            return now.toLocaleDateString() + ' ' + now.getHours() + now.toLocaleTimeString().substr(-6,6)
          }

          //用来返回data123一样的数据格式
          function chartData(i,data,now) {
            var mydata = data[i]
            /*if(str_spanvar == 'chart1'){
              mydata = data[i]/1000
            }*/
            return {
              value: [
                riqigeshi(now),
                // data[i]/1024,
                mydata,
              ]
            }
          }

          //把原数据改成data123一样的格式
          function changeData(datain) {
            var liuru = [];
            for (var i = 0; i < 289; i++) {
              startTime = new Date(+startTime + fiveMinutes);
              liuru.push(chartData(i,datain,startTime));
            }
            return liuru;
          }
          var liuru = changeData(data_in);
          var option = {
            backgroundColor: '#fcfcfc',
            title: {
              text: this.tit
            },
            grid:{
              x:'9%',
              y:'10%',
              x2:'2.4%',
              y2:'10%',
            },
            xAxis:{
              type:'time',
              splitNumber:24,
              min: new Date(new Date().getTime() - 2 * 60 * 60 * 1000),
              splitLine: {
                show: false
              }
            },
            yAxis:{
              type:'value',
              axisLabel:{
                formatter:'{value}'+ this.danwei      //给Y轴上的刻度加上单位
              },
              splitLine: {
                show: false
              }
            },
            dataZoom: [
              {
                type: 'slider',//数据滑块
                start:0,
                minSpan:8,    //5min
                // minSpan:16,   //10min
                // minSpan:24,   //15min
                // minSpan:50,   //30min
                dataBackground:{
                  lineStyle:{
                    color:'#95BC2F'
                  },
                  areaStyle:{
                    color:'#95BC2F',
                    opacity:1,
                  }
                },
                // fillerColor:'rgba(255,255,255,.6)'
              },
              /*{
                type:'inside'//使鼠标在图表中时滚轮可用
              }*/
            ],
            /*tooltip:{
              trigger: 'axis',
              formatter : function(params) {
                var result = params[0].value[0];
                params.forEach(function(item) {
                  result += '<br/>';
                  result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
                  result += item.seriesName + "：";
                  result += isNaN(item.value[1]) ? 0 : (item.value[1]*1024).toFixed(2) + "M";
                });
                return result;
              },
            },*/
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                // console.log(params)
                params = params[0];
                var date = new Date(params.name);
                return params.value[0] + '   ' + params.value[1].toFixed(2);
              },
              axisPointer: {
                animation: false
              }
            },
            series:{
              name: '流入',
              type: 'line',
              showSymbol: false,
              symbolSize:12,
              data: liuru,
            }
          };




          let _this = this
          console.log(str_spanvar)
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById(str_spanvar));

          myChart.setOption(option)

          function refresh() {
            // liuru先shift(),再push()
            var liuruShift = liuru.shift();
            var liuruShiftVal = liuruShift.value[1];
            var newlrtime = riqigeshi(new Date(+new Date(liuruShift.value[0])+oneDay+fiveMinutes));
            liuru.push({value:[newlrtime,liuruShiftVal]});
            // console.log(liuru)
            myChart.setOption({
              series:{
                data:liuru,
              },
              xAxis:{
                type:'time',
                splitNumber:24,
                min: new Date(new Date().getTime() - 2 * 60 * 60 * 1000)
              }
            });
          }

          this.setTimer =setInterval(function () {
            refresh();
          },3000);
        }
      }
    }
</script>

<style scoped lang="less" type="text/less">
.charts{
  text-align: center;
  margin-left: 2%;
  display: inline-block;
}
</style>
