<template>
  <div id="chartView" style="height: 330px;width:100%;background-color:#fff"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'EchartsView',
  data() {
    return {
      xList: [],
      yList: []
    }
  },
  props: {
    lineArray: {
      type: Array,
      default: () => []
    },
    carNo: {
      type: String,
      default: ''
    }
  },
  mounted() {
    this.calcData()
  },
  methods: {
    calcData() {
      if (this.lineArray && this.lineArray.length > 0) {
        let tempX = []
        let tempY = []
        this.lineArray.forEach(item => {
          if (item.temperature) {
            // collectDate temperature
            tempX.push(this.splitDate(item.collectDate))
            tempY.push(item.temperature)
          }
        })
        this.xList = tempX
        this.yList = tempY
      }
      if (this.xList.length > 0) {
        this.drawLine()
      }
    },
    drawLine() {
      let _this = this
      let layout = document.getElementById('chartView')
      let chart = echarts.init(layout)
      // let endValue = 10 - Math.ceil(this.xList.length / 100)
      // if (endValue <= 0) {
      //   endValue = 5
      // }
      let endValue = _this.xList.length
      while (endValue > 10) {
        endValue = endValue / 6
      }

      console.log(_this.xList.length, endValue)
      let options = {
        // animation: false,
        color: '#02a7f0',
        dataZoom: [
          {
            id: 'dataZoomX',
            type: 'inside',
            xAxisIndex: [0],
            filterMode: 'none',
            start: 0,
            end: endValue,
            zoomLock: true
          }
        ],
        tooltip: {
          trigger: 'axis',
          formatter(params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              let circle = `<span style="margin-right:6px;
                    display:inline-block;
                    height:12px;
                    width:12px;
                    border-radius:6px;
                    background-color:${params[i].color}"></span>`
              relVal += '<br/><div style="display:flex;align-items: center">' + circle + _this.carNo + ' : ' + params[i].value + '℃</div>'
            }
            return relVal
          }
        },
        grid: {
          left: '12%',
          top: '14%',
          height: '78%',
          width: '86%'
        },
        xAxis: {
          type: 'category',
          data: this.xList,
          axisLine: {
            lineStyle: {
              color: '#eeeeee'
            }
          },
          axisLabel: {
            color: '#999999' // ,
            // interval: 1
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          name: '温度',
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#eeeeee'
            }
          },
          axisLabel: {
            color: '#999999',
            formatter: '{value} ℃'// ,
            // interval: 0.5
          },
          splitLine: {
            lineStyle: {
              color: '#eeeeee'
            }
          },
          nameTextStyle: {
            color: '#000',
            fontSize: 15
          }
        },
        series: [{
          data: this.yList, // [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }]
      }
      chart.setOption(options)
    },
    splitDate(oDate) {
      let res = oDate.split(' ')[1].slice(0, 5)
      return res
    }
  }
}
</script>

<style scoped>

</style>
