<template>
  <div class="monitor-brief">
    <img v-if="icon" :src="icon" draggable="false"/>
    <div>
      <p class="label" :style="`color:${labelColor}`">{{label}}</p>
      <count class="count" :style="`font-size:${size};color:${countColor}`" :value="value" :decimal="decimal"/>
      <span v-if="unit">{{unit}}</span>
    </div>
  </div>
</template>

<script>
import count from '../MonitorCount/monitor-count'
export default {
  name: 'MonitorBrief',
  components: {
    count,
  },
  props: {
    icon: {},
    decimal: {
      type: Number,
      default: 0,
    },
    label: {
      type: String,
      default: '',
    },
    count: {
      type: Number,
      default: 0,
    },
    unit: {
      type: String,
      default: '',
    },
    labelColor: {
      type: String,
      default: '#fff'
    },
    countColor: {
      type: String,
      default: '#fff'
    },
    size: {
      type: String,
      default: '0.18rem'
    }
  },
  computed: {
    value() {
      return this.count
    }
  }
}
</script>

<style lang="stylus" scoped>
.monitor-brief
  width 100%
  display flex
  align-items center
  >img
    width 0.28rem
    margin-right .1rem
  >div
    flex 1
    .count
      font-family $font-pang
      font-size 0.18rem
    >span
      font-family $font-pang
</style>
