<template>
  <div :class="className" :style="{width:width,height:height}" />
</template>

<script>
import echarts from 'echarts3'
// require('echarts/theme/infographic')
// import { debounce } from '../../utils'
// import resize from '../../mixins/resize'
import resize from './mixins/resize'
export default {
  name: '',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chartline'
    },
    height: {
      type: String,
      default: '300px'
    },
    width: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    },
    showLegend: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chartline: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chartline) {
      return
    }
    this.chartline.dispose()
    this.chartline = null
  },
  methods: {
    initChart() {
      this.chartline = echarts.init(this.$el, 'infographic')
      this.setOptions(this.chartData)
    },
    setOptions({ xAxisData, yAxisDataList, title } = {}) {
      const series = []; const legendList = []; const dataList = []
      if (yAxisDataList.length != 0) {
        yAxisDataList.forEach(item => {
          dataList.push(item.data)
          legendList.push(item.name)
        })
      }
      dataList.forEach((item, index) => {
        let obj = {}
        obj = {
          name: legendList[index],
          data: item,
          type: 'line',
          symbol: 'circle',
          showSymbol: false,
          stack: legendList[index],
          symbolSize: 8,
          smooth: true
          // itemStyle:{
          //   normal:{
          //     color:function(params){
          //       var colorList = [
          //        '#0078d7','#f04244','#ff8700','#00e473','#ff6a00',
          //        '#ff00de','#0000ff'
          //       ];
          //       return colorList[index]
          //     }
          //   }
          // }
        }
        series.push(obj)
      })
      this.chartline.setOption({
        xAxis: {
          data: xAxisData,
          boundaryGap: true,
          axisTick: {
            show: true,
            alignWithLabel: true
          },
          axisLabel: {
            interval: 0,
            rotate: 0,
            formatter: function(value) {
              var pattern = new RegExp('[\u4E00-\u9FA5]+')
              var pattern2 = new RegExp('[A-Za-z]+')
              if (pattern.test(value)) {
                var v = value.substring(0, 6) + '...'
                return value.length > 6 ? v : value
              } else {
                var v = value.substring(0, 9) + '...'
                return value.length > 9 ? v : value
              }
            }
          }
        },
        title: {
          text: title
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '8%',
          top: '10%',
          containLabel: true
        },
        dataZoom: [
          {
            'show': true,
            'height': 10,
            'xAxisIndex': [
              0
            ],
            bottom: '0%',
            'start': 0,
            'end': 90,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: 'rgba(204,187,225,0.5)'
            },
            textStyle: {
              color: 'rgba(204,187,225,0.7)',
              fontSize: 10
            },
            borderColor: 'rgba(204,187,225,0.5)',
            fillerColor: 'rgba(233,232,233,0.6)'
          },
          {
            'type': 'inside',
            'show': true,
            'height': 15,
            'start': 1,
            'end': 35
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          textStyle: {
            fontSize: 10
          },
          // position: function(point, params, dom, rect, size){
          //   console.log(point[0])
          //  //其中point为当前鼠标的位置
          //  return [point[0],'20%'];
          // },
          position: function(point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0 // x坐标位置
            var y = 0 // y坐标位置

            // 当前鼠标位置
            var pointX = point[0]
            var pointY = point[1]

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0]
            var boxHeight = size.contentSize[1]

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5
            } else { // 左边放的下
              x = pointX - boxWidth
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5
            } else { // 上边放得下
              y = pointY - boxHeight
            }
            return [x, y]
          }
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        color: ['#0078d7', '#f04244', '#ff8700', '#00e473', '#ff6a00', '#ff00de', '#0000ff'],
        legend: {
          show: this.showLegend,
          data: legendList,
          left: 'right',
          orient: 'horizontal',
          icon: 'rect',
          itemWidth: 12,
          itemHeight: 8,
          right: 10,
          top: 0,
          textStyle: {
            color: '#333',
            fontSize: '12'
          }
        },
        series: series
      })
    }

  }
}
</script>
