<template>
<!-- <div id='chart' style="width:100%,height:100%"></div> -->
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array,
      // type: Object,
      required: true
    },
    maxValue:{
      type:Number,
      
    },
    minValue:{
      type:Number,
    },
    title:{
      type:String,
      default:'chart'
    },
    // dateData: {
    //   type: Array,
    //   required: true
    // },

  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(this.title,val)
      }
    },
    maxValue:{
      deep:true,
      handler(val){
        this.setOptions(val,this.chartData)
      }
    },
    minValue:{
      deep:true,
      handler(val){
        this.setOptions(val,this.chartData)
      }
    },
    title: {
      deep: true,
      handler(val) {
        this.setOptions(val,this.chartData)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
        // var chartDom = document.getElementById('chart');
        // this.chart = echarts.init(chartDom)
      this.setOptions(this.title,this.chartData)
    },
    setOptions(txt,actualData) {
      console.log('txt',txt)
      console.log('chartData',actualData)
      this.chart.setOption({
        animation:false,
        title: {
        text: txt
      },
        xAxis: {
        
          type:'time',
          name:'时间',
          max: function (value) {
           // console.log('max',value)
          return value.max+100
          },
          min: function (value) {
             //console.log('min',value)
          return value.min-1000;
        },
         splitNumber :12,
          splitLine: {
          show: false
          },
          axisTick:{
            show:true,
           
          },
          minorTick:{
            show:true
          },
          axisLabel: {
            show:true,
            interval :0,
            formatter:{
              //  millisecond: '{hh}:{mm}:{ss} {SSS}',
               none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'
            },
            // formatter: function(value){
            //    let date = new Date(value);
            //     let year = date.getFullYear();
            //     // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
            //     let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            //     let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            //     let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            //     let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            //     let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            //     let milliSeconds=date.getMilliseconds();
            //     // 拼接
            //     return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds+":"+milliSeconds;
            // },
         rich: {
            yearStyle: {
                // 让年度信息更醒目
                color: '#000',
                fontWeight: 'bold'
            },
            monthStyle: {
                color: '#999'
            }
        }
           }
        },
      
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false
          },
          padding: [5, 10]
        },
        yAxis: {
          // max: function (value){
          //   return value.max*2
          // },
          max:this.maxValue,
          min:this.minValue,
          axisTick: {
            show: true
          },
        splitLine: {
          show: false
          },
          boundaryGap: [0, '100%'],
        },
        legend: {
          data: ['valueList']
        },
        series: [
      
        {
          name: '数值',
          showSymbol: false,
          smooth: true,
          type: 'line',
          itemStyle: {
            normal: {
              color: '#3888fa',
              lineStyle: {
                color: '#3888fa',
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
              }
            }
          },
          data: actualData,
          animationEasing: 'linear'
        },
        

      ]
      })
    }
  }
}
</script>
