<script setup lang="ts">
import {
  Tabbar as VanTabbar,
  TabbarItem as VanTabbarItem,
} from 'vant'

const { barList, callbacks } = defineProps<{
  barList?: Array<{ icon: string, text: string, method: string }>
  callbacks?: object
}>()

function handleClick(index) {
  const methodName = (barList[index] as any).method
  callbacks[methodName]()
}
</script>

<template>
  <VanTabbar class="van-bar">
    <VanTabbarItem v-for="(item, index) in barList" :key="index" :icon="(item as any).icon" @click="handleClick(index)">
      {{ (item as any).text }}
    </VanTabbarItem>
  </VanTabbar>
</template>

<style scoped lang="less">
.van-bar {
  height: 8vh;
  background-color: #f7f8fa;
  color: black;
}
.van-tabbar-item:hover {
  color: var(--van-text-color-2);
}
:deep(.van-tabbar-item--active) {
  background-color: #f7f8fa;
  color: black;
}
</style>
