<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,
      data: {
        type: Array,
        default: () => []
      },
      lineOnoff: { 
        type: Boolean,
        default: true
      },
      yName: { 
        type: String,
        default: ''
      },
      iColor: {
        type: String,
        default: '#green' 
      },
      aColori: {
        type: String,
        default: 'rgb(255, 255, 255)'
      },
      aColorii: {
        type: String,
        default: 'rgb(255, 255, 255)'
      },
      rendering: {
        type: Boolean,
        default: true
      }
    },
    data() { 
      return {
        resizeTimer: null,
        ec: null,
        options: {
          title: {
            text: '',
            textStyle: {
              color: '#333',
              fontSize: '16',
              fontWeight: 'normal',
              fontFamily: 'Microsoft YaHei ' // 微软雅黑
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              lineStyle: {
                color: 'rgb(147, 112, 219)'
              }
            }
          },
          legend: {
            left: 'right',
            data: [],
            padding: [0, 5, 5, 90]
          },
          xAxis: {
            type: 'category',
            name: '时间',
            splitLine: {show: true},
            data: [],
            boundaryGap: false,
            splitArea: {show: false} // 保留网格区域背景颜色
          },
          grid: { // 调整上下左右的显示范围
            left: '20',
            right: '40',
            top: '80',
            bottom: '10',
            containLabel: true
          },
          yAxis: {
            type: 'value',
            name: this.yName,
            min: 0,
            splitNumber: 5,
            splitLine: {show: true}, // 网格
            splitArea: {show: false}, // 保留网格区域背景颜色
            boundaryGap: [0.2, 0.2]
          },
          series: {
            name: '',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              normal: {
                color: this.iColor
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: this.aColori // '#ffd897'
                }, {
                  offset: 1,
                  color: this.aColorii // '#fff'
                }])
              }
            },
            data: []
          }
        },
        colorArr: [{
          color1: '#00EE00',
          color2: '#fdfdfd'
        }, {
          color1: '#ffd897',
          color2: '#fdfdfd'
        }, {
          color1: '#ffabd8',
          color2: '#fdfdfd'
        }, {
          color1: '#cefac9',
          color2: '#fdfdfd'
        }, {
          color1: '#fac9f0',
          color2: '#fdfdfd'
        }]
      }
    },
    watch: {
      data () {
        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)
        /* window.addEventListener('resize', () => {
          if (resizeTimer) clearTimeout(resizeTimer)
          resizeTimer = setTimeout(() => {
            console.log(666)
            this.init()
            this.widthChange()
          }, 1000)
        }) */
      }
    },
    mounted () { 
      this.init()
      // this.widthChange()
    },
    methods: {
      widthChange () {
        let winWid = window.document.body.clientWidth
        if (this.ec !== null || this.ec !== undefined) {
          this.ec.setOption(this.options, true)
        }
        // this.ec ? 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.data = this.catalog

        if (typeof this.data[0] === 'object') {
          if (this.data[0]['data'] !== undefined) { // 多条折线
            let arr = [], legend = []

            this.data.map((item, index) => {
              let series = {
                name: item.name,
                type: 'line',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                areaStyle: { normal: {} }, 
               /*  areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: this.colorArr[index].color1 // '#ffd897'
                    }, {
                      offset: 1,
                      color: this.colorArr[index].color2 // '#fff'
                    }])
                  }
                },  */
                data: item.data
              }
              legend.push(item.name)
              arr.push(series)
            })

            this.options.legend.data = legend
            this.options.series = arr
          } else {
            this.options.series.data = this.data
          }
        } else {
          this.options.series.name = this.title
          this.options.series.data = this.data
        }  

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