<template>
  <div class="box flex justify-center" ref="curcomp">
    <falls :fileList="fileList" :count="acount" :bot="bottomLen" pathname="filepath" v-slot="{ file }">
      <div class="img" @mouseenter="movein(file)" @mouseleave="moveout(file)">
        <n-image width="200px" :imgW="pivW" :src="file.filepath" object-fit="cover" :img-props="{ loading: 'lazy' }" />
        <div class="title" v-if="!ismobile && file.ishow">
          <n-ellipsis :style="{maxWidth: pivW+'px'}" :line-clamp="1">{{ file.filename }}</n-ellipsis>
        </div>
        <div class="tooltip" >
          <div class="block">
            <div class="uploadBy flex items-center">
              <n-ellipsis :line-clamp="1">由{{ file.nickname }}分享</n-ellipsis>
            </div>
          </div>
          <n-tooltip trigger="hover">
            <template #trigger>
              <n-button text size="small" @click="downloadImg(file)">
                <n-icon size="20">
                  <MdDownload />
                </n-icon>
              </n-button>
            </template>
            下载
          </n-tooltip>
        </div>
      </div>
    </falls>
  </div>
</template>

<script setup>
import falls from '@/components/falls.vue';
import { MdDownload } from "@vicons/ionicons4";
import { ref } from 'vue';


const pivW = ref(200);
const prop = defineProps({
  fileList: {
    type: Array,
    default: () => [],
  },
});
const { fileList } = toRefs(prop);
const pw = 200
const acount = ref(2)
const bottomLen = ref(20)
const ismobile = ref(false)



arrCount()
window.addEventListener("resize", arrCount)

function movein(file) {
  if (ismobile.value) return
  file.ishow = true
}
function moveout(file) {
  if (ismobile.value) return
  file.ishow = false
}

async function downloadImg(img) {
  let a = document.createElement("a");
  a.download = img.filename;
  a.href = img.filepath;
  a.target = "_BLANK";
  a.click();
}

function arrCount() {
  // console.log('w=>', document.documentElement.clientWidth);
  const cw = document.documentElement.clientWidth
  if (cw < 1000) {
    acount.value = 2
    pivW.value = 180
    bottomLen.value = 10
    ismobile.value = true
    return
  }
  pivW.value = 200
  bottomLen.value = 20
  ismobile.value = false
  acount.value = Math.floor(cw * 0.95 / (pw + 20))
}
</script>

<style lang="less" scoped>
.img {
  // width: 100%;
  // height: 200px;
  position: relative;
  margin-bottom: 20px;
  box-shadow: @ps;

  .title {
    box-sizing: border-box;
    padding: 0 8px;
    height: 28px;
    line-height: 28px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #00000080;
    position: absolute;
    color: #ddd;
    top: 0px;
    display: flex;
    font-size: 12px;
    justify-content: center;
    cursor: url("@/cursor/link_26x26.png"), pointer !important;
  }

  .tooltip {
    box-sizing: border-box;
    padding: 0 8px;
    height: 28px;
    line-height: 28px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #00000080;
    position: absolute;
    border-radius: 0 0 10px 10px;
    bottom: 0px;
    cursor: url("@/cursor/link_26x26.png"), pointer !important;

    .n-icon {
      color: #fff !important;
    }

    .n-icon:hover {
      color: @purple !important;
    }
  }

  .uploadBy {
    font-size: 12px;
    color: @orange;
  }
}

:deep(.n-space)>div,
.block {
  display: flex;
  justify-content: center;
}

:deep(.n-image) {
  border-radius: 10px;
  box-shadow: @ps;
  display: flex;
  img {
    width: 200px;
    height: auto;
  }
}

.img {
  // margin-right: 20px;
  border-radius: 10px;
  overflow: hidden;
  background-color: transparent;

}

@media screen and (max-width:1000px) {
  :deep(.n-image) {
    img {
      width: 180px;
      height: auto;
    }
  }

  .img {
    // margin-right: 10px;
    margin-bottom: 10px;
  }

}
</style>
