<template>
  <div class="statistic">
    <div v-for="(item, index) in tags" :style="{flex: (100 / col) + '%'}" class="item" :key="index">
      <statistic-content :class="item.data.class" v-on="{...item.data.on}" :item="item"/>
      <el-divider class="divider" v-if="(index + 1) % col !== 0 && (index + 1) < tags.length" direction="vertical"></el-divider>
    </div>
  </div>
</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 onClick={this.item.data.on.click} class="statistic-content">
            {this.item.children}
          </div>
        )
      }
    }
  },
  computed: {
    colSpan() {
      return 24 / this.col
    },
  },
  data() {
    return {
      tags: []
    }
  },
  mounted() {
    this.setTags()
  },
  beforeUpdate() {
    this.setTags()
  },
  methods: {
    setTags() {
      this.tags = (this.$slots.default || []).filter(item => item.tag === 'statistic-item').map(item => {
        item.data = item.data || {on: {
          click: () => {}
        }}
        return item
      })
    }
  }
}
</script>
<style lang="less" scoped>
.statistic{
  display: flex;
  text-align: center;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 0;
  .item{
    display: flex;
    position: relative;
  }
  /deep/ .statistic-content{
    width: 100%;
    >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);
      }
    }
  }
  .divider{
    width: 1px;
    font-size: 60px;
    margin: 0;
    position: absolute;
    right: 0;
  }
}
  // .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>
