<template>
  <PageLayout>
    <infinite-scroll
      :load="load"
      :list="list"
      ref="scrollRef"
      empty=""
      noMore=""
    >
      <template v-slot="{ item, index }">
        <q-item class="bg-white" :key="index" :to="{path:'/shop/lottery/config',query:{title:item.name,id:item.lottery_type.id}}">
          <q-item-section avatar>
            <q-img
              :src="'/statics/lottery/' + item.lottery_type.type + '.png'"
              width="48px"
              height="48px"
              no-spinner
            ></q-img>
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ item.lottery_type.name }}
            <q-badge color="primary" v-if="item.cooperate_lottery">{{item.cooperate_lottery.shop.name}} - 提前{{ item.cooperate_lottery.early_minute }}分钟</q-badge>
            </q-item-label>
            <q-item-label caption>{{ item.description||item.lottery_type.info }}</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-item-label class="text-green text-caption" caption>
              {{ item.opened ? "已开启" : "" }}
              <q-icon name="arrow_forward_ios" color="grey" size="14px" />
            </q-item-label>
          </q-item-section>
        </q-item>
      </template>
    </infinite-scroll>
  </PageLayout>
</template>
<script setup>
import { ref, onMounted, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { api } from "boot/axios";
import { useQuasar } from "quasar";
import { useInfiniteScroll } from "src/composables/infiniteScroll";
// import { isVieTottery } from "src/utils/const";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useSelfStore();
const { list, refresh, load, scrollRef } = useInfiniteScroll((page) => {
  return api
    .getLotterysType({
      page,
    })
    .then((res) => {
      return { data: res };
    });
});
</script>
<style lang="scss" scoped></style>
