<template>
  <div class="ui-chart-quota" :class="['is-' + align]">
    <div class="ui-chart-quota__label">{{title}}</div>
    <div class="ui-chart-quota__target">
      {{value}}
    </div>
  </div>
</template>
<script>
export default {
  name: 'UiChartQuota',
  props: {
    title: {
      type: String
    },
    value: {
      type: [String, Number]
    },
    align: {
      type: String,
      default: 'left',
      validator(value) {
        return ['left', 'right'].includes(value)
      }
    },
    type: {
      type: String,
      default: 'primary'
    }
  }
}
</script>
<style lang="less">
.ui-chart-quota{
  line-height: 1.5em;
  &.is-right {
    text-align: right;
  }
}
.ui-chart-quota__label {
  height: 32px;
  line-height: 32px;
  color: #666;
}
.ui-chart-quota__target {
  font-size: 36px;
  color: #007BFF;
  height: 46px;
  line-height: 46px;
}
</style>
