<template>
  <PageLayout>
    <template #header-title>
      用户管理（{{ total }}）
    </template>
    <template #header-right>
      <q-btn flat dense icon="search" to="/customer/search"></q-btn>
    </template>
    <infinite-scroll :load="load" :list="list" ref="scrollRef">
      <template #prepend>
        <q-item class="bg-white" :to="{path: '/customer/all',t:Date.now()}">
          <q-item-section avatar>
            <UserAvatar color="white" icon="people_alt" class="bg-accent"/>
          </q-item-section>
          <q-item-section>全部用户</q-item-section>
        </q-item>
        <!-- <q-separator inset size="0.5px"/>
        <q-item class="bg-white" :to="{path: '/customer/new'}">
          <q-item-section avatar>
            <UserAvatar icon="add_reaction" color="white" class="bg-red"/>
          </q-item-section>
          <q-item-section>申请进店</q-item-section>
        </q-item> -->
      </template>
      <template v-slot="{ item,index }">
        <q-item-label v-if="index==0 || item.star!=list[index-1].star" class="q-px-md q-pt-md q-pb-sm">{{item.star == 1 ?'星标用户':'下单用户'}}</q-item-label>
        <CustormerItem :item="item" :type="item.star==1?'':1"/>
      </template>
    </infinite-scroll>
    <template #footer>
      <MainPageFooter />
    </template>
  </PageLayout>
</template>
<script setup>
import MainPageFooter from "components/MainPageFooter.vue";
import CustormerItem from "./components/CustomerItem.vue"
import { ref, onMounted, reactive,watch,onActivated } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { api } from "boot/axios";
import { useQuasar } from "quasar";
import { LOTTERY_STATE } from "src/utils/const.js"
import { useInfiniteScroll } from 'src/composables/infiniteScroll';
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useSelfStore();
const total = ref(0)
const { list, refresh, load,scrollRef } = useInfiniteScroll(page=>{
  return api.getCustomerList({
    page,
    type:1,
  }).then((res) => {
    total.value = res.total
    return res
  });
})

let enterTime = route.query.t
onActivated(()=>{
  if(route.query.t!=enterTime){
    enterTime = route.query.t
    refresh()
  }
})
</script>
<style lang="scss" scoped></style>
