<template>
  <el-row :gutter="cols" class="statistic">
    <div v-for="(item, index) in tags" :key="index">
      <el-col :span="span ? span : (index + 1) % col === 0 ? colSpan : colSpan - 1">
        <statistic-content :item="item"></statistic-content>
      </el-col>
      <el-col :key="index" :span="1" v-if="(index + 1) % col !== 0 && (index + 1) < tags.length">
        <el-divider direction="vertical"></el-divider>
      </el-col>
    </div>
  </el-row>
</template>
<script>
export default {
  name: 'statistic',
  props: {
    cols: {
      type: Number,
      default: 24
    },
    col: {
      type: Number,
      default: 4
    },
    span: {
      type: Number,
    }
  },
  components: {
    // 描述内容子组件渲染
    'statistic-content': {
      props: {
        item: Object
      },
      render(h) {
        return (
          <div class="statistic-content">
            {this.item.children}
          </div>
        )
      }
    }
  },
  computed: {
    colSpan() {
      return this.cols / this.col
    },
  },
  data() {
    return {
      tags: []
    }
  },
  mounted() {
    this.setTags()
  },
  beforeUpdate() {
    this.setTags()
  },
  methods: {
    setTags() {
      this.tags = this.$slots.default.filter(item => item.tag === 'statistic-item')
    }
  }
}
</script>
<style lang="less" scoped>
  .statistic{
    padding: 20px 0;
    text-align: center;
    width: 100%;
    margin: auto!important;
    /deep/ .el-icon-edit{
      cursor: pointer;
      color: #14928A;
      font-size: 20px;
    }
    /deep/ .el-col {
      display: flex;
      align-items: center;
      min-height: 60px;
      align-items: center;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    /deep/ .el-col-1{
      font-size: 60px;
    }
    /deep/ .statistic-content{
      >span{
        display: block;
        line-height: 1.8;
        color: rgba(0, 0, 0, .85);
        font-size: 24px;
        &:first-child{
          font-size: 14px;
          font-weight: normal;
          color: rgba(0, 0, 0, .45);
        }
      }
    }
  }
</style>
