<template>
  <div class="flex relative rounded-xl overflow-hidden border border-solid border-white bg-[rgba(245,245,245,0.60)] mx-10">
    <div class="swiper-containers py-5 w-[1840px]">
      <Swiper
        v-if="chunkList.length"
        rewind
        observer
        observe-parents
        :slides-offset-before="24"
        :slides-offset-after="24"
        observe-slide-children
        :modules="modules"
        style="overflow: visible"
        @swiper="swiperInit"
      >
        <SwiperSlide v-for="item of chunkList" :key="JSON.stringify(item)">
          <div class="grid grid-cols-[repeat(4,436px)] grid-rows-[repeat(2,440px)] grid-flow-col gap-4">
            <ScrollListItem v-for="customer of item" :key="customer.addTime" :customer="customer" />
          </div>
        </SwiperSlide>
      </Swiper>
    </div>
    <div
      class="absolute right-6 bottom-5 w-[436px] h-[440px] px-[138px] pt-16 pb-[148px] bg-white rounded-xl shadow-[0px_4px_10px_0px_rgba(0,0,0,0.06)] flex-col justify-start items-center gap-4 inline-flex"
    >
      <img src="/static/qr.png" class="w-40 h-40" alt="" />
      <div class="text-center text-[#333] text-lg font-normal leading-relaxed">欢迎微信扫码留言<br />期待您的宝贵意见</div>
    </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, 7))

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>
