<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-item v-if='data["CHARGE_STUDENT_CHANGE_RATE"]'>
          <span>
            {{ data["CHARGE_STUDENT_CHANGE_RATE"].title }}
            <el-tooltip
              v-if="data['CHARGE_STUDENT_CHANGE_RATE'].desc"
              :content="data['CHARGE_STUDENT_CHANGE_RATE'].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="data['CHARGE_STUDENT_CHANGE_RATE'].percent" />%
          </span>
        </statistic-item>
           <statistic-item v-if='data["ACTIVATION_RATE"]'>
          <span>
            {{ data["ACTIVATION_RATE"].title }}
            <el-tooltip
              v-if="data['ACTIVATION_RATE'].desc"
              :content="data['ACTIVATION_RATE'].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="data['ACTIVATION_RATE'].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 {
        STUDENT_REGISTRATION_NUM: this.data['STUDENT_REGISTRATION_NUM'] || {},

      }
    },
  },
};
</script>

