<template>
  <el-card
    shadow="hover"
    :body-style="{ paddingLeft: 0, paddingRight: 0 }"
    :class="{ 'card-box': true, [`theme-${theme || 'default'}`]: true }">
    <el-row>
      <el-col :span="10" class="icon">
        <i :class="icon" v-if="icon"></i>
        <span v-else>&nbsp;</span>
      </el-col>
      <el-col :span="14">
        <div class="cat">{{tip}}</div>
        <div class="val">{{val}}</div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: 'statis-card',
  props: [
    'tip',
    'val',
    'icon',
    'theme',
  ]
}
</script>

<style lang="scss" scoped>
.card-box {
  color: #333;
  font-size: 16px;

  .icon {
    font-size: 2em;
    text-align: left;
    line-height: 1.4em;
    text-align: center;
  }

  .cat {
    font-size: 1em;
    line-height: 1.2em;
  }

  .val {
    font-size: 1.5em;
    line-height: 1.2em;
  }
}

.theme-default {
  background-color: #fff;
  color: #333;
}

.theme-primary {
  background-color: #409eff;
  color: #fff;
}

.theme-success {
  background-color: #67c23a;
  color: #fff;
}

.theme-warn {
  background-color: #e6a23c;
  color: #fff;
}

.theme-danger {
  background-color: #f56c6c;
  color: #fff;
}
</style>

