<template>
  <PageLayout>
    <infinite-scroll :load="load" :list="list" ref="scrollRef">
      <!-- DELAY 暂无合作派奖 -->
      <!-- <template #prepend>
        <div class="q-px-md q-pb-sm bg-white">
          <q-tabs
            v-model="form.filter"
            no-caps
            dense
            square
            active-bg-color="primary"
            active-color="white"
            indicator-color="primary"
            class="text-primary tabs-button text-body3"
          >
            <template v-for="(item, i) in filters" :key="i">
              <q-separator
                v-if="i != 0"
                vertical
                size="0.5px"
                color="primary"
              />
              <q-tab :name="item.filter" class="col-4 q-px-none">
                {{ item.name }}
              </q-tab>
            </template>
          </q-tabs>
        </div>
      </template> -->
      <template v-slot="{ item }">
        <q-item
          class="bg-white q-mt-sm"
          :to="{ path: '/order/' + item.order_sn }"
        >
          <q-item-section avatar>
            <img width="42" :src="'/statics/lottery/' + item.lottery_type?.type + '.png'"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ item.lottery_type.name }} {{ item.play_type_name }}<q-badge v-if="item.shop_cooperate_id>0" color="accent" outline class="q-ml-xs">合作</q-badge></q-item-label>
            <q-item-label class="text-grey" caption="">
              出票时间{{ item.draft_at }}
            </q-item-label>
            <q-item-label class="text-red" caption="">
              实际派奖金额：{{ formatMoney(item.lottery_send_prize) }}
            </q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-item-label>
              <q-btn color="primary" unelevated label="派奖详情" />
            </q-item-label>
          </q-item-section>
        </q-item>
      </template>
    </infinite-scroll>
  </PageLayout>
</template>
<script setup>
import { ref, onMounted, reactive, watch, shallowReactive,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";
import { formatMoney } from "src/utils/tools"
import { useInfiniteScroll } from 'src/composables/infiniteScroll';
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useSelfStore();

const filters = shallowReactive([
  {
    filter: "feat_instore",
    name: "店内派奖"
  },
  {
    filter: "2",
    name: "合作派奖(出票)"
  },
  {
    filter: "3",
    name: "合作派奖(派单)"
  }
]);

// api.getOrderFilterOptions().then(res=>{
//   res.filter.forEach((item,i)=>{
//     filters[i] = item
//   })
// })

const showSearch = ref(false);
const form = reactive({
  filter:'feat_instore',
});
const { list, refresh, load,scrollRef }  = useInfiniteScroll((page)=>{
  return api
    .getSendPrizeList({
      page
    })
})
watch(()=>{
  return form.filter
}, refresh);

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