<template>
  <PageLayout>
    <infinite-scroll :load="load" :list="list" ref="scrollRef">
      <template #prepend>
        <q-tabs
          v-model="tab"
          no-caps
          dense
          narrow-indicator
          active-color="red"
          indicator-color="red"
          class="bg-white"
        >
          <q-tab v-for="item in tabs" :name="item.bill_type" :label="item.name" :key="item.bill_type" class="col" />
        </q-tabs>
        <q-separator color="grey-3" />
      </template>
      <template v-slot="{ item,index }">
        <q-separator v-if="index" />
        <q-item class="bg-white" :to="{path:'/order/'+item.order_sn}">
          <q-item-section avatar class="col">
            <q-item-label>{{ item.lottery.name}}({{ item.buy_type_name }})</q-item-label>
            <q-item-label class="text-grey">{{ item.play_type_name }}</q-item-label>
          </q-item-section>
          <q-item-section class="text-center col">
            <q-item-label class="text-red">{{ formatMoney(item.money) }}元</q-item-label>
          </q-item-section>
          <q-item-section side class="col">
            <q-item-label>{{ LOTTERY_STATE[item.lottery_state] || item.lottery_state }}</q-item-label>
            <q-item-label class="text-grey" caption>{{ formatDate(item.pay_at) }}</q-item-label>
          </q-item-section>
        </q-item>
      </template>
    </infinite-scroll>
  </PageLayout>
</template>
<script setup>
import { ref, onMounted, reactive,watch,onActivated,nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { api } from "boot/axios";
import { useQuasar } from "quasar";
import { formatDate,formatMoney } from  'src/utils/tools.js'
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 tab = ref(parseInt(route.query.tab || 0))
let customerId = route.params.customerId
const tabs = ref([
  {bill_type:0,name: '全部'},
  {bill_type:4,name: '待出票'},
  {bill_type:3,name: '待开奖'},
  {bill_type:10,name: '已开奖'},
  {bill_type:1,name: '已中奖'}])
  const { list, refresh, load,scrollRef } = useInfiniteScroll((page)=>{
  return api.getCustomerOrders({
    page,
    lottery_state: tab.value,
    customer_id: customerId
  })
})
watch(tab,refresh)

let enterTime = route.query.t
onActivated(()=>{
  if(route.params.customerId!= customerId){
    customerId = route.params.customerId
    tab.value = parseInt(route.query.tab || 0)
    nextTick(refresh)
  }else if(route.query.t!=enterTime){
    refresh()
  }
  enterTime = route.query.t
})
</script>
<style lang="scss" scoped></style>
