<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="swiper-wrap"
  >

    <div
      v-if=" hasSwiperItem || (bgStyle.status === 1 && bgStyle.picList.length != 0)"
      :style="{backgroundImage: bgStyle.picList.length != 0 ?`url(${bgStyle.picList[0].resourcePath})` : ''}"
      :class="['swiper-con', `swiper-con-${mode}`]"
      v-hoverAnimate
    >
      <div 
        class="entrance-con" 
        v-entrance
        :style="{'--hoverColor': paginationStyle.hoverColor || paginationStyle.color, '--activeColor': paginationStyle.activeColor, '--color': paginationStyle.color, width: `${baseStyle.w* ratio}px`,  height: `${baseStyle.h * ratio}px`}">
        <div 
          :class="[`swiper-container swiper-container-${sortId} swiper-container-${indicatorType}`, animationInObj.type && entranceShow ? enterClass : '']"
          :style="{ animationDuration: `${animationInObj.duration}s` }"
          :id="`mySwiper-${sortId}`" 
          :key="indicatorType"
          v-show="entranceShow">
          <div class="swiper-wrapper">
            <div class="swiper-slide"  v-for="(carousel, index) in list" :key="carousel.sort">
            <div :style="{
                width: `${(baseStyle.w - (styleType == 2 ? 200 : 0)) * ratio}px!important`, 
                height: `${baseStyle.h * ratio}px!important`
              }">
              <!-- 图片 -->
              <img v-if="carousel.type === 1" :src="carousel.picList[0]&&carousel.picList[0].resourcePath" alt="">
              <!-- 视频 -->
              <div class="video-player-con" v-if="carousel.type === 2 && videoShow">
                <myVideoPlayer :sort="new Date().getTime()" :videoInfo="carousel.videoInfo" :autoPlay="carousel.videoInfo.checkedAttr.indexOf('autoPlay') > -1 && activeIndex == index"></myVideoPlayer>

                <!-- 视频热区图片 -->
                <div class="video-hot-image" v-if="carousel.type == 2 && carousel.isVideoHasHot == 1 && carousel.videoHotInfo.picList.length!=0">
                  <img :src="carousel.videoHotInfo.picList[0].resourcePath" alt="">
                  <div class="swiper-hot" v-if="carousel.videoHotInfo.picList.length!=0">
                    <hotspot v-on="$listeners" :item="{realWidth: carousel.realWidth, realHeight: carousel.realHeight, popList: carousel.videoHotInfo.popList, width: carousel.videoHotInfo.picList[0].width, height: carousel.videoHotInfo.picList[0].height}" :ratio="ratio" :envUrl="envUrl"></hotspot>
                  </div>
                </div>
              </div>
            
              <template v-if="carousel.type == 1 && carousel.picList.length!=0">
                <hotspot v-on="$listeners" :item="carousel" :ratio="ratio" :envUrl="envUrl"></hotspot>
              </template>
            </div>
   
            </div>
          </div>

          <!-- 滑动条 -->
          <div v-if="hasScrollBar" class="swiper-scrollbar-own">
            <div class="swiper-scrollbar-drag" :style="{width: `${100 / list.length}%`, left: `${(activeIndex > list.length) ? 0 : (100 / list.length * (activeIndex - 1))}%`}"></div>
          </div>

          <!-- 如果需要分页器 -->
          <div :class="`swiper-pagination swiper-pagination-${sortId} swiper-pagination-${attributeJson.indicatorType}`" v-if="hasSwiperPagination"></div>

          <!-- 如果需要导航按钮 -->
          <div :class="['swiper-button-prev', `swiper-button-prev-${sortId}`]" v-if="hasSwiperButton">
            <slot name="swiper-button-prev">
              <div v-if="indicatorType == 2 || indicatorType == 3"><span :style="pageStyle" class="cms2iconfont iconleft"></span></div>
              <div class="arrow" v-if="indicatorType == 4"><span :style="pageStyle" class="cms2iconfont iconarrow-left"></span></div>
            </slot>
          </div>
          <div :class="['swiper-button-next', `swiper-button-next-${sortId}`]" v-if="hasSwiperButton">
            <slot name="swiper-button-next">
              <div v-if="indicatorType == 2 || indicatorType == 3"><span :style="pageStyle" class="cms2iconfont iconright"></span></div>
              <div class="arrow" v-if="indicatorType == 4"><span :style="pageStyle" class="cms2iconfont iconarrow-right"></span></div>
            </slot>
          </div>
        </div>
      </div>

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

<script>
import swiperItemJs from "./swiperItem.js";
export default swiperItemJs;
</script>

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