<template>
  <el-row class="stat-container">
    <!-- <dv-border-box-8 :reverse="true" style="height: 74px"> -->
    <div class="stat-border" style="top: -2px"></div>
    <div class="stat-border" style="top: -2px; right: 1px"></div>
    <div class="stat-border" style="bottom: 0; right: 1px"></div>
    <div class="stat-border" style="bottom: 0;"></div>
    <el-col :span="24 / configs.length" class="stat-part" v-for="item in configs" :key="item.title">
      <div class="title">
        <i class="icon" :class="item.icon"></i>
        <span>{{ item.title }}</span>
      </div>
      <div class="stat-count" v-for="(cell, index) in item.data" :key="index">
        <div :class="['hover', { active: activePlateform === index }]" v-if="item.title === '平台情况' && item.type === 'COUNT'" @click="plateformClick(index)">
          <div>{{ cell.title }}</div>
          <div class="number" :class="cell.className" :style="cell.style">{{ cell.value }} {{ cell.unit }}</div>
        </div>
        <div v-else>
          <div>{{ cell.title }}</div>
          <div class="number" :class="cell.className" :style="cell.style">{{ cell.value }} {{ cell.unit }}</div>
        </div>
        <div v-if="item.type === 'PROGRESS'">
          <div :style="item.titleStyle">{{ cell.title }}</div>
          <div class="progress-wrap">
            <Progress :used="cell.used" :total="cell.total" :unit="cell.unit" :color="cell.color"></Progress>
          </div>
        </div>
      </div>
    </el-col>
    <!-- </dv-border-box-8> -->
  </el-row>
</template>
<script>
import Progress from 'components/progress'
export default {
  components: { Progress },
  props: {
    configs: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activePlateform: ''
    }
  },
  methods: {
    plateformClick(index) {
      let isPublic
      if (this.activePlateform === index) {
        this.activePlateform = ''
        isPublic = null
      } else {
        this.activePlateform = index
        isPublic = index === 1
      }
      this.$emit('plateformClick', isPublic)
    }
  }
}
</script>
<style lang="scss" scoped>
.hover {
  cursor: pointer;
  padding-left: 5px;
  &:hover {
    background: #161c5f;
  }
  &.active {
    background: #161c5f;
  }
}
.stat-container {
  position: relative;
  height: 74px;
  width: 100%;
  background: url('~assets/img/stat_bg.png');
  border-bottom: 1px solid #0391d8;
  border-top: 1px solid #0391d8;
  margin: 10px 0;
  .stat-border {
    position: absolute;
    width: 14px;
    height: 2px;
    background: #009ce0;
  }
  .stat-part {
    display: flex;
    align-items: center;
    color: #fff;
    height: 72px;
    overflow: hidden;
    .stat-count {
      font-size: 17px;
      flex: 1;
      padding-left: 20px;
      padding-right: 10px;
      .number {
        font-size: 25px;
        font-weight: bold;
        &.lgreen {
          color: #42edf8;
        }
        &.green {
          color: #39db3c;
        }
        &.purple {
          color: #b34ef9;
        }
        &.yellow {
          color: #ffc400;
        }
      }
    }
    .progress-wrap {
      margin-top: 10px;
    }
    .title {
      color: #fff;
      height: 68px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 17px;
      width: 140px;
      background: #1b3c88;
      .icon {
        font-size: 28px;
        margin-right: 5px;
      }
      span {
        max-width: 90px;
      }
    }
  }
}
</style>
