<template>
  <PageLayout>
    <infinite-scroll :load="load" :list="list" ref="scrollRef">
      <template #prepend>
        <!-- DELAY 暂时没有追号，所以没有冻结金额 -->
        <!-- <q-tabs
          v-model="tab"
          no-caps
          dense
          active-color="primary"
          indicator-color="primary"
          class="bg-white"
        >
          <q-tab v-for="item in tabs" :name="item.bill_type" :key="item.bill_type">
            {{ item.name }}
            <div>（{{ formatMoney(item.money) }}）</div>
          </q-tab>
        </q-tabs> -->
        <div v-if="tab == 'total'" class="q-px-md q-pt-md q-pb-xs q-mt-sm bg-white row justify-between">
          店铺用户（{{ total }}）
          <span class="text-red text-weight-bold">用户总额：{{ formatMoney(store.customers.balance) }}</span>
        </div>
      </template>
      <template v-slot="{ item }">
        <q-item v-if="tab == 'total'" class="bg-white" :to="{path:'/customer/'+item.id}">
          <q-item-section avatar>
            <UserAvatar :src="item.avatar_url||item.avatar" size="lg" color="accent"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ item.remark||item.nickname }}</q-item-label>
            <q-item-label class="text-grey">
              <span @click.prevent.stop="item.seePhone=!item.seePhone">
                {{ item.seePhone?item.phone:'******' }}
                <q-icon :name="!item.seePhone?'remove_red_eye':'visibility_off'"/>
              </span>
            </q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-item-label class="text-red">{{ formatMoney(item.balance) }}</q-item-label>
            <q-item-label class="text-grey text-caption" caption>用户余额</q-item-label>
          </q-item-section>
        </q-item>
        <q-item v-else class="bg-white q-mt-sm" :to="{path:'/'}">
          <q-item-section>
            <q-item-label>等待店主出票导致</q-item-label>
            <q-item-label class="text-grey">
              用户下单
            </q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-item-label class="text-grey-7 text-caption" caption>
              等待2单/4元
              <q-icon name="arrow_forward_ios" size="14px" />
            </q-item-label>
          </q-item-section>
        </q-item>
      </template>
    </infinite-scroll>
  </PageLayout>
</template>
<script setup>
import { ref, onMounted, reactive,watch,onActivated } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { formatMoney } from 'src/utils/tools'
import { api } from "boot/axios";
import { useQuasar } from "quasar";
import { useInfiniteScroll } from 'src/composables/infiniteScroll';
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useSelfStore();
const tab = ref('total')
const tabs = ref([{
  bill_type: 'total',
  name: '用户总额',
  money: '12312.23'
},{
  bill_type: 'freeze',
  name: '冻结金额',
  money: '12.00'
}])
const total = ref(0)
const { list, refresh, load,scrollRef } = useInfiniteScroll((page)=>{
  return api.getCustomerList({
    page,
    // bill_type: tab.value
  }).then(res=>{
    total.value = res.total
    return res
  })
},true)
watch(tab,refresh)

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