<template>
  <q-footer class="bg-white text-grey-6 shadow-2 safe-padding-bottom">
    <q-tabs
      active-color="brand"
      align="justify"
      dense
      no-caps
      indicator-color="transparent"
    >
      <q-route-tab
        v-for="(tab, index) in menu"
        :class="tab.classname"
        :key="index"
        :to="{path:tab.path,query:{t:time}}"
        :icon="tab.icon"
        :label="tab.label"
        :name="tab.path"
        class="col"
        active-class="text-primary q-tab--active"
        replace
        :exact="false"
        no-caps
        dense
        v-ripple
        clickable
        :alert="alertInfo[index]>0?'red':false"
        @click="updateTime"
      />
    </q-tabs>
  </q-footer>
</template>

<script setup>
import { reactive,computed,ref,unref,shallowReactive } from "vue";
import { useRoute } from 'vue-router'
import { useSelfStore } from 'src/stores/self';
const route = useRoute()
const store = useSelfStore()
const menu = shallowReactive([
  { label: "订单管理", icon: "library_books", path: "/home" },
  { label: "用户管理", icon: "people_alt", path: "/customer" },
  { label: "数据统计", icon: "insert_chart", path: "/statistics" },
  { label: "我的", icon: "manage_accounts", path: "/my" }
]);
const alertInfo = computed(()=>{
  return [
    (store.orders.draft_num||0)+(store.orders.pending_num||0),
    0,0,
    (store.orders.win_num||0)+(store.orders.withdraw_num||0)+(store.cooperate.lottery_auditing_num||0)+(store.cooperate.shop_auditing_num||0)
  ]
})

const time = ref(Date.now())
function updateTime(){
  setTimeout(()=>{
    time.value = Date.now()
  },0)
}
</script>
