<template>
  <div class="index-container">
    <el-card class="data-card">
      <div class="title">{{title}}</div>
      <div class="value">
        <countTo :startVal="0" :endVal="value" :duration="3000"></countTo>
      </div>
      <el-tooltip
        v-if="helpTip"
        class="item"
        :effect="tipType||'dark'"
        :content="helpTip"
        placement="top-end"
      >
        <i class="help el-icon-question"></i>
      </el-tooltip>
    </el-card>
  </div>
</template>

<script>
import countTo from "vue-count-to";
export default {
  name: "",
  data() {
    return {};
  },
  props: ["title", "value", "helpTip", "tipType"],
  components: {
    countTo
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="less" scoped>
.index-container {
  .data-card {
    text-align: center;
    border-radius: 5px;
    position: relative;
    .title {
      font-size: 18px;
      color: #333333;
    }
    .value {
      font-size: 36px;
      color: orange;
      font-weight: bold;
    }
    .help {
      position: absolute;
      right: 15px;
      top: 15px;
      color: #cccccc;
      font-size: 20px;
      cursor: pointer;
      &:hover {
        color: #aaaaaa;
      }
    }
  }
}
</style>