<template>
  <PageLayout hideHeader>
    <q-header class="bg-white text-black">
      <div class="fit row items-center justify-center  safe-padding-top">
        <q-btn-dropdown class="col"  content-class="fit-width-menu no-border-radius" square  flat :label="sortOptions[sortIdx].label">
          <q-list>
            <q-item v-for="item,idx in sortOptions" :key="item.value" clickable v-close-popup @click="sortIdx=idx">
              <q-item-section>
                <q-item-label>{{ item.label }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-btn-dropdown>
        <q-btn-dropdown class="col"  content-class="fit-width-menu no-border-radius" square flat :label="lotteryTypes[lotteryIdx]?.name">
          <q-markup-table separator="cell" class="text-center text-caption">
            <tbody>
              <tr v-for="i in Math.ceil(lotteryTypes.length/3)" :key="i" v-close-popup>
                <td v-for="j in 3" :key="j" @click="lotteryIdx = (i-1)*3+j-1">{{ lotteryTypes[(i-1)*3+j-1]?.name }}</td>
              </tr>
            </tbody>
          </q-markup-table>
        </q-btn-dropdown>
      </div>
      <q-tabs
        v-model="tab"
        dense
        no-caps
        narrow-indicator
        active-color="primary"
        indicator-color="primary"
      >
        <q-route-tab
        v-for="item,i in tabs" :key="item.filter" :name="i"
        :label="item.name+'('+item.count+')'"
        :to="i===0?route.path:{path:route.path,query:{tab:i}}" replace/>
      </q-tabs>
      <q-tabs
        v-if="tabs[tab]?.child?.length"
        v-model="filterChild"
        no-caps
        dense
        active-color="primary"
        indicator-color="transparent"
        @update:model-value="refresh()"
      >
        <q-tab
          v-for="item in tabs[tab]?.child"
          :ripple="false"
          class="q-px-sm no-focus-helper"
          :name="item.filter"
          :key="item.filter"
        >
          {{ item.name }}({{ item.count }})
        </q-tab>
      </q-tabs>
    </q-header>
    <infinite-scroll :load="load" :list="list" ref="scrollRef" no-more="">
      <template v-slot="{ item, index }">
        <q-item :item="item" :index="index" class="q-mt-sm bg-white" :to="{path:'/order/'+item.order_sn}">
          <q-item-section avatar class="full-height">
            <img width="42" :src="'/statics/lottery/' + item.lottery_type?.type + '.png'"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ item.lottery.name }} {{ item.play_type_name }}
              <q-badge v-if="item.type!=1" color="accent" outline class="q-ml-xs">{{ ORDER_TYPE[item.type] }}</q-badge>
            </q-item-label>
            <q-item-label caption>
              <span class="text-grey">下单用户：</span>{{ item.customer.remark || item.customer.nickname || '匿名' }}
            </q-item-label>
            <q-item-label caption>
              <span class="text-grey">下单时间：</span>{{ item.created_at }}
            </q-item-label>
            <q-item-label caption>
              <span class="text-grey">截至时间：</span>{{ item.odds_close_time||item.odds_early_close_time }}
            </q-item-label>
          </q-item-section>
          <q-item-section side class="column justify-between">
            <q-item-label class="text-red text-weight-bold">{{ formatMoney(item.money) }}元</q-item-label>
            <!-- <template v-if="item.cooperate_id>0"> -->
              {{ LOTTERY_STATE[item.lottery_state]||'' }}
            <!-- </template> -->
            <!-- <template v-else>
              <q-btn v-if="item.lottery_state == 5"
              :disable="store.user.enable_work==0"
              color="primary" dense unelevated="" class="q-px-md">接单</q-btn>
              <q-btn v-else-if="item.lottery_state == 4"
              :disable="store.user.enable_work==0"
              color="primary" dense unelevated="" class="q-px-md">出票</q-btn>
            </template> -->
          </q-item-section>
        </q-item>
      </template>
    </infinite-scroll>
    <template #footer>
      <MainPageFooter />
    </template>
  </PageLayout>
</template>
<script setup>
import MainPageFooter from "components/MainPageFooter.vue";
import { ref, onActivated, reactive, nextTick,watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { api } from "boot/axios";
import { openURL } from "quasar";
import { useInterval } from 'src/composables/Interval';
import { ORDER_TYPE,LOTTERY_STATE } from 'src/utils/const'
import { formatMoney } from 'src/utils/tools'
import { useInfiniteScroll } from 'src/composables/infiniteScroll';
const route = useRoute();
const router = useRouter();
const store = useSelfStore();

const sortOptions = [
  {value:'close_time',label:'截止时间'},
  {value:'money',label:'金额排序'},
  {value:'pay_at',label:'下单时间'}
]
const sortIdx = ref(0)
const lotteryTypes = reactive([])
const lotteryIdx = ref(0)
api.getOrderFilterOptions().then(res=>{
  res.lottery_types.forEach(item=>{
    lotteryTypes.push(item)
  })
})
const tabs = reactive([{filter: 'pending',name:'待接单',count: 0},{filter: 'draft',name:'未出票',count: 0},{filter: 'union',name:'合买',count: 0}])
const tab = ref(route.query.tab||0);
const filterChild = ref('')

const { list, refresh, load,scrollRef,reloadCurrentPage } = useInfiniteScroll((page)=>{
return api.getOrderList({
  // page,
    sort: sortOptions[sortIdx.value].value,
    filter: filterChild.value || tabs[tab.value]?.filter,
    lottery_type_id: lotteryTypes[lotteryIdx.value]?.id
  }).then(res=>{
    res.tabs.forEach((item,i)=>{
      tabs[i] = item
    })
    return {
      data: res.orders
    }
    // res.orders.forEach((item,i)=>{
    //   list[i] = item
    // })
    // if(list.length - res.orders.length>0){
    //   list.splice(res.orders.length,list.length-res.orders.length)
    // }
    // return true
  })
})
useInterval(load)
watch(sortIdx,refresh)
watch(lotteryIdx,refresh)
watch(tab,()=>{
  filterChild.value = tabs[tab.value]?.child?.[0]?.filter??''
  nextTick(refresh)
})
onActivated(()=>{
  let i =  route.query.tab||0
  if(tab.value!= i){
    tab.value = i
    // nextTick( refresh)
  } else {
    reloadCurrentPage()
  }
})
</script>
