<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <div class="box">
          <span class='shape'></span>
          <span>已消耗课时</span>
        </div>

      </div>
      <statistic :col="5" class="statistic" :cols="0">
        <statistic-item
          v-for="(item, key) in items"
          :key="key"
          :class="{ active: active === key }"
          @click="active = key"
        >
          <span>
            {{ item.title }}
            <el-tooltip
              v-if="item.desc"
              :content="item.desc"
              :open-delay="0.3"
              placement="top"
            >
              <i
                style="margin-left: 5px; cursor: pointer"
                class="el-icon-warning-outline"
              />
            </el-tooltip>
          </span>
          <span>
            <count-to :endVal="item.percent" />节
          </span>
        </statistic-item>
      </statistic>
    </el-card>
  </div>
</template>
<script>
import countTo from "vue-count-to";
export default {
  props: ["data"],
  components: {
    "count-to": countTo,
  },
  data() {
    return {
      active:''
    };
  },
  computed: {
    dataEmpty() {
      return !this.chartData.rows.length;
    },
    //         CHARGE_STUDENT_CHANGE_RATE: this.data['CHARGE_STUDENT_CHANGE_RATE'] || {},
    //    ACTIVATION_RATE: this.data['ACTIVATION_RATE'] || {},
    items() {
      return {
        OVER_COURSE_NUM: this.data['OVER_COURSE_NUM'] || {},
        OVER_MUSIC_COURSE_NUM: this.data['OVER_MUSIC_COURSE_NUM'] || {},
        OVER_VIP_COURSE_NUM: this.data['OVER_VIP_COURSE_NUM'] || {},
        OVER_PRACTICE_COURSE_NUM: this.data['OVER_PRACTICE_COURSE_NUM'] || {},
      }
    },
  },
};
</script>
