<template>
  <div>
    <div class="auto" style="height: 5%">
      <div class="form-group">
        <label for="year" class="col-sm-4 col-sm-offset-4" style="color:#fff;line-height: 32px">年份</label>
        <div class="col-sm-4">
          <input class="form-control" type="number" id="year" v-model="year" @blur="getYear()"/>
        </div>
      </div>
    </div>
    <div id="single-bar-chart">
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import {HttpResetClass} from 'vue-client'
  export default {
    title: '收费',
    data () {
      return {
        xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        threeArr: [10, 10, 30, 12, 15, 3, 7, 18, 20, 30, 50, 70],
        twoArr: [5, 12, 11, 14, 25, 16, 10, 17, 26, 35, 67, 36],
        oneArr: [12, 13, 31, 44, 55, 136, 120, 27, 25, 12, 35, 56],
        barchart: {},
        interval:0,
        year: 2021,
        year1: 2021,
        year2: 2020,
        year3: 2019
      }
    },
    methods: {
      initEchart(dataZoom) {
        const colorList = ["#9E87FF", '#fe9a8b', '#73DD39']
        let option = {
          backgroundColor: '#ffffff00',
          title: {
            text: '售气量分析图(单位/万m³)',
            left: 'left',
            textStyle: {
              color: '#fff'
            }
          },
          legend: {
            icon: 'circle',
            top: '5%',
            right: '5%',
            itemWidth: 6,
            itemGap: 20,
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'axis',
            extraCssText: 'width: auto;height: auto;box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
            axisPointer: {
              label: {
                show: true,
                backgroundColor: '#fff',
                color: '#556677',
                borderColor: 'rgba(0,0,0,0)',
                shadowColor: 'rgba(0,0,0,0)',
                shadowOffsetY: 0
              },
              lineStyle: {
                width: 0
              }
            },

            textStyle: {
              color: '#fff'
            },
            padding: [10, 10]
          },
          grid: {
            top: '15%'
          },
          xAxis: [{
            type: 'category',
            data: this.xData,
            axisLine: {
              lineStyle: {
                color: 'rgba(107,107,107,0.37)', //x轴颜色
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: this.interval,
              textStyle: {
                color: '#fff' //坐标轴字颜色
              },
              margin: 15
            },
            axisPointer: {
              label: {
                padding: [11, 5, 7],
                backgroundColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#fff' // 0% 处的颜色
                  }, {
                    offset: 0.9,
                    color: '#fff' // 0% 处的颜色
                  }, {
                    offset: 0.9,
                    color: '#33c0cd' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#33c0cd' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            },
            boundaryGap: false
          }],
          yAxis: [{
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(107,107,107,0.37)', //y轴颜色
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            },
            splitLine: {
              show: false
            }
          }],
          series: [{
            name: this.year1,
            type: 'line',
            data: this.threeArr,
            symbolSize: 5,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            dataZoom: [{show: false, disabled: true}],
            lineStyle: {
              width: 2,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#9E87FF'
              },
                {
                  offset: 1,
                  color: '#9E87FF'
                }
              ])
            },
            itemStyle: {
              normal: {
                color: colorList[0],
                borderColor: colorList[0]
              }
            }
          }, {
            name: this.year2,
            type: 'line',
            data: this.twoArr,
            symbolSize: 5,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                offset: 0,
                color: '#fe9a8b'
              },
                {
                  offset: 1,
                  color: '#fe9a8b'
                }
              ])
            },
            itemStyle: {
              normal: {
                color: colorList[1],
                borderColor: colorList[1]
              }
            }
          },
            {
              name: this.year3,
              type: 'line',
              data: this.oneArr,
              symbolSize: 5,
              symbol: 'circle',
              smooth: true,
              yAxisIndex: 0,
              showSymbol: false,
              lineStyle: {
                width: 2,
                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                  offset: 0,
                  color: '#73DD39'
                },
                  {
                    offset: 1,
                    color: '#73DD39'
                  }
                ])
              },
              itemStyle: {
                normal: {
                  color: colorList[2],
                  borderColor: colorList[2]
                }
              }
            }
          ]
        }

        if (dataZoom !== 'cancle') {
          this.interval = 2
          option.dataZoom = dataZoom
        } else {
          this.interval = 0
          console.log('cancle')
          option.dataZoom = [{show: false, disabled: true}]
          console.log(option)
        }
        this.barchart = echarts.init(document.getElementById('single-bar-chart'))
        this.barchart.off('click')
        this.barchart.setOption(option)
      },
      getYear () {
        if (this.year) {
          this.year = parseInt(this.year)
          this.year1 = parseInt(this.year)
          this.year2 = parseInt(this.year) - 1
          this.year3 = parseInt(this.year) - 2
        }
        let data = {year: this.year, condition: '1=1'}
        this.xData= ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        this.getInitData(data, 'cancle')
      },
      // getData() {
      //   this.initEchart()
      // },
      init (dataZoom) {
        this.initEchart(dataZoom)
        var _this = this
        // 添加点击事件
        this.barchart.on('click', function (param) {
          // 初始化dataZoom
          _this.xData = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日']
          let dataZoom = [{
            show: false,
            height: 15,
            xAxisIndex: [0],
            bottom: 0,
            start: 0,
            end: 100,
            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: "#d3dee5",
            },
            textStyle: {
              show: false,
              color: "rgba(204,187,225,0.5)",
            },
            fillerColor: "rgba(115,221,255, 0.3)",
            borderColor: "#90979c",

          }, {
            type: "inside",
            show: false,
            height: 15,
            start: 1,
            end: 35
          }]
          let data = {
            year: _this.year, condition: '1=1',month: parseInt(param.name)
          }
          // 判断是否刷新数据
          if (_this.year1.toString().indexOf('月') === -1){
            _this.year1 = _this.year1 + '年' + param.name
            _this.year2 = _this.year2 + '年' + param.name
            _this.year3 = _this.year3 + '年' + param.name
            _this.getInitData(data, dataZoom)
          }
        })
      },
      getInitData (data, dataZoom) {
        let http = new HttpResetClass()
        http.load('post', '/api/af-revenue/logic/getGasAmount', data, {rejectMsg: null, resolveMsg: null}).then((res) => {
          this.threeArr = []
          this.twoArr = []
          this.oneArr = []
          console.log(res.data.data)
          let getData = res.data.data
          for (let i = 0; i < getData.length; i++) {
            console.log('年份' + parseInt(getData[i].month.substr(0, 4)))
            if (parseInt(getData[i].month.substr(0, 4)) === this.year) {
              this.threeArr.push(getData[i].f_pregas / 10000)
            }
            if (parseInt(getData[i].month.substr(0, 4)) === this.year - 1) {
              this.twoArr.push(getData[i].f_pregas / 10000)
            }
            if (parseInt(getData[i].month.substr(0, 4)) === this.year - 2) {
              this.oneArr.push(getData[i].f_pregas / 10000)
            }
            this.init(dataZoom)
          }
        })
      }
    },
    ready () {
      let date = new Date()
      this.year = parseInt(date.getFullYear())
      this.year1 = parseInt(this.year)
      this.year2 = parseInt(this.year) - 1
      this.year3 = parseInt(this.year) - 2
      let data = {
        condition: '1=1',
        year: this.year
      }
      // 获取初始化数据  cancle作为dataZoom显示标志
      this.getInitData(data, 'cancle')
    },
    props: {}
  }
</script>
<style scoped>
  /*div{*/
  /*height: auto;*/
  /*}*/
</style>

