<template lang="html">
  <div id="charts">
    <div id="info" :style="{width:'100%',height:'100%'}"></div>
  </div>
</template>

<script>
  import * as Util from '../../../Util'
  import co from 'co'
  import echarts from 'echarts'
  import { HttpResetClass } from 'vue-client'
  let getData = function * (self) {
    let load = new HttpResetClass()
    console.log('startDate1', self.startdate1)
    console.log('endDate1', self.enddate1)
    console.log('meternumber', self.meternumber)
    let data = {meternumber: self.meternumber, startDate: self.startdate1,
      endDate: self.enddate1}
      // console.log("数据",JSON.stringify({data: data},))
    load.load('POST', 'rs/sql/iot_getNewUserSignal',
      {data: data},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        let arrparams = []
        let handdata = []
        // console.log("查出的数据"+res.data)
        for (var i = 0; i < res.data.length; i++) {
          arrparams[i] = res.data[i].f_signal
          handdata[i] = res.data[i].f_hand_date
          // console.log('数据',res.data[i].f_signal,res.data[i].f_hand_date)

        }
        self.set(arrparams,handdata)
      })
  }
    export default {
      props: {
        startdate1: {
          type: String,
          default: Util.toStandardDateString()
        },
        enddate1: {
          type: String,
          default: Util.toStandardDateString()
        },

        meternumber: {
          type: String,
        },

        signalsign: {
        }
      },
      title: 'signal',
      name: 'signalEcharts',
      data () {
        return {
          xc: ''
        }
      },
      methods: {
        set (arrparams, handdata) {
          let name = ''
          // if(this.groupname === 'year')
          // {
          //   name = '年'
          // } else if (this.groupname === 'month'){
          name = '月'
          // } else if (this.groupname === 'week'){
          //   name = '周'
          // } else {
          //   name = '日'
          // }
          this.xc = echarts.init(document.getElementById('info'))
          this.xc.setOption(
            {
              title: {
                text: '信号趋势图',
                subtext: ''
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: []
              },
              toolbox: {
                show: true,
                feature: {
                  dataView: {show: true, readOnly: false},
                  magicType: {show: true, type: ['line', 'bar']},
                  restore: {show: true},
                  saveAsImage: {show: true}
                }
              },
              calculable: true,
              xAxis: [
                {
                  type: 'category',
                  data: handdata
                }
              ],
              yAxis: [
                {
                  type : 'value'
                }
              ],
              series : [
                {
                  name:'信号',
                  type:'bar',
                  data:arrparams,
                  markPoint : {
                    data : [
                      {type : 'max', name: '最大值'},
                      {type : 'min', name: '最小值'}
                    ]
                  },
                  markLine : {
                    data : [
                      {type : 'average', name: '平均值'}
                    ]
                  }
                }

              ]

            })
        },
        searchdata () {
          let getGen = getData(this)
          co(getGen)
        }
      },
      watch: {
        'startdate1' (val) {
          this.searchdata()
        },
        'enddate1' (val) {
          this.searchdata()
        },
        'signalsign'(val){
          console.log("触发signal")
          if(val) {
            console.log("触发signal,且查数据")
            this.searchdata()
          }
        }
      }
    }
</script>

<style scoped>

</style>
