<template>
  <div class="ecLine" :id="domId" :style="{height: height,width: width}" ></div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    props: {
      domId: {
        type: String,
        default: 'ecLine'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      title: String,
      legend: Array,
      catalog: Array,
      data1: {
        type: Array,
        default: () => []
      },
      data2: {
        type: Array,
        default: () => []
      },
      lineOnoff: { 
        type: Boolean,
        default: true
      },
      yName: { 
        type: String,
        default: '总量'
      },
      rendering: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        ec: null,
        options: {
          title: {
            text: '',
            textStyle: {
              color: '#333',
              fontSize: '16',
              fontFamily: '宋体'
            }
          },
          grid: [{
            top: '20%',
            left: '15%',
            right: '5%',
            height: '30%'
          }, {
            top: '58.5%',     
            left: '15%',
            right: '5%',
            height: '30%',
            bottom: '5%'
          }],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#056EA1'
              }
            },
            formatter: function (params) {
              if (params instanceof Array) {
                var idxMap = [{
                  text: '服务访问总量',
                  data: []
                }, {
                  text: '服务平均耗时',
                  data: []
                }]
                var time = params[0].axisValue
                for (var i = 0; i < params.length; i++) {
                    var seriesIdx = params[i].seriesId.split(params[i].seriesId[0])

                    idxMap[seriesIdx[2]].data.push({
                        marker: params[i].marker,
                        seriesName: params[i].seriesName,
                        data: params[i].data
                    })
                }
                return '<div>' +
                    '<time>' + time + '</time>' +
                    '<br />' +
                    idxMap.map((item) => {
                        return item.data.map((iItem) => {
                            return '<p style="margin: 0;padding: 0;">' + iItem.marker + iItem.seriesName + ': ' + iItem.data + '</p>'
                        }).join('')
                    }).join('') +
                '</div>'
              }
            }
          },
          axisPointer: {
            link: {
              xAxisIndex: 'all'
            }
          },
          legend: {
            data: []
          },
          xAxis: [{
            type: 'category',
            gridIndex: 0,
            boundaryGap: false,
            splitLine: {show: false},
            /* axisLabel: {
              interval: 0 // 默认展示存放得下一部分数据 ，0 表示全部显示
            }, */
            data: []
          }, {
            type: 'category',
            gridIndex: 1,
            position: 'top',
            boundaryGap: false,
            splitLine: {show: false},
            /* axisLabel: {
              show: false,
              interval: 0
            }, */
            data: []
          }],
          yAxis: [{
            name: '访问总量',
            type: 'value',
            nameTextStyle: {
              fontSize: 14
            },
            gridIndex: 0,
            splitLine: {show: false}
          }, {
            name: '平均耗时',
            type: 'value',
            nameTextStyle: {
              fontSize: 14
            },
            gridIndex: 1,
            inverse: true,
            splitLine: {show: false}
          }],
          series: [{
            name: '访问总量',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                }, {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }])
              }
            },
            data: []
          }, {
            name: '平均耗时',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                }, {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }])
              }
            },
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: []
          }]
        }
      }
    },
    watch: {
      data1 () {
        this.init()
      },
      data2 () {
        this.init()
      },
      lineOnoff (val) {
        if (val) { 
          let resizeTimer = null
          clearTimeout(resizeTimer)
          resizeTimer = setTimeout(() => {
            this.init()
            this.widthChange()
          }, 100)
        }
      },
      rendering (val) {
        let resizeTimer = null
        clearTimeout(resizeTimer)
        resizeTimer = setTimeout(() => {
          this.init()
          this.widthChange()
        }, 100)
      }
    },
    mounted () {
      this.init()
      this.widthChange()

      /* window.addEventListener('resize', () => {
        this.init()
        this.widthChange()
      }) */
    },
    methods: {
      widthChange () {
        let winWid = window.document.body.clientWidth
            // this.ec ? this.ec.setOption(this.options, true) : ''
            if (this.ec !== null || this.ec !== undefined) {
              this.ec.setOption(this.options, true)
            }
      },
      init () {
        this.ec = this.ec ? this.ec : echarts.init(document.getElementById(this.domId))

        this.options.title.text = this.title || ''
        this.options.xAxis[0].data = this.catalog
        this.options.xAxis[1].data = this.catalog

        this.options.series[0].data = []
        this.options.series[1].data = []

        if (typeof this.data1[0] === 'object') {
            this.data1.map(item => {
              this.options.series[0].data.push(item.value)
            })
            this.data2.map(item => {
              this.options.series[1].data.push(item.value)
            })
        } else {
          this.options.series.name = this.title
          this.options.series[0].data = this.data1
          this.options.series[1].data = this.data2
        }

        this.ec.setOption(this.options, true)
        this.ec.resize(() => {
          this.ec.setOption(this.options, true)
        })
      }
    }
  }
</script>
