<template>
  <div class="block-panel-item" :style="getWidth">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ElBlockPanelItem',
  props: {
    borderRightStyle: { // 边框样式
      type: String,
      default: '1px solid #E9EDF1'
    }
  },
  data() {
    return {
      blockLength: 0
    }
  },
  inject: ['$this'],
  mounted() {
    this.blockLength = this.$this.$refs.blockPanelLength.children.length
  },
  computed: {
    getWidth() {
      let percent = 0
      if (this.blockLength > 0) {
        percent = Math.floor((Math.floor(this.$this.$refs.blockPanelLength.clientWidth) - (this.blockLength - 1)) / this.blockLength) + 'px'
      }
      return {
        width: percent + 'px',
        borderRight: this.borderRightStyle
      }
    }
  }
}
</script>