<template>
  <div class="flex relative items-stretch rounded-[10px] bg-[#E9E9E9] mx-10">
    <div class="swiper-container w-[calc(100%-104px)] my-[30px] pl-6">
      <Swiper
        v-if="chunkList.length"
        rewind
        observer
        observe-parents
        observe-slide-children
        :modules="modules"
        style="height: 879px"
        @swiper="swiperInit"
      >
        <SwiperSlide v-for="item of chunkList" :key="JSON.stringify(item)">
          <div class="grid grid-cols-[repeat(3,556px)] grid-rows-[repeat(2,430px)] grid-flow-col gap-4">
            <ScrollListItem v-for="customer of item" :key="customer.addTime" :customer="customer" />
          </div>
        </SwiperSlide>
      </Swiper>
    </div>
    <div class="flex shrink-0 flex-col items-center w-[104px] rounded-[10px] bg-[#C70082] pt-[56px]">
      <img src="../../assets/images/arrow.svg" alt="" />
      <p class="text-24 text-white pt-4 tb tracking-[10px]">请在右边的写字台书写您的心声和建议吧</p>
      <i class="text-20 text-white">!</i>
    </div>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, computed } from 'vue'
import { chunk } from 'lodash-es'
import ScrollListItem from '@/components/ScrollListItem/ScrollListItem.vue'
import SwiperCore, { Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'

import 'swiper/css'

const modules = [Autoplay]
SwiperCore.use(modules)

type Props = {
  mallCode: string
  customerList: Customer[]
}

const props = withDefaults(defineProps<Props>(), {
  mallCode: '',
  customerList: () => []
})

const chunkList = computed(() => chunk(props.customerList, 6))

const swiper = shallowRef()

function swiperInit(_swiper: any) {
  swiper.value = _swiper
}

function scroll() {
  swiper.value?.slideTo(0)
}

defineExpose({
  scroll
})
</script>

<style>
.tb {
  writing-mode: tb;
}
.fadeInRight {
  animation: fade-in-right 1s infinite;
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
</style>
