<template>
  <div class="relative rounded-[10px] bg-[#E9E9E9] mx-10 h-[936px]">
    <ScrollView
      ref="scrollTop"
      pull-up
      :scroll-top="false"
      class="relative w-[1840px]"
      :list="customerList"
      scroll-x
      @scroll-end="scrollEnd"
    >
      <div class="inline-grid grid-rows-[repeat(2,430px)] grid-flow-col gap-4 pl-6 pr-10 whitespace-nowrap pt-[30px] pb-3">
        <ScrollListItem v-for="item of customerList" :key="item.addTime" :customer="item" />
        <div class="flex-center row-span-2" :class="[isFirst ? 'col-end-[56]' : '']">
          <Loading v-if="loading" />
          <div v-if="loaded && customerList.length >= total && customerList.length" class="text-24 text-zinc-900 tb">没有更多数据</div>
        </div>
      </div>
      <img
        v-if="!customerList.length && loaded"
        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
        src="../../assets/images/nodata.svg"
        alt=""
      />
      <div v-if="customerList.length > 4" class="absolute left-1/2 -translate-x-1/2 bottom-5 flex flex-col items-center">
        <img src="../../assets/images/hand.png" class="fadeInRight mb-[6px]" alt="" />
        <p class="text-14 text-[#666]">左右滑动查看更多</p>
      </div>
    </ScrollView>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs, watch } from 'vue'
import { useRootStore } from '@/store/root'
import { getCustomerList } from '@/http/api/base'
import { HTTP_CODE } from '@/enums'
import ScrollView from '@/base/ScrollView/ScrollView.vue'
import ScrollListItem from '@/components/ScrollListItem/ScrollListItem.vue'
import Loading from '@/base/Loading/Loading.vue'

type Props = {
  mallCode: string
}

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

watch(
  () => props.mallCode,
  () => {
    _getCustomerList()
  }
)

const store = useRootStore()
const { config } = toRefs(store)

const customerList = ref<Customer[]>([])
const pageIndex = ref(1)
const loading = ref(false)
const loaded = ref(false)
const isFirst = ref(true)
const total = ref(0)

function scrollEnd() {
  pageIndex.value++
  _getCustomerList()
}

function _getCustomerList() {
  if (loading.value || loaded.value) {
    return
  }
  loading.value = true
  const params = {
    pageIndex: pageIndex.value,
    pageSize: 10,
    mallCode: props.mallCode
  }
  getCustomerList(config.value.smallUrl, params)
    .then(({ code, data }) => {
      if (code === HTTP_CODE.ERR_OK) {
        customerList.value.push(...data.list)
        total.value = data.allCount
      }
    })
    .finally(() => {
      isFirst.value = false
      loading.value = false
      if (customerList.value.length >= total.value) {
        loaded.value = true
      }
    })
}

const scrollTop = ref()

defineExpose({
  scrollTop
})
</script>

<style>
.tb {
  writing-mode: tb;
  letter-spacing: 6px;
}
.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>
