<template>
  <van-tabbar v-model="active" :placeholder="true" :route="true" fixed class="custom-tabbar">
    <van-tabbar-item
      v-for="(item, index) in tabBarData"
      :key="index"
      :icon="item.icon"
      :to="item.to"
    >
      <template #icon="props">
        <img :src="getImageUrl(props.active ? item.iconActive : item.icon)" alt="" />
      </template>
      {{ item.title }}
    </van-tabbar-item>
  </van-tabbar>
</template>

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

const active = ref(0);
const tabBarData = reactive([
  {
    icon: 'index',
    iconActive: 'indexActive',
    title: "首页",
    to: {
      name: "LeaderIndex"
    }
  },
  {
    icon: 'command',
    iconActive: 'commandActive',
    title: "移动指挥",
    to: {
      name: "MobileControl"
    }
  },
  {
    icon: 'contact',
    iconActive: 'contactActive',
    title: "通讯录",
    to: {
      name: "AddressBook"
    }
  },
  {
    icon: 'mine',
    iconActive: 'mineActive',
    title: "我的",
    to: {
      name: "My"
    }
  }
]);

const getImageUrl = (name) => {
  return new URL(`../../assets/images/tabBar/${name}.png`, import.meta.url).href;
};
onMounted(() => {
  const mobile_control_status = localStorage.getItem('mobile_control_status') || "0";
  // 动态切换平时态或者应急态
  if(mobile_control_status === "1") {
    tabBarData[1] = {
      icon: 'command',
      iconActive: 'command',
      title: "移动指挥",
      to: {
        name: "MobileControl2"
      }
    }
  }
})
</script>
<style lang="scss" scoped>
.custom-tabbar {
  height: 55px !important;
  :deep(.van-tabbar) {
    height: 55px !important;
  }
  :deep(.van-tabbar-item) {
    height: 55px !important;
  }
}
</style>
