influence/components/home/dashboard/layout03/user/layout03UserWidgetS.vue

<template>
  <div>
    <div class="inner--header--wrap">
      <h2
        v-if="totalPage > 0"
        class="inner--component--title none--after"
      >
        상세 현황 ({{ page }}/{{ totalPage }})
      </h2>
      <h2 v-else>
        상세 현황 
      </h2>
      <p class="inner--component--total">
        Total : <span>{{ props.totalCnt }}</span>
      </p>
    </div>
    <div class="inner--content df--block pt--1rem equip--conmp--wrap">
      <swiper
        :autoplay="{
          delay:20000, 
          disableOnInteraction: false,
        }"
        :loop="true"
        :touch-ratio="0"      
        :space-between="spaceBetween"
        :slides-per-view="1"
        :modules="[Autoplay]"
        @slide-change="onSlideChange"          
      >
        <swiper-slide
          v-for="(slide, index) in props.items"
          :key="`user-swiper-slide-${index}`"
        >
          <div class="tenant--card--wrap">
            <div 
              v-for="(item, idx) in slide"
              :key="`user-swiper-slide-item-${idx}`"
              :class="item.level"
              class="tenant--card"
            >
              <div class="tenant--name">
                <p>{{ item.tenantName }}</p>
              </div>
              <div class="tenant--per--wrap">
                <div class="tenant--per--num">
                  <span>{{ item.perSubscriber }}</span><span>%</span>
                </div>
                <div class="tenant--per--bar">
                  <div class="bg--bar">
                    <div
                      class="fill--bar"
                      style="width: 50%"
                    >
                      {{ toRoundFix(item.curSubscriber, 0) }} / {{ toRoundFix(item.maxSubscriber, 0) }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script setup>
  /***********************
   *     import
   ************************/
  import { useI18n } from "vue-i18n"
  import apiUrl from '@/composables/useApi';
  import useAxios from '@/composables/useAxios';
  import useUtil from '@/composables/useUtil';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Navigation, Pagination, Autoplay } from 'swiper/modules';
  import 'swiper/css';
  import 'swiper/swiper-bundle.css'


  /***********************
   *     plugins inject
   ************************/
  const { $toast, $log, $dayjs, $eventBus } = useNuxtApp()

  // props
  const props = defineProps({
    items: {
      type: Array,
      default: () => []
    }, 
    totalCnt: {
      type: Number, 
      default: 0
    }
  })

  // 참조가능 데이터 설정
  defineExpose({})

  // 발신 이벤트 선언
  const emit = defineEmits([""]);
  const i18n = useI18n();
  /***********************
   *     data & created
   ************************/
  const page = ref(1);
  const totalPage  = computed(() => Math.floor(props.totalCnt / 8) + (props.totalCnt % 8 == 0 ? 0 : 1))

  const remToPx = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
  const spaceRem = 0.62; // 원하는 rem 값
  const spaceRemPx = spaceRem * remToPx();
  const spaceBetween = spaceRemPx;



  /***********************
   *     Methods
   ************************/
  /** Slide onChang Event */
  function onSlideChange(swiper) {
    if(swiper.realIndex != page.value + 1)
      page.value = swiper.realIndex + 1
  }
  const toRoundFix = (data, digit) => parseFloat(data).toFixed(digit);
</script>