<template lang="html">
  <div id="charts">
    <input type="date" v-model="startdate" />至
    <input type="date" v-model="enddate" />
    <div id="usernum{{sid}}" :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()
    load.load('POST','rs/sql/usernum',
      {data: {startDate: self.startdate, endDate: self.enddate}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        self.texttile = '用户数量'
       let arrparams = []
        for (var i = 0; i < res.data.length; i++) {
          arrparams[i] = res.data[i].name
        }
        console.log('看看值',res.data)
        self.set(arrparams,res.data)
      })
  }
  export default {
    title: "用户户数",
    props: {
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      }
    },
    data () {
      return {
        texttile: '',
        xc: '',
        sid: new  Date().getSeconds()
      }
    },
    methods: {
      set (arrparams,pricedata) {
        this.xc = echarts.init(document.getElementById('usernum'+this.sid))
        this.xc.setOption(
        // app.title = '坐标轴刻度与标签对齐',
        {
          title: {
            text: this.texttile + '柱状图',
            subtext: '数据汇总',
            x: 'center'
          },
          color: ['#3398DB'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data : arrparams,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'用户数量',
              type:'bar',
              barWidth: '60%',
              data:pricedata
            }
          ]
        })
      },
      searchdata () {
        let getGen =getData(this)
        co(getGen)
      }
    },
    ready () {
      this.searchdata()
    },
    watch: {
      'startdate' (val) {
        this.searchdata()
      },
      'enddate' (val) {
        this.searchdata()
      }
    }
  }
</script>
