<template>
  <div class="H5" @mousemove="move" @mouseleave="mouseleave" ref="H5">
      <el-image
        :style="Math.floor(percentage*0.07) === index ? 'display: block' : 'display: none' "
        v-for="(item, index) in hoversList"
        :key="item.url"
        :src="item.url"
        :fit="item.background_mode || 'fill'"
      />
    <div class="inShow">
        <div :style="{'background-color': '#409eff','height': '3px' , 'width': percentage + '%'}"></div>
    </div>
  </div>
</template>

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

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

const hoversList = ref([]);
const percentage = ref(0);
const H5 = ref();
let pc_item = undefined;

hoversList.value = props.item.hoversList || [];

const move = e => {
  if (pc_item) return;
  pc_item = setTimeout(() => {
    let X = e ? e.offsetX : 0;
    X > 184 ? X = 184 : '';
    pc_item = window.clearTimeout(pc_item);
    percentage.value = (X / 184) * 100;
  }, 20);
};

const mouseleave = ()=> {
    percentage.value = 0;
    if(pc_item) pc_item = window.clearTimeout(pc_item)
}

</script>

<style scoped>
.el-image {
  height: 280px;
}
.H5{
    min-height: 300px;
    font-size: 0;
}
.H5,
.H5 * {
  width: 100%;
}

.inShow {
  position: relative;
  font-size: 12px
}
</style>

<style>
.item .inShow {
  display: none;
}

.item:hover .inShow {
  display: block;
}
</style>
