<template>
  <div id="mountNode" ref="mountNode" style="height: 400px;"></div>
</template>
<script>
import * as echarts from "echarts/core";
// import * as echarts from "echarts";
import { LineChart } from 'echarts/charts'
import { GridComponent,TooltipComponent,DatasetComponent,DataZoomComponent } from 'echarts/components'

import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([DatasetComponent,GridComponent,TooltipComponent,LineChart,LabelLayout,CanvasRenderer,UniversalTransition,DataZoomComponent])
export default {
  name: "line-chart",
  props: ["recordsInfo", "visible"],
  data() {
    return {
      name: "lineChart",
      chartView: null, //图表绘画
    };
  },
  mounted() {
    let _this = this;
    this.$nextTick(function () {
      if (this.recordsInfo.list.length) {
        _this.initChart();
      }
    });
  },
  watch: {
    visible(val) {
      if (val && this.recordsInfo.list.length) {
        this.chartView.dispose();
        this.chartView = null;
        this.initChart();
      }
    },
  },
  beforeDestroy() {
    if (!this.chartView) {
      return;
    }
    this.chartView.dispose();
    this.chartView = null;
  },
  methods: {
    initChart() {
      console.log(this.$el.parentNode)
      this.chartView = echarts.init(document.getElementById("mountNode"));
      let _this = this;
      _this.chartView.setOption({
         tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              let  data = params[0];
              return "<span style='vertical-align: top;margin-top: 6px;display:inline-block;width: 6px;height: 6px;background: #218cfa;border-radius: 50%;margin-right:15px;'>"+"</span><span style='color:#333333; font-weight: bold;margin-right:15px;'>"+data.value+ (_this.recordsInfo.unit ? '(' +_this.recordsInfo.unit+')':'') + '</span>'+
              (((_this.recordsInfo.panHigh && data.value > _this.recordsInfo.panHigh) || (_this.recordsInfo.panLow && (data.value < _this.recordsInfo.panLow)))?'<span class="bg-img-iswarn"><svg t="1618470844755" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2833" width="20" height="20"><path d="M577.024 229.376c12.8 8.704 23.552 19.456 32.256 32.256l247.808 371.2c35.84 53.76 21.504 125.952-32.256 161.792-19.456 12.8-41.984 19.456-65.024 19.456H264.192c-64.512 0-116.736-52.224-116.736-116.736 0-23.04 6.656-45.568 19.456-65.024L414.72 261.632c35.84-53.76 108.544-68.096 162.304-32.256z m-64 450.56c-11.264 0-20.992 3.584-28.16 10.752-8.192 7.168-11.776 16.384-11.776 28.16 0 11.264 3.584 20.992 11.776 28.16 7.168 7.168 16.384 11.264 28.16 11.264s20.992-3.584 29.184-10.752c7.168-7.168 11.264-16.896 11.264-28.672 0-11.264-4.096-20.992-11.264-28.16-8.192-7.168-17.92-10.752-29.184-10.752z m35.328-291.84H478.208l12.8 264.192h44.032l13.312-264.192z" p-id="2834" fill="#EF3F2E"></path></svg></span>':'') + '<br />'
              + (_this.recordsInfo.itemRef ? '<span style="vertical-align: top;margin-top: 6px;display:inline-block;width: 6px;height: 6px;background: #06AF67;border-radius: 50%;margin-right:15px;">'+"</span><span style='color:#333333; font-weight: bold;'>"+_this.recordsInfo.itemRef+"</span><br />" : '')
              + '<span class="bg-img"><svg t="1618471404681" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3163" width="20" height="20"><path d="M512 920.064c-225.28 0-408.064-183.296-408.064-408.064S286.72 103.936 512 103.936 920.064 286.72 920.064 512 737.28 920.064 512 920.064z m0-761.856c-195.072 0-353.792 158.72-353.792 353.792s158.72 353.792 353.792 353.792 353.792-158.72 353.792-353.792-158.72-353.792-353.792-353.792z" p-id="3164" fill="#BEC1C6"></path><path d="M734.72 543.232H484.864V294.4h54.272v194.56h195.584z" p-id="3165" fill="#BEC1C6"></path></svg></span>' +"<span style='color:#333333; font-weight: bold;'>"+ data.name+"</span>";
            },
            axisPointer: {
              animation: false
            },
            backgroundColor: '#ffffff', // 提示框浮层的背景颜色。
            borderColor: 'rgba(128,136,146,0.50)', // 提示框浮层的边框颜色。
            boxShadow: '0px 0px 4px 0px'
        },
        // toolbox: {
        //     show: true,
        //     feature: {
        //         // dataView: {show: true, readOnly: false},
        //         magicType: {show: true, type: ['line', 'bar']},
        //         restore: {show: true},
        //         saveAsImage: {show: true}
        //     }
        // },
        grid: {
          x:50,
          y:60,
          x2:100,
          y2:40,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            formatter: function (params) {
              return  '{time|' + params.slice(11) + '}\n'
                    + '{data|' + params.slice(5,10) + '}';
            },
            interval: 1,
            rich: {
              time: {
                color: '#333333',
                lineHeight: 10,
                fontSize: 14,
                fontWeight: 'bold'
              },
              data: {
                color: '#333333',
                lineHeight: 20,
                fontSize: 12
              },
            }
          },
          axisTick: {
            alignWithLabel: true
          },
          data: _this.recordsInfo.timeList,
          axisLine: {
            lineStyle: {
              color: "black",
            },
          },
        },
        yAxis: {
          type: "value",
           axisLabel: {
            formatter: '{value}'
          },
          axisLine: {
            lineStyle: {
              color: "black",
            },
          },
          max: function () {
            if( _this.recordsInfo.maxNum < 4) {
              return (_this.recordsInfo.maxNum + 0.5).toFixed(2)
            } else if( _this.recordsInfo.maxNum > 4 && _this.recordsInfo.maxNum < 10){
              return (_this.recordsInfo.maxNum + 4).toFixed(2)
            } else {
              return (_this.recordsInfo.maxNum + 6).toFixed(2)
            }
          },
          // min: function (value) {
          //   return value.min - 5;
          // }
        },
        series: [
          {
            data: _this.recordsInfo.list,
            type: "line",
            color: ["#218CFA"],
            label:{
              // padding: 
            },
            // areaStyle: {
            //   opacity: 0.8,
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //       offset: 0,
            //       color: 'rgba(255,255,255,0.2)'
            //   }, {
            //       offset: 1,
            //       color: 'rgba(33,140,250,0.2)'
            //   }])
            // },
            
            markLine: {
              silent: true,
              data: _this.recordsInfo.markLineList,
              symbol: 'none',
              label: {
                position: 'insideBottomRight',
                show: true
              },
              lineStyle: {
                normal: {
                  type: 'dashed',
                },
              }
            }
          }
        ],
         dataZoom:[
          {
            type: "slider",
            show: true,  // x轴是否启用 
            start: 0,  // 从哪里开始显示 
            end: 100,   // 到哪里结束显示
            handleSize: 8,
          },
          {
            type: "inside",
            start: 94,
            end: 100,
          },
          {
            type: "slider",
            show: false,   // y轴是否启用
            yAxisIndex: 0,
            filterMode: "empty",
            width: 12,
            height: "70%",
            handleSize: 8,
            showDataShadow: false,
            left: "93%",
          },
        ]
      });
    },
  },
};
</script>
<style lang="less">
.bg-img {
  display: inline-block;
  margin-top: 3px;
  vertical-align: top;
  height: 15px;
  width: 15px;
  margin-right: 8px;
  svg {
    height: 15px;
    width: 15px;
  }
}
.bg-img-iswarn {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
}
</style>
<style lang="less" scoped>
//#mountNode {
//
//  height: 350px;
//}

</style>