<template>
  <div class="water-fall">
    <div class="wf-item" v-for="(item, index) in list" :key="index" :style="item.style" ref="wfitem">
      <comMenu :menuItem="item" :id="'root'+item.id"></comMenu>
    </div>
  </div>
</template>
<script>
// const itemTop = [];
import comMenu from './com-menu'
export default {
  components: {
    comMenu
  },
  props: {
    list: {
      default () {
        return []
      }
    }
  },
  data () {
    return {
      colNum: 3,
      gap: 20,
      lastItem: [],
      wfitemW: '',
      boxW: document.body.clientWidth // 屏幕宽度
    }
  },
  watch: {
    list () {
      this.$nextTick(() => {
        this.setPosition()
      })
    }
  },
  created () {

  },
  mounted () {
    this.windowResize()
    this.$nextTick(() => {
      this.init()
    })
    // $('.bc-wraper').on('resize', a)
    // setTimeout(function () {
    //   console.log('off click')
    //   $('.bc-wraper').off('resize', a)
    // }, 5000)
    // function a () {
    //   console.log(2222)
    // }
  },
  beforeDestroy () {
    window.$(window).off('resize', this.resizeFunc)
  },
  methods: {
    resizeFunc () {
      // console.log(123132)
      this.init()
      this.setPosition()
    },
    windowResize () {
      let _this = this
      // debugger
      window.$(window).on('resize', _this.resizeFunc)
    },
    init () {
      this.boxW = document.querySelector('.water-fall').getBoundingClientRect().width
      this.wfitemW = (this.boxW - this.gap * (this.colNum - 1)) / this.colNum
    },
    setPosition () {
      this.lastItem = []
      // console.log(this.list)
      let nodeList = document.querySelectorAll('.wf-item')
      nodeList.forEach((e, i) => {
        // console.log(e.getBoundingClientRect())
        let itemH = e.getBoundingClientRect().height
        let itemW = this.wfitemW
        let itemT = 0
        let itemL = 0
        // let colIndex = i % 3
        // let rowIndex = Math.floot(i / 3)
        // let itemT = rowIndex*itemW +
        if (i < 3) {
          itemL = i * (itemW + this.gap)
          // console.log(itemL)
          this.lastItem.push({
            t: itemT + itemH + this.gap,
            l: itemL
          })
        } else {
          let minItem = this.findMinTopItem()
          // console.log(minItem)
          itemL = minItem.item.l
          itemT = minItem.item.t
          this.lastItem[minItem.index] = {
            t: itemT + itemH + this.gap,
            l: itemL
          }
        }
        this.list[i].style = {
          width: `${itemW}px`,
          height: `${itemH}px`,
          top: `${itemT}px`,
          left: `${itemL}px`
        }
        // console.log(this.list)
        // this.list[i].style.width =
        // this.list[i].style.height = `${itemH}px`
        // this.list[i].style.top = `${itemT}px`
        // this.list[i].style.left = `${itemL}px`
        // this.list[i].style = Object.assign({}, this.list[i].style)
      })
      // for (let i = 0; i < nodeList.length; i++) {
      //   nodeList[i].style.position = 'absolute'
      //   const domHeight = nodeList[i].clientHeight
      //   let top
      //   let left
      //   let itemH
      //   if (leftH > rightH) {
      //     left = gap * 2 + this.waterfallW
      //     top = rightH + gap
      //     itemH = domHeight
      //     rightH += gap + domHeight
      //   } else {
      //     left = gap
      //     top = leftH + gap
      //     itemH = domHeight
      //     leftH += gap + domHeight
      //   }
      //   this.list[i].top = top
      //   this.list[i].left = left
      //   this.list[i].itemH = itemH
      //   this.list[i].itemW = this.waterfallW
      // }
    },
    findMinTopItem () {
      let item = ''
      let index = ''
      this.lastItem.forEach((e, i) => {
        if (!item) {
          item = e
          index = i
        } else {
          if (item.t > e.t) {
            item = e
            index = i
          }
        }
      })
      return {
        item,
        index
      }
    }
  }
}
</script>
<style lang="scss">

</style>
