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

<script>
export default {
  name: 'WorkChart',
  props: {
    rawdata: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      chartSettings: {
        labelMap: {
          'count': '清洁次数',
          'name': '时间'
        }
      },
      extend: {
        series: {
          label: { show: true, position: 'top' },
          itemStyle: {
            normal: {
              barBorderRadius: [3, 3, 0, 0]
            }
          },
          barMaxWidth: 20
        }
      },
      dataEmpty: false,
      data: {
        columns: ['name', 'count'],
        rows: []
      }
    }
  },
  watch: {
    rawdata(val) {
      this.data.rows = val
      this.findMax(val)
    }
  },
  methods: {
    findMax(data) {
      const maxValue = Math.max.apply(Math, data.map(function(item) { return item.count }))
      if (maxValue < 10) {
        this.extend.yAxis = { max: 10 }
      } else {
        this.extend.yAxis = { max: maxValue + 1 }
      }
    }
  }
}
</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>