<template>
  <div class="pop-wrap" :style="{left: item.left, top: item.top, width: item.realWidth * ratio+'px' || '100%', height: item.realHeight * ratio+'px' || '100%'}">
    <div :class="`pop-item`" 
      v-for="(ele,index) in item.popList"
      @click="pageClick(ele)"
      :style="{
        width: `${ele.width / 750 * 100 }%`,
        height:`${ele.height / (item.height / proportion) * 100}%`,
        left: `${ele.left / 750 * 100 }%`,
        top: `${ele.top / (item.height /proportion) * 100}%`
      }">
        <div class="product-hover" v-if="ele.product.openHot" @mouseover="mouseover(index)" @mouseleave="mouseLeave">
          <div v-if="ele.product.initImage.length!=0" style="{fontSize: 0}">
            <img :src="hoverIndex == index ?ele.product.hoverImage[0].resourcePath: ele.product.initImage[0].resourcePath" alt="">
          </div>

          <div v-if="hoverIndex == index" class="product-image">
            <img :src="ele.product.imageType == 1 ? productImage[ele.productCode] : ele.product.productImage[0].resourcePath" alt="">
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import hotspotJs from './hotspot.js';
export default hotspotJs;
</script>

<style lang="scss" scoped>
@import 'hotspot';
</style>