<template>
  <ve-histogram
    :data="data"
    :settings="chartSettings"/>
</template>



<script>
import { countByToilet, countByDay } from '@/api/statistics'
  export default {
    name: 'BarChart',
    data() {
      this.chartSettings = {
        labelMap: {
          'cleanNum': '清洁次数',
          'staticDate': '时间'
        },
        metrics: ['cleanNum'],
        dimension: ['staticDate']
      }
      return {
        listQuery: {
          staticType: '',
          toiletId: '',
          startTime: '',
          endTime: ''
        },
        data: {
          columns: ['staticDate', 'cleanNum'],
          rows: []
        }
      }
    },
    methods: {
      fetchData(params) {
        this.listQuery = params
        if(this.listQuery.toiletId === '') {
          countByDay(this.listQuery).then(response => {
            this.data.rows = response.data
            console.log(this.data.rows)
          })
        } else {
          countByToilet(this.listQuery).then(response => {
            this.data.rows = response.data
            console.log(this.data.rows)
          })
        }
      },
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-title{
    margin: auto;
    text-align: center;
    margin-top: 15px;
    font-size:20px;
    font-weight:600
  }
  .select-right{
    /*margin-right: 25px;*/
    margin-top: 15px;
    /*width: 200px*/
  }
</style>