import { Component, Input, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';


@Component({
  selector: 'app-flowfather',
  templateUrl: './flowfather.component.html',
  styleUrls: ['./flowfather.component.scss'],


})
export class FlowfatherComponent {
  /**
    * 根据@Input传参数组,实现分组效果
    */
  @Input() list: Array<any> = []
  displayList: Array<Array<any>> = []
  constructor() {
    console.log("list contructor", this.list)
  }
  ngOnInit(): void {
    console.log("list ngOnInit", this.list)
    this.displayList = this.convertListToDisplay(this.list)
  }

  /**
   * 排列方式1: 列元素数量优先
   * @desc 根据列数取余
   * 用于列元素高度相差不大的情况下
   * 外层传入的列表,进行分组排列,实现瀑布流
   */
  columnCount = 4
  displayColumnIdList: Array<number> = []
  convertListToDisplay(list: any[]) {
    let displayList: Array<Array<any>> = [[]]
    list.forEach((item: any, index: number) => {
      let colIndex = index % this.columnCount
      if (!displayList[colIndex]) displayList[colIndex] = [] // 空值校验并补全空数组
      displayList[colIndex].push(item)
    })
    this.displayColumnIdList = displayList.map((item, index) => index)
    return displayList
  }
  /**
    * 排列方式2: 列高度填满优先
    * @desc 根据三列最低高度推送元素
    * 用于列元素高度相差较大的情况下
    */
  convertListToDisplayByHeight() {

  }



}