<template>
  <div
    :style="{
      width: Math.round(attributeJson.baseStyle.w * ratio) + 'px',
      height: Math.round(attributeJson.baseStyle.h * ratio) + 'px',
      left: Math.round(attributeJson.baseStyle.l * ratio) + 'px',
      top: Math.round(attributeJson.baseStyle.t * ratio) + 'px'
    }"
    class="image-list"
    :key="attributeJson.sort">

    <div v-if="hasConfig">
      <div v-entrance class="entrance-con">
        <div :class="['image-warp', animationInObj.type && entranceShow ? enterClass : '']"
          v-show="entranceShow" 
          :style="{animationDuration: `${animationInObj.duration}s`}">
          <!-- 轮播样式 -->
          <div v-hoverAnimate
            v-if="isSwiper" 
            :style="[picStyle, (animationHoverObj.type === 3 && hoverStyleShow? hoverStyle : '')]"
            >
            <div :class="[`swiper-container swiper-container-${sortId}`]">
              <div class="swiper-wrapper" :style="{height: `${(baseStyle.h - (hasScrollBar ?30 : 0)) * ratio}px!important`}">
                <div class="swiper-slide" v-for="carousel in attributeJson.list"
                  :key="carousel.id"
                  :style="{width: `${baseStyle.w/4 * ratio}px`}">
                  <div class="slide-con" :style="{
                    height: `${(baseStyle.h - (hasScrollBar ?30 : 0)) * ratio}px`}">
                    <!-- 图片 -->
                    <img :src="carousel.picList[0]&&carousel.picList[0].resourcePath" alt="">
                    
                    <template v-if="carousel.picList.length!=0 && carousel.popList.length!=0">
                      <hotspot v-on="$listeners" :item="carousel" :ratio="ratio" :envUrl="envUrl"></hotspot>
                    </template>
                  </div>
                 
                </div>

              </div>

              <div v-if="hasSwiperButton" :class="`swiper-button-prev swiper-button-prev-${sortId}`">
                <slot name="swiper-button-prev">
                  <div v-if="indicatorType == 2 || indicatorType == 3"><span class="cms2iconfont iconleft"></span></div>
                </slot>
              </div>
              <div v-if="hasSwiperButton" :class="`swiper-button-next swiper-button-next-${sortId}`">
                <slot name="swiper-button-next">
                  <div v-if="indicatorType == 2 || indicatorType == 3"><span class="cms2iconfont iconright"></span></div>
                </slot>
              </div>

              <!-- 滑动条 -->
              <div v-if="hasScrollBar" :class="`swiper-scrollbar swiper-scrollbar-${sortId}`"></div>
            </div>

            <!-- 边框 -->
            <div class="hover-con" v-if="animationHoverObj.type === 2" :style="[hoverStyle, {opacity: (hoverStyleShow? 1 : 0)}]"></div>
          </div>

          <!-- 非轮播样式 -->
          <div v-else :class="['image-warp', styleType==3 && mode!='pc'?'image-type3':'']" :style="[picStyle,  (animationHoverObj.type === 3 && hoverStyleShow) ? hoverStyle : '']">
            <div
              v-hoverAnimate
              v-for="(item, index) in attributeJson.list"
              :key="index"
              :style="[picItemStyle]"
              class="image-item">
            
              <img :class="{'contain': styleType!=1}" :src="item.picList.length!=0 ? item.picList[0].resourcePath : ''" alt=""/>
              <!-- 边框 -->
              <div class="hover-con" v-if="animationHoverObj.type === 2" :style="[hoverStyle, {opacity: (hoverStyleShow? 1 : 0)}]"></div>
              <!-- 换图 -->
              <img class="hover-image" :src="hoverImage" alt="" v-if="animationHoverObj.type === 5 && hoverImage && hoverStyleShow" />

              
              <div v-if="item.picList.length!=0 && item.popList.length!=0">
                <hotspot v-on="$listeners" :item="item" :ratio="ratio" :envUrl="envUrl"></hotspot>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import imgNavJs from "./imgNav.js";
export default imgNavJs;
</script>

<style lang="scss" scoped>
@import "imgNav";
@import "../animate.scss";
</style>
