<template>
  <div class="flex gap-2 p-3 w-full justify-between h-1 fixed bg-surface-50 dark:bg-surface-950 z-10 top-12">
    <div v-for="i in 8" :class="inidactorClass(i)" style="padding: 2px;">
    </div>
  </div>
  <div class="h-7"></div>
</template>

<script lang="ts" setup>
const router = useRouter()
const route = useRoute()
const rentList = computed(() => {
  let r = router.getRoutes()
  return r.filter(x => { if (x.path = '/rent' && x.children.length > 0 && x.children[0].name?.toString().match(/^rent-/gi)) { return true } }).map(x => { return x.children })[0].sort((a, b) => a.meta.rentStep - b.meta.rentStep)
})

const inidactorClass = (n)=>{
  let a = ['w-full']
  if(n <= route.meta?.rentStep){
      a.push('bg-primary dark:bg-primary')
  }else{
    a.push('bg-gray-300 dark:bg-stone-800')
  }
  return a
}
</script>

<style></style>