<template>
  <n-scrollbar class="bg-[#f8f9fa]" :on-scroll="onScroll" :style="{ maxHeight: contH + 'px' }">
    <div class="w-[40vw] mx-auto my-6 md:w-[80vw]">
      <n-input-group>
        <n-input v-model:value="kw" placeholder="图片名 | 分享人" @keyup.enter.native="search" :style="{ width: '80%' }" />
        <n-button :style="{ width: '20%' }" type="info" @click="search"> 搜索 </n-button>
      </n-input-group>
    </div>
    <div class="list">
      <xPic :fileList="sharelist"></xPic>
    </div>
    <n-back-top :right="20" />
  </n-scrollbar>
</template>

<script setup>
import { usesizeStore } from '@/stores/size.js';
import { onMounted } from "vue";
import xPic from './xPic.vue';



const kw = ref("");
const sharelist = ref([]);
const ps = ref(30), pn = ref(1), total = ref(0)

const size = usesizeStore()
const contH = ref(0)

let reqLock = false // 请求锁
onMounted(() => {
  getSharefile();
  contH.value = document.documentElement.clientHeight - size.menuH - 10
})

function search() {
  sharelist.value = [];
  pn.value = 1
  getSharefile()
}
async function getSharefile() {
  if (reqLock) return
  reqLock = true
  const res = await $http.file.ShareFile({
    keyword: kw.value,
    page_size: ps.value,
    page_num: pn.value,
  });
  total.value = res.total
  res.data.forEach(i => i.ishow = false)
  sharelist.value = res.data;
  setTimeout(() => {
    reqLock = false
  }, 1000)
}


// 触底加载新内容

let lastTop = 0 // 记录上一次滚动距离，方便判断滚动的方向


function onScroll(e) {
  if (reqLock) return
  if (ps.value * pn.value >= total.value) return
  let st = e.target.scrollTop
  let ch = e.target.clientHeight
  let sh = e.target.scrollHeight

  if (st > lastTop) {
    if (st + ch + 200 >= sh) {
      // reqLock = false
      pn.value++
      getSharefile()
    }
  }
  lastTop = st

}

</script>

<style scoped>
.search {
  padding: 0 30%;
}

.empty {
  margin-top: 15%;
}

.space {
  padding: 20px 10px;
}

.space::after {
  height: 0;
  flex: auto;
  content: "";
}
</style>
