<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-route-tab v-for="item in tabs" :name="item.bill_type" :label="item.name" :key="item.bill_type"
          :to="item.bill_type==0?route.path:{path:route.path,query:{tab:item.bill_type}}"
          replace
          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:'/my/order/'+item.order_sn}">
          <div class="column fit">
            <div class="flex row fit">
              <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-3">
                <q-item-label class="text-red" v-if="item.type == 3">{{ formatMoney(item.union_show_piece_money) }}元</q-item-label>
                <q-item-label class="text-red" v-else>{{ formatMoney(item.money) }}元</q-item-label>
              </q-item-section>
              <q-item-section side class="col text-right">
                <q-item-label v-if="item.lottery_state == 1 || item.lottery_state == 7" class="text-red">
                  {{ LOTTERY_STATE[item.lottery_state] || item.lottery_state }}{{
                    formatMoney(
                      item.type == 3
                        ?(item.union_send_prize>0
                          ?item.union_send_prize
                          :item.union_tax_prize)
                        :(item.lottery_send_prize>0
                          ? item.lottery_send_prize
                          : (item.lottery_tax_prize||item.lottery_prize)
                        )
                    )
                  }}
                </q-item-label>
                <q-item-label v-else>{{ 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>
            </div>
            <div v-if="item.lottery_state==6" class="q-mt-sm text-right">
              <q-badge color="orange-1" text-color="brown" multi-line class="q-pa-sm text-left"><b>撤单原因：</b>{{ item.revoke_message }}</q-badge>
            </div>
          </div>
        </q-item>
      </template>
    </infinite-scroll>
  </PageLayout>
</template>
<script setup>
import { ref, onMounted, reactive,watch,onActivated } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate } 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))
const tabs = ref([
  {bill_type:0,name: '全部'},
  {bill_type:5,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.orderBetsRecord({
    page,
    lottery_state: tab.value
  })
})
watch(tab,refresh)

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