<template>
  <PageLayout>
    <template #header-title>
      <template v-if="route.query.type == 'chupiao'">
        出票记录
      </template>
      <template v-else-if="route.query.type == 'paijiang'">
        派奖记录
      </template>
      <template v-else>
        中奖记录
      </template>
    </template>
    <infinite-scroll :load="load" :list="list" ref="scrollRef">
      <template v-slot="{ item }">
        <q-item
          v-if="route.query.type == 'chupiao'"
          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.name }}
              <q-badge v-if="item.shop_cooperate_id>0" color="accent" outline>合作</q-badge></q-item-label>
            <q-item-label class="text-grey" caption="">
              {{ item.created_at }}
            </q-item-label>
            <q-item-label caption class="text-grey">
              {{ item.order_sn }}
            </q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-item-label class="text-red">{{ formatMoney(item.money) }}元</q-item-label>
            <q-item-label class="text-grey" caption>{{ LOTTERY_STATE[item.lottery_state] }}</q-item-label>
          </q-item-section>
        </q-item>
        <q-item
          v-else
          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 v-if="route.query.type == 'paijiang'" class="text-red" caption="">
              实际派奖金额：{{ formatMoney(item.lottery_send_prize) }}
            </q-item-label>
            <q-item-label v-else class="text-red" caption="">
              中奖金额：{{ formatMoney(item.lottery_should_send_prize) }}
            </q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-item-label class="text-grey" caption>{{ LOTTERY_STATE[item.lottery_state] }}</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();
let searchParams = {...route.query}
const { list, refresh, load,scrollRef }  = useInfiniteScroll((page)=>{
  return api
    .getReportOrders({
      page,
      ...searchParams
    })
})
function search(params) {
  searchParams = {...route.query}
  refresh()
}
onActivated(()=>{
  if(route.query.type!=searchParams.type ||
  route.query.lottery_type_id!=searchParams.lottery_type_id ||
  route.query.date_start!=searchParams.date_start ||
  route.query.date_end!=searchParams.date_end){
    search()
  }
})
</script>
<style lang="scss" scoped></style>
