<template>
  <Waterfall :list="data" :loadProps="loadProps" :width="250">
    <template #item="{ item, url, index }">
      <div class="item-card">
        <div class="__list_item__">
          <LazyImg :url="item.thumb" style="border-radius: 20px" />
          <slot name="item" :item="item"></slot>
        </div>
        <el-tooltip class="box-item" effect="dark" :content="item.name" placement="top">
          <div class="item-name">{{ item.name }}</div>
        </el-tooltip>
      </div>
    </template>
  </Waterfall>
</template>
<script setup>
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next';
import 'vue-waterfall-plugin-next/dist/style.css';
import loading_img from '@/assets/images/loading.png';
import error_img from '@/assets/images/error.png';
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});
const { data } = toRefs(props);

const loadProps = {
  loading_img,
  error_img,
};
</script>
<style scoped lang="scss">
.__list_item__ {
  position: relative;
  &:hover {
    :deep(.mask) {
      display: flex;
    }
  }
}
.animate__animated {
  animation-fill-mode: both;
  animation-duration: 1s;
}
.animate__animated {
  animation-fill-mode: both;
  animation-duration: 1s;
}
.lazy__img[lazy='loading'] {
  padding: 5em 0;
  width: 48px;
}

.lazy__img[lazy='loaded'] {
  width: 100%;
}

.lazy__img[lazy='error'] {
  padding: 5em 0;
  width: 48px;
}

.item-name {
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
