<template>
  <div class="inerank-container">
    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
  </div>
</template>
<script>
export default {
  props:{
    data:{
      type:Array,
      default:[]
    }
  },
  watch:{
    data:{
      handler: function (val, oldVal) {
        if (val) {
          this.realData=this.realData.concat(val)
          this.init()
        }
      }
    }
  },
  data() {
    return {
      realData:[]
    };
  },
  mounted() {
    this.realData=this.data
    this.init()
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myLineRank);
      var dataAxis = [];
      var date=new Date()
      let addTemp=23-date.getHours()
      for (let i = addTemp; i > 0; i--) {
        dataAxis.push(23-i)
      }
      for (let i = 0; i <= date.getHours() ; i++) {
        dataAxis.push(i)
      }

      var data = this.formartData(dataAxis)
      var yMax = 500;
      var dataShadow = [];
      for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }
      let option = {
        title: {
          show: false
        },
        xAxis: {
          data: dataAxis,
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#79778a",
              fontFamily: "DIN"
            },
            margin: 10,
            interval: 0
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#272938",
              fontFamily: "DIN"
            }
          },
          splitLine: {
            show: false
          },
          interval: 500000
        },
        grid: {
          left: "70",
          right: "20",
          top: "10",
          bottom: "25"
        },
        series: [
          {
            type: "line",
            smooth: true,
            symbol: "none",
            left:'0',
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#4e5afd" },
                  { offset: 1, color: "#44c4ed" }
                ])
              }
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#4e5afd",
                  shadowBlur: 10,
                  shadowColor: "#4e5afd"
                }
              }
            },
            data: data
          }
        ]
      };
      myChart.setOption(option);
    },
    formartData(dataAxis){
      let data=[]
      var today=new Date()
      var t=today.getTime()-1000*60*60*24
      var yesterday=new Date(t)
      let date=yesterday
      for (let i = 0; i < dataAxis.length; i++) {
        if(dataAxis[i]==0) {
          date=today
        }
        let day=date.getDate()
        day=day.length==1?`0${day}`:day
        let hours=dataAxis[i]
        hours=hours.length==1?`0${hours}`:hours
        let key=day+' '+hours
        let count=0
        this.realData.forEach(x=>{
          if(x.time.indexOf(key)!=-1){
            count+=parseFloat(x.unitPrice)
          }
          
        })
        data.push(count)
      }
      return data
    }
  }
};
</script>
<style>
.inerank-container {
  height: 100%;
  width: 100%;
}
</style>
