<template>
  <div class="waterfull" :style="'height:'+comheight+'px'">
    <div class="v-waterfall-content" id="v-waterfall">
      <div v-for="(img, index) in waterfallList" :key="index" class="v-waterfall-item" :style="{top:img.top+'px',left:img.left+'px',width:waterfallImgWidth+'px',height:img.height}">
        <img :src="img.src" alt="">
        <div class="title">{{img.title}}</div>
        <div class="info">{{img.info}}</div>
        <div class="button">去定制</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "v-waterfall",
  props:{
    goodsList:{
      type: Array,
      default: []
    }
  },
  data() {
    return {
      waterfallList: [],
      imgArr: [],
      // waterfallImgWidth: 100,
      waterfallImgWidth: 186,// 每个盒子的宽度
      // waterfallImgCol: 5,// 瀑布流的列数
      waterfallImgCol: 2,// 瀑布流的列数
      waterfallImgRight: 0,// 每个盒子的右padding
      waterfallImgBottom: 10,// 每个盒子的下padding
      waterfallDeviationHeight: [],
      imgList: [],
      comheight: 200
    }
  },
  watch:{
    goodsList(newVal, oldVal){
      console.log('更新数据', newVal)
      this.calculationWidth();
    }
  },
  created() {
    // 触发入口
    // for (let i = 0; i < this.imgArr.length; i++) {
    //   // this.imgList.push(this.imgArr[Math.round(Math.random() * 8)]);// 图片随机显示
    //   this.imgList.push(this.imgArr[i]);
    // }
  },
  mounted() {
    // this.calculationWidth();
  },
  methods: {
    //计算每个图片的宽度或者是列数
    calculationWidth() {
      let domWidth = document.getElementById("v-waterfall").offsetWidth;
      if (!this.waterfallImgWidth && this.waterfallImgCol) {
        this.waterfallImgWidth = (domWidth - this.waterfallImgRight * this.waterfallImgCol) / this.waterfallImgCol;
      } else if (this.waterfallImgWidth && !this.waterfallImgCol) {
        this.waterfallImgCol = Math.floor(domWidth / (this.waterfallImgWidth + this.waterfallImgRight))
      }
      //初始化偏移高度数组
      this.waterfallDeviationHeight = new Array(this.waterfallImgCol);
      for (let i = 0; i < this.waterfallDeviationHeight.length; i++) {
        this.waterfallDeviationHeight[i] = 0;
      }
      this.imgPreloading()
    },
    //图片预加载
    imgPreloading() {
      let arr = []
      for (let i = 0; i < this.goodsList.length; i++) {
        let aImg = new Image();
        aImg.src = this.goodsList[i].pic;
        aImg.onload = aImg.onerror = (e) => {
          let imgData = {};
          imgData.height = this.waterfallImgWidth / aImg.width * aImg.height;
          imgData.src = this.goodsList[i].pic;
          imgData.title = this.goodsList[i].prodName;// 说明文字（也可以自己写数组，或者封装json数据，都可以，但是前提是你会相关操作，这里不赘述）
          imgData.info = this.goodsList[i].brief;// 说明文字
          arr.push(imgData);
          this.rankImg(imgData);
        }
      }
      this.waterfallList = arr
      for(let i=0;i<this.waterfallList.length;i++){
        this.rankImg(imgData);
      }
      for (let i = 0; i < this.imgList.length; i++) {
        let aImg = new Image();
        aImg.src = this.imgList[i];
        aImg.onload = aImg.onerror = (e) => {
          let imgData = {};
          imgData.height = this.waterfallImgWidth / aImg.width * aImg.height;
          imgData.src = this.imgList[i];
          imgData.title = '标题';// 说明文字（也可以自己写数组，或者封装json数据，都可以，但是前提是你会相关操作，这里不赘述）
          imgData.info = '详情说明：啦啦啦啦啦';// 说明文字
          this.waterfallList.push(imgData);
          this.rankImg(imgData);
        }
      }
    },
    //瀑布流布局
    rankImg(imgData) {
      let {
        waterfallImgWidth,
        waterfallImgRight,
        waterfallImgBottom,
        waterfallDeviationHeight,
        waterfallImgCol
      } = this;
      let minIndex = this.filterMin();
      imgData.top = waterfallDeviationHeight[minIndex];
      imgData.left = minIndex * (waterfallImgRight + waterfallImgWidth) + 5;
      // waterfallDeviationHeight[minIndex] += imgData.height + waterfallImgBottom;// 不加文字的盒子高度
      waterfallDeviationHeight[minIndex] += imgData.height + waterfallImgBottom + 50;// 加了文字的盒子高度，留出文字的地方（这里设置56px）
      console.log(imgData);
    },
    /**
     * 找到最短的列并返回下标
     * @returns {number} 下标
     */
    filterMin() {
      const min = Math.min.apply(null, this.waterfallDeviationHeight);
      this.comheight = Math.max.apply(null, this.waterfallDeviationHeight)+300
      return this.waterfallDeviationHeight.indexOf(min);
    }
  }
}
</script>

<style scoped>
.waterfull{
  width: 100%;
}
.v-waterfall-content {
  /* 主要 */
  width: 100%;
  position: relative;
  //min-height: 1000px;
  /* 次要：设置滚动条，要求固定高度 */
  //overflow-y: auto;
}

.v-waterfall-item {
  /* 主要 */
  float: left;
  position: absolute;

}

.v-waterfall-item img {
  /* 主要 */
  /* width: auto;height: auto; */
  width: 90%;height: auto;
  /* 次要 */
  border-radius: 6px;
}
.title{
  width: 90%;
  font-size: 12px;
  line-height: 20px;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.info{
  width: 90%;
  font-size: 12px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
}

.button{
  width: 50px;
  height: 20px;
  border: 1px solid lightgray;
  font-size: 12px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

</style>
