<template>
  <div class="monitor-brief">
    <img @click="$emit('icon')" v-if="icon" :src="icon" draggable="false"/>
    <div>
      <p class="label" :style="style">{{label}}</p>
      <count @click.native="$emit('count')" class="count" :style="`font-size:${size};color:${countColor}`" :value="value" :decimal="decimal"/>
      <span v-if="unit" :style="`color:${unitColor}`">{{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,
    },
    countColor: {
      type: String,
      default: '#fff'
    },
    unitColor: {
      type: String,
      default: '#fff'
    },
    size: {
      type: String,
      default: '1.8rem'
    }
  },
  computed: {
    value() {
      return this.count
    },
    style() {
      if (this.labelColor) return {
        color: this.labelColor
      }
    }
  }
}
</script>

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