<template>
  <div class="box flex" ref="curcomp">
    <div class="col" v-for="item in fileArr">
      <div v-for="i in item">
        <slot :file="i"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, watch } from "vue";
const prop = defineProps({
  fileList: {
    type: Array,
    default: () => [],
  },
  count: [String, Number],
  pathname: String,
  bot: {
    type: [String, Number],
    default: 20
  },
  imgW: {
    type: [String, Number],
    default: 200
  },
});
const { fileList, count, pathname, bot, imgW } = toRefs(prop);
const list = reactive({})
const lh = ref([])
const fileArr = ref([])
const originList = ref([])

initList(count.value)

watch(() => count.value, init)

watch(() => fileList.value, initPart, { immediate: true })


function initPart() {
  console.log("initPart", fileList.value);
  if (fileList.value.length < 1) {
    // console.log("query");
    const c = count.value
    initList(c)
  }
  fileArr.value = []
  originList.value = originList.value.concat(fileList.value)
  const c = count.value
  getlist(fileList.value)
  for (let i = 0; i < c; i++) {
    fileArr.value.push(list["file" + i])
  }
}

function init() {
  fileArr.value = []
  // console.log("init",fileList.value);
  const c = count.value
  // console.log("列数--->", c);
  initList(c)
  getlist(originList.value)
  // console.log("list分组情况", list);
  for (let i = 0; i < c; i++) {
    fileArr.value.push(list["file" + i])
  }
}

function initList(c) {
  lh.value = []
  for (let i = 0; i < c; i++) {
    list["file" + i] = []
    lh.value.push(0)
  }
}

function getlist(fl) {
  if (lh.value.length != count.value) return
  fl.forEach(async i => {
    const { height, width } = await getImageSizeByCheck(i[pathname.value])
    const index = getlhmIndex()
    const h = imgW.value * height / width
    list["file" + index].push(i)
    // console.log("^^^",index,h,list["file" + index]);
    lh.value[index] += (h + Number(bot.value))
  })

}

function getImageSize(url) {
  return new Promise(function (resolve, reject) {
    let image = new Image();
    image.onload = function () {
      resolve(image.height);
    };
    image.onerror = function () {
      reject(new Error('error'));
    };
    image.src = url;
  });
}

function getImageSizeByCheck(url) {
  return new Promise(function (resolve, reject) {
    let image = new Image();
    image.src = url;
    let height = 0
    let width = 0
    let timer = setInterval(() => {
      if (image.width > 0 && image.height > 0) {
        height = image.height
        width = image.width
        resolve({ height, width })
        clearInterval(timer)
      }
    }, 40)


  });
}

function getlhmIndex() {
  const min = Math.min(...lh.value)
  // console.log(">>>>>>",lh.value,min,lh.value.findIndex(i => i == min));
  return lh.value.findIndex(i => i == min)
}

</script>

<style lang="less" scoped>
.col:not(:last-child) {
  margin-right: 20px;
}
@media screen and (max-width:1000px) {
  .col:not(:last-child) {
  margin-right: 10px;
}
}
</style>
