<template>
  <div class="splitLayout">
    <div
      class="splitItem"
      v-for="num in spaceNum"
      :style="[splitItemStyle(num),showBg?setBg(num):{},setTopSpace(num)]"
      :key="num"
    >
      <el-scrollbar>
        <slot :name="num" />
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import getColorArr from '@/utils/color.js'

export default {
  computed: {
    spaceNum () {
      return this.splitInfo.length + 1
    }
  },
  data () {
    return {
      colors: []
    }
  },
  props: {
    splitInfo: {
      type: Array,
      default: () => []
    },
    showBg: {
      type: Boolean,
      default: false
    },
    topSpace: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    splitItemStyle (num) {
      if (this.splitInfo.length && num < this.spaceNum) {
        return {
          width: this.splitInfo[num - 1] + 'px',
          left: this.setLeft(num) + 'px'
        }
      }
      if (num === this.spaceNum) {
        return {
          left: this.setLeft(num) + 'px',
          right: 0
        }
      }
    },
    setLeft (num) {
      let arr = this.splitInfo.slice(0, num - 1)
      if (arr.length > 0) {
        return arr.reduce((a, b) => a + b, 0)
      } else {
        return 0
      }
    },
    setBg (num) {
      let colors = getColorArr('#999', '#eee', this.spaceNum)
      return {
        backgroundColor: colors[num - 1]
      }
    },
    setTopSpace (num) {
      if (this.topSpace[num - 1]) {
        return {
          top: this.topSpace[num - 1] + 'px',
          bottom: 0
        }
      }
    }
  }
}
</script>

<style lang="scss">
.splitLayout {
  position: absolute;top: 0;right: 0;bottom: 0;left: 0;overflow: hidden;
  .el-scrollbar {
    height: 100%; overflow-x: hidden!important;
  }

  .el-scrollbar .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .el-scrollbar .el-scrollbar__view {
    height: 100%;
  }
}

.splitLayout .splitItem {
  position: absolute; bottom: 0; top: 0;
}

</style>
