<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,condition) {
    let load = new HttpResetClass()
    load.load('POST','rs/sql/getValveCount',
      {data:{condition:condition}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        let arrparams = []
        let gasdata = []
        for (var i = 0; i < res.data.length; i++) {
          let item = {}
          arrparams[i] = res.data[i].f_operate_status
          item.name = res.data[i].f_operate_status
          item.value = res.data[i].statuscount
          gasdata.push(item)
        }
        self.set(arrparams,gasdata)
      })
  }
  export default {
    props: {
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      },
      condition: {
        type: String,
        default: '1=1'
      }
    },
    data () {
      return {
        xc: ''
      }
    },
    methods: {
      set (arrparams,gasdata) {
        this.xc = echarts.init(document.getElementById('info'))
        this.xc.setOption({
          title: {
            text: '阀门信息统计',
            subtext: '数据截止',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: ''
          },
          legend: {
            x: 'left',
            y: 'top',
            data:arrparams
          },
          series : [
            {
              name: '访问来源',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data: gasdata,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      },
      searchdata (condition) {
        let getGen =getData(this,condition)
        co(getGen)
      }
    },
    watch: {
      'condition' (val) {
        console.log('ddddddd', val)
        this.searchdata(val)
      }
    }
  }
</script>
