<template>
  <div class="ui-chart-quota" :class="['is-' + align, 'is-' + size, 'is-' + type]">
    <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)
      }
    },
    size: {
      type: String,
      default: 'large',
      validator(value) {
        return ['large', 'small'].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 {
  color: #666;
}
.ui-chart-quota{
  &.is-primary {
    .ui-chart-quota__target {
      color: #007BFF;
    }
  }
  &.is-large{
    .ui-chart-quota__label {
      height: 32px;
      line-height: 32px;
    }
    .ui-chart-quota__target{
      font-size: 36px;
      height: 46px;
      line-height: 46px;
    }
  }
  &.is-small{
    .ui-chart-quota__label {
      font-size: 12px;
      height: 24px;
      line-height: 24px;
    }
    .ui-chart-quota__target{
      font-size: 18px;
      height: 24px;
      line-height: 24px;
    }
  }
}
</style>
