<template>
  <nut-tabbar
    :model-value="userStore.curTabBar"
    class="m-tabbar"
    bottom
    safe-area-inset-bottom
    placeholder
    active-color="var(--color-primary)"
    unactive-color="var(--text-color-1)"
    @tab-switch="handleChange"
  >
    <nut-tabbar-item
      v-for="item in tabbarList"
      :key="item.code"
      :name="item.code"
      :tab-title="item.text"
    >
      <template #icon>
        <view
          v-if="userStore.curTabBar === item.code"
          class="tabbar-icon"
          :class="`${item.icon}-main?mask`"
        />
        <view v-else class="tabbar-icon-inactive" :class="`${item.icon}?mask`" />
      </template>
    </nut-tabbar-item>
  </nut-tabbar>
</template>

<script setup lang="ts">
  import { useUserStore } from '@/stores/modules/userStore'

  defineOptions({
    name: 'MTabBar',
    options: {
      styleIsolation: 'shared',
      virtualHost: true,
    },
  })

  const userStore = useUserStore()
  const tabbarList = ref(userStore.tabBar)

  const handleChange = (data: any) => {
    userStore.setTabBarAction(data.name)
  }
</script>

<style scoped lang="scss">
  .m-tabbar {
    @apply h-50px bg-bg-page;
    :deep(.nut-tabbar) {
      border-radius: 12px 12px 0 0;
      border-top: none;
      .tabbar-icon,
      .tabbar-icon-inactive {
        @apply wh-20px;
      }
    }
  }
  .dark {
    .tabbar-icon-inactive {
      @apply color-white;
    }
  }
</style>
