<template>
  <van-tabbar v-model="active" :placeholder="true" :route="true" fixed>
    <van-tabbar-item
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :to="item.to"
    >
      {{ 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: "wap-home-o",
    title: "首页",
    to: {
      name: "LeaderIndex"
    }
  },
  {
    icon: "gem-o",
    title: "移动指挥",
    to: {
      name: "MobileControl"
    }
  },
  {
    icon: "user-o",
    title: "通讯录",
    to: {
      name: "AddressBook"
    }
  },
  {
    icon: "user-o",
    title: "我的",
    to: {
      name: "My"
    }
  }
]);

onMounted(() => {
  const mobile_control_status = localStorage.getItem('mobile_control_status') || "0";
  // 动态切换平时态或者应急态
  if(mobile_control_status === "1") {
    tabbarData[1] = {
      icon: "gem-o",
      title: "移动指挥",
      to: {
        name: "MobileControl2"
      }
    }
  }
})
</script>
