<template>
  <el-row class="p-r-10">
    <el-col :class="state === 'danger' ? `${icon} dangerBG` : `${icon} normalBG`" class="iconfont f-s-22  fc "
      :span="9"></el-col>
    <el-col :span="unit !== '' ? 9 : 15" class="fb f-s-14 fr">
      {{ val }}
    </el-col>
    <el-col v-if="unit !== ''" :span="6" class="fb f-s-14 fr">
      {{ unit }}
    </el-col>
  </el-row>
</template>

<script>

export default {
  name: 'PublicTag',
  data () {
    return {
    }
  },
  props: {
    icon: {
      type: String,
      default: '',
      required: true,
      deep: true
    },
    val: {
      default: '',
      required: true,
      deep: true
    },
    unit: {
      type: String,
      default: '',
      required: true,
      deep: true
    },
    state: {
      type: String,
      default: 'normal',
      required: true,
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

.el-row {
  border-radius: 5px;
  height: 36px;
  line-height: 36px;
  background-color: rgba($color: $graylight-color, $alpha: 0.5);
  max-width: 185px;
  overflow: hidden;

  .el-col {
    overflow: hidden;
  }

  .normalBG {
    background-color: rgba($color: $success-color, $alpha: 0.5);
  }

  .dangerBG {
    background-color: rgba($color: $danger-color, $alpha: 0.5);
  }
}
</style>
