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

<script>
  import resize from '../../../../components/Charts/mixins/resize'
  import echarts from 'echarts'
  import {mapState} from 'vuex'

  export default {
    mixins: [resize],
    watch: {
      wfData: {
        handler(newValue, oldValue) {
          console.log(newValue)
          this.draw(newValue)
        },
        deep: true
      }
    },
    props: {
      wfData:{
        type: Object
      },
      thFormat:{
        type:Array
      }
    },
    data() {
      return {
        lineColor:'',
        chart: null,
        itemStyle:[
          {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#956FD4'},
                  {offset: 1, color: '#3EACE5'}
                ]
              )
            }
          },
          {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#d46f6f'},
                  {offset: 1, color: '#e53e3e'}
                ]
              )
            }
          },
          {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#d4a76f'},
                  {offset: 1, color: '#e58c3e'}
                ]
              )
            }
          },
          {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#d1d46f'},
                  {offset: 1, color: '#a5e53e'}
                ]
              )
            }
          },
          {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#79d46f'},
                  {offset: 1, color: '#3ee589'}
                ]
              )
            }
          },
          {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#6fb1d4'},
                  {offset: 1, color: '#3e8fe5'}
                ]
              )
            }
          },
          {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#ca6fd4'},
                  {offset: 1, color: '#b83ee5'}
                ]
              )
            }
          },
          {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#d46fac'},
                  {offset: 1, color: '#c63ee5'}
                ]
              )
            }
          },
          {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#6fd4b1'},
                  {offset: 1, color: '#3ee5d2'}
                ]
              )
            }
          },
          {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#abd4aa'},
                  {offset: 1, color: '#e566ff'}
                ]
              )
            }
          },// 11
          {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#d47d36'},
                  {offset: 1, color: '#cc00cc'}
                ]
              )
            }
          },
          {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#42d4bf'},
                  {offset: 1, color: '#c0ff3e'}
                ]
              )
            }
          },
          {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#0085d4'},
                  {offset: 1, color: '#ff0091'}
                ]
              )
            }
          },
        ],
        colorArr : [{
          start: "rgba(155, 101, 229,",
          end: "rgba(219,44,44,0.5)"
        },
          {
            start: "rgba(71, 173, 245,",
            end: "rgba(231,132,46,0.5)"
          },
          {
            start: "rgba(82, 249, 107,",
            end: "rgba(190,229,50,0.5)"
          },
          {
            start: "rgba(82, 249, 107,",
            end: "rgba(44,214,140,0.5)"
          },
          {
            start: "rgba(82, 249, 107,",
            end: "rgba(43,73,221,0.5)"
          },
          {
            start: "rgba(82, 249, 107,",
            end: "rgba(40,203,203,0.5)"
          },
          {
            start: "rgba(82, 249, 107,",
            end: "rgba(195,42,180,0.5)"
          },
          {
            start: "rgba(82, 249, 107,",
            end: "rgba(231,45,119,0.5)"
          },
          {
            start: "rgba(82, 249, 107,",
            end: "rgba(229,46,46,0.5)"
          },
          {
            start: "rgba(206, 255, 205,",
            end: "rgba(255,102,255,0.5)"
          },//11
          {
            start: "rgba(206, 255, 205,",
            end: "rgba(204,0,204,0.5)"
          },
          {
            start: "rgba(206, 255, 205,",
            end: "rgba(192,255,62,0.5)"
          },
          {
            start: "rgba(206, 255, 205,",
            end: "rgba(255,0,145,0.5)"
          },
        ]
      }
    },
    mounted() {
      if(sessionStorage.getItem('styleSwitch') === 'blue'){
        this.lineColor = 'white'
      }else{
        this.lineColor = '#3b3b3b'
      }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      draw(wfData) {
        this.chart = echarts.init(document.getElementById('wfcharts'))

        var option = {
          title: {
            top: 20,
            text: '测风塔信息-风速频率图',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: this.lineColor
            },
            left: '1%'
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            top: 100,
            left: '2%',
            right: '2%',
            bottom: '10%',
            containLabel: true
          },
          legend: {
            top: 20,
            width:'70%',
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            data: [],
            right: '4%',
            textStyle: {
              fontSize: 12,
              color: this.lineColor
            },
            selected:{}
          },
          calculable: true,

          xAxis: [
            {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: this.lineColor
                }
              },
              data: ['0-3m/s', '3-6m/s', '6-9m/s', '9-12m/s', '12-15m/s', '15-18m/s', '18-21m/s', '21-24m/s', '24-27m/s', '>27m/s']
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '%',
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: this.lineColor
                }
              },

              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14,
                  color: this.lineColor
                },
                formatter: '{value}',
              },
              splitLine: {
                lineStyle: {
                  color: '#57617B'
                }
              }
              }
          ],
          series: []
        };
        var index = 0;

        for(var key in wfData){
          var keyName='';
          for(var i = 0 ;i<this.thFormat.length;i++){
            if(key ==this.thFormat[i].key ){
              keyName =this.thFormat[i].value;
            }
          }
          option.legend.data.push(keyName)
          if(index>3){
            option.legend.selected[keyName] = false
          }else{
            option.legend.selected[keyName] = true
          }
          var wf = new Object
          wf.name=keyName
          wf.type='bar'
          wf.data=wfData[key]
          /*wf.itemStyle=this.itemStyle[index]*/
          wf.itemStyle={
            normal: {
              color: {
                type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                  offset: 0,
                  color: this.colorArr[index].start + "0.7)"
                },
                  {
                    offset: 0.5,
                    color: this.colorArr[index].start + "0.3)"
                  },
                  {
                    offset: 1,
                    color: this.colorArr[index].end
                  }
                ],
                  globalCoord: false
              }
            }
          }
          option.series[index] = wf
          index++;
        }
        this.chart.setOption(option,true)

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