<template>
  <div class="monitor-brief">
    <img v-if="icon" :src="icon" draggable="false"/>
    <div>
      <p class="label">{{label}}</p>
      <p class="content"><slot /></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%
  >img
    width 0.28rem
    margin-right .1rem
  >div
    display flex
    align-items center
    width 100%
    background rgba(71,179,255,.1)
    padding .05rem .1rem
    .label
      width 1rem
      text-align right
      color $cardFontColor
      border-right .01rem solid @color
      margin-right .1rem
      padding-right .1rem
      font-weight bold
    .count
      font-family $font-pang
      font-size 0.18rem
    >span
      font-family $font-pang
</style>
