<template>
  <div style="width: 100%;height: 100%">
    <div id="fpcharts"></div>
  </div>
</template>

<script>
import resize from '../../../components/Charts/mixins/resize'
import echarts from 'echarts'
import cc from '../../curvecolors'

export default {
  mixins: [resize],
  watch: {
    drawData: {
      handler(newValue, oldValue) {
        this.draw(newValue)
      },
      deep: true
    },
    resizeKey: function (newQuestion, oldQuestion) {
      if (this.chart != null) {
        this.chart.resize();
      }

    }
  },
  props: {
    drawData: {
      type: Object,
    },
    resizeKey: {
      type: Number
    }
  },
  data() {
    return {
      lineColor: '',
      chart: null,
    }
  },
  mounted() {
    if (sessionStorage.getItem('styleSwitch') === 'blue') {
      this.lineColor = 'white'
    } else {
      this.lineColor = '#3b3b3b'
    }
  },
  methods: {
    draw(newValue) {
      this.chart = echarts.init(document.getElementById('fpcharts'))
      var option = {
        title: {
          // top: 10,
          text: '风速数据对比',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: this.lineColor
          },
          // left: '1%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: [],
          right: '4%',
          textStyle: {
            fontSize: 12,
            color: this.lineColor
          }
        },
        dataZoom: [{
          show: true,
          realtime: true,
          start: 0,
          end: 100,
          left: "15%",
          right: "15%",
          textStyle: {
            color: this.lineColor
          }
        }, {
          type: 'inside'
        }],
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: this.lineColor
            }
          },
          data: newValue.times
        }],
        yAxis: [{
          type: 'value',
          name: '(m/s)',
          // max: newValue.electricField.capacity,
          min: 0,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: this.lineColor
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: []
      }
      if (newValue.wsInst10.length > 0) {
        option.series.push({
          name: '10米风速',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.ws10,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.wsInst10
        })
        option.legend.data.push('10米风速')
      }
      if (newValue.wsInst30.length > 0) {
        option.series.push({
          name: '30米风速',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.ws30,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.wsInst30
        })
        option.legend.data.push('30米风速')
      }
      if (newValue.wsInst50.length > 0) {
        option.series.push({
          name: '50米风速',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.ws50,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.wsInst50
        })
        option.legend.data.push('50米风速')
      }
      if (newValue.wsInst60.length > 0) {
        option.series.push({
          name: '60米风速',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {

              color: cc.ws60,
              borderColor: 'rgba(64,94,94,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.wsInst60
        })
        option.legend.data.push('60米风速')
      }
      if (newValue.wsInst70.length > 0) {
        option.series.push({
          name: '70米风速',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.ws70,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.wsInst70
        })
        option.legend.data.push('70米风速')
      }
      if (newValue.wsInst80.length > 0) {
        option.series.push({
          name: '80米风速',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.ws80,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.wsInst80
        })
        option.legend.data.push('80米风速')
      }
      if (newValue.wsInst90.length > 0) {
        option.series.push({
          name: '90米风速',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.ws90,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.wsInst90
        })
        option.legend.data.push('90米风速')
      }
      if (newValue.wsInst100.length > 0) {
        option.series.push({

          name: '100米风速',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.ws100,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.wsInst100
        })
        option.legend.data.push('100米风速')
      }
      if (newValue.wsInst110.length > 0) {
        option.series.push({

          name: '110米风速',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.ws110,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.wsInst110
        })
        option.legend.data.push('110米风速')
      }
      if (newValue.wsInst120.length > 0) {
        option.series.push({
          name: '120米风速',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.ws120,
              borderColor: 'rgba(201,209,210,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.wsInst120
        })
        option.legend.data.push('120米风速')
      }
      if (newValue.ws10.length > 0) {
        option.series.push({
          name: newValue.columns.ws10,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.nwp10,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.ws10
        })
        option.legend.data.push(newValue.columns.ws10)
      }
      if (newValue.ws30.length > 0) {
        option.series.push({
          name: newValue.columns.ws30,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.nwp30,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.ws30
        })
        option.legend.data.push(newValue.columns.ws30)
      }
      if (newValue.ws50.length > 0) {
        option.series.push({
          name: newValue.columns.ws50,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.nwp50,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.ws50
        })
        option.legend.data.push(newValue.columns.ws50)
      }
      if (newValue.ws60.length > 0) {
        option.series.push({
          name: newValue.columns.ws60,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.kygl,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.ws60
        })
        option.legend.data.push(newValue.columns.ws60)
      }
      if (newValue.ws70.length > 0) {
        option.series.push({

          name: newValue.columns.ws70,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.nwp70,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.ws70
        })
        option.legend.data.push(newValue.columns.ws70)
      }
      if (newValue.ws80.length > 0) {
        option.series.push({

          name: newValue.columns.ws80,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.nwp80,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.ws80
        })
        option.legend.data.push(newValue.columns.ws80)
      }
      if (newValue.ws90.length > 0) {
        option.series.push({

          name: newValue.columns.ws90,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.nwp90,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.ws90
        })
        option.legend.data.push(newValue.columns.ws90)
      }
      if (newValue.ws100.length > 0) {
        option.series.push({

          name: newValue.columns.ws100,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: cc.nwp100,
              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.ws100
        })
        option.legend.data.push(newValue.columns.ws100)
      }
      if (newValue.ws110.length > 0) {
        option.series.push({

          name: newValue.columns.ws110,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {

              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.ws110
        })
        option.legend.data.push(newValue.columns.ws110)
      }
      if (newValue.ws120.length > 0) {
        option.series.push({

          name: newValue.columns.ws120,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {

              borderColor: 'rgba(50,194,219,0.2)',
              borderWidth: 12
            }
          },
          data: newValue.ws120
        })
        option.legend.data.push(newValue.columns.ws120)
      }

      option.animation = false;
      this.chart.setOption(option, true)
      var val = [{
        "url": encodeURIComponent(this.chart.getDataURL('png'))
      }]
      this.$emit('onChart', val)
    },

  }
}
</script>
<style scoped>
#fpcharts {
  width: 100%;
  height: calc(80vh - 50px);
}
</style>
