<template>
  <div style="padding-bottom: 1em;" ref="realEle">
    <div class="longpage" @mouseenter="mouseenter" @mouseleave="mouseleave">
      <el-image
        :style="'transform: translateY(' + tfT + 'px)'"
        :src="hoversList[0].url"
        :fit="hoversList[0].background_mode || 'fill'"
        @load="load"
      />
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue';

const props = defineProps({
  item: {
    type: Object, //参数类型
    default: () => {
      return {};
    }, //默认值
    required: true, //是否必须传递
  },
});
const tfT = ref(0);
const realEle = ref();

let longpageTime = undefined;

const hoversList = props.item.hoversList || [];
let max_tfT = 0;

const load = e =>{
    max_tfT = realEle.value.clientHeight - e.target.clientHeight;
}
const mouseenter = () => {
  if (longpageTime) return;
  longpageTime = setInterval(() => {
    if(tfT.value <= max_tfT) return longpageTime = window.clearInterval(longpageTime)
    tfT.value -= 1;
  }, 10);
};
const mouseleave = () => {
  tfT.value = 0;
  if (longpageTime) longpageTime = clearInterval(longpageTime);
};
</script>

<style scoped>
.longpage {
  width: 184px;
  height: 282px;
  overflow: hidden;
}
</style>
