<template>
  <PageLayout>
    <template #header-right>
      <q-btn v-if="!props.isNew" dense flat>
        <q-icon name="sort" class="flip-horizontal" />
        <q-menu>
          <q-list>
            <q-item v-for="item in sortOptions" :key="item.value" clickable="" @click="setSort(item.value)">{{ item.label }}</q-item>
          </q-list>
        </q-menu>
      </q-btn>
    </template>
    <infinite-scroll :load="load" :list="list" ref="scrollRef">
      <template v-slot="{ item }">
        <CustormerItem :item="item" class="q-mt-sm"/>
      </template>
    </infinite-scroll>
  </PageLayout>
</template>
<script setup>
import CustormerItem from "./components/CustomerItem.vue"
import { ref, reactive,onActivated } from "vue";
import { useRoute } from "vue-router";
import { api } from "boot/axios";
import { useInfiniteScroll } from 'src/composables/infiniteScroll';
const route = useRoute()
const props = defineProps({
  isNew: {
    type: Boolean,
    default: false
  }
})
const sortOptions = [{
  label: '按注册时间排序',
  value: 'register'
},{
  label: '按余额排序',
  value: 'balance'
}]
let sort = 'register'

const { list, refresh, load,scrollRef } = useInfiniteScroll((page)=>{
  return api.getCustomerList({
    page,
    sort,
  })
})
function setSort(sortBy){
  sortBy && (sort = sortBy)
  refresh()
}

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