<template>
  <div
    class="entrance-con"
    :style="{ '--hoverColor': paginationStyle.hoverColor || paginationStyle.color, '--activeColor': paginationStyle.activeColor, '--color': paginationStyle.color }">
    <div
      :class="[`swiper-container swiper-container-${recordId} swiper-container-${indicatorType}`]"
      :id="`mySwiper-${recordId}`"
      :key="indicatorType">
      <div class="swiper-wrapper">
        <div
          :class="['swiper-slide', {'slide-auto': widthStyle.type == 1 || centeredSlides}]"
          v-for="(carousel, index) in list"
          :key="carousel.sort">
          <div 
            class="slide-con" 
            :style="[backStyle(index), {
              width: widthStyle.type == 1 ? `${carousel.slideWidth * ratio}px` : backStyle(index).width
            }]">
            <singleLayout v-bind="$attrs" v-on="$listeners" :layOutData="carousel" :ratio="ratio" :recordId="recordId" :mode="mode" :canAdjust="widthStyle.type == 2"></singleLayout>
          </div>
        </div>
      </div>

      <!-- 如果需要导航按钮 -->
      <div :class="['swiper-button-prev', `swiper-button-prev-${recordId}`]" v-if="hasSwiperButton">
        <slot name="swiper-button-prev">
          <div class="arrow"><span :style="pageStyle" class="cms2iconfont iconarrow-left"></span></div>
        </slot>
      </div>
      <div :class="['swiper-button-next', `swiper-button-next-${recordId}`]" v-if="hasSwiperButton">
        <slot name="swiper-button-next">
          <div class="arrow"><span :style="pageStyle" class="cms2iconfont iconarrow-right"></span></div>
        </slot>
      </div>
    </div>
  </div>
</template>
<script>
import slideLayoutJs from './slideLayout.js';
export default slideLayoutJs;
</script>
<style lang="scss" scoped>
@import 'slideLayout';
</style>