<template>
  <wd-tabbar
    v-model="tabbar"
    fixed
    safeAreaInsetBottom
    placeholder
    :z-index="9"
    active-color="#625EFF"
    inactive-color="#8E8D9D"
    @change="tabbarChange"
  >
    <wd-tabbar-item
      v-for="menu in menus"
      :key="menu.key"
      :name="menu.key"
      :title="menu.title"
      :icon="menu.icon"
    >
      <template #icon>
        <wd-img
          round
          height="50rpx"
          width="50rpx"
          :src="tabbar === menu.key ? menu.activeIcon : menu.icon"
        ></wd-img>
      </template>
    </wd-tabbar-item>
  </wd-tabbar>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';

const props = defineProps<{
  currentMenu: string;
}>();

const tabbar = ref('mine');

const menus = [
  {
    title: '课表',
    key: 'schedule',
    icon: '/static/tabBar/scheduleNo.png',
    activeIcon: '/static/tabBar/schedule.png',
    url: '/pages/inspector/schedule/index',
  },
  {
    title: '学员',
    key: 'student',
    icon: '/static/tabBar/studentNo.png',
    activeIcon: '/static/tabBar/student.png',
    url: '/pages/inspector/student/index',
  },
  {
    title: '我的',
    key: 'mine',
    icon: '/static/tabBar/mineno.png',
    activeIcon: '/static/tabBar/mine.png',
    url: '/pages/inspector/mine/index',
  },
];

watchEffect(() => {
  tabbar.value = menus.find(menu => menu.key === props.currentMenu)?.key ?? 'mine';
});

const tabbarChange = ({ value }) => {
  console.log(value, 'value');
  if (value === props.currentMenu) {
    return;
  }
  const menu = menus.find(menu => menu.key === value);
  uni.redirectTo({
    url: menu.url,
  });
};
</script>
