<template>
  <van-tabbar v-model="props.current" @change="tabChange" z-index="9999">
    <van-tabbar-item  v-for="item in list" :badge="item.badge || ''" :badge-props="{ color: '#FE521F' }">
      <span>{{ item.text }}</span>
      <template #icon="props">
        <img v-if="item.selectedIconPath && item.iconPath"
          :src="props.active ? item.selectedIconPath : item.iconPath" />
        <van-icon v-else :name="item.icon" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
interface TabbarItem {
  text?: string;
  badge?: number; // 红点数
  icon?: string; // vant-icon-class
  iconPath?: string; // 优先 > icon
  selectedIconPath?: string; // 优先 > icon
}
interface Props {
  list: Array<TabbarItem>;
  current?: number;
}
const props = withDefaults(defineProps<Props>(), {
  list: undefined,
  current: 0,
});
const emit = defineEmits(["tabChange"]);

function tabChange(index: number) {
  uni.setNavigationBarTitle({
    title: props.list[index].text || "",
  });
  emit("tabChange", index);
}
</script>

<style lang="scss" scoped>
</style>
