<template>
  <section class="buildingToolBar">
    <div class="toolBar">
      <div class="nav" v-for="(op,i) in navs" :key="i" :class="{selected:i==active}" @click="active=i">
        <ai-icon :icon="op.icon"/>
        <div>{{ op.name }}</div>
      </div>
    </div>
    <component :is="currentNav.comp" class="toolPane"/>
  </section>
</template>

<script>
import BuildingInfo from "./toolBar/buildingInfo";
import CommunityOverview from "./toolBar/communityOverview";
// import NearbyGCS from "./toolBar/nearbyGCS";
import RecentEvents from "./toolBar/recentEvents";

export default {
  name: "buildingToolBar",
  components: {RecentEvents, CommunityOverview, BuildingInfo},
  computed: {
    navs() {
      return [
        {icon: 'icondanweiguanli', name: "单元统计", comp: BuildingInfo},
        {icon: 'icondanweiguanli', name: "单元切换", comp: CommunityOverview},
        // {icon: 'icondanweiguanli', name: "网格员", comp: NearbyGCS},
        // {icon: 'icondanweiguanli', name: "近期事件", comp: RecentEvents},
      ]
    },
    currentNav() {
      return this.navs[this.active]
    }
  },
  data() {
    return {
      active: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.buildingToolBar {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .toolBar {
    height: 40px;
    background: #FFFFFF;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 4px;
    width: 400px;
    display: flex;
    gap: 8px;
    box-sizing: border-box;
    align-self: flex-end;

    .nav {
      flex: 1;
      height: 32px;
      color: #3A3A3A;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;

      .AiIcon {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }

      &:hover {
        color: #2266FF;
      }

      &.selected {
        background: #E4F0FF;
        color: #2266FF;
      }
    }
  }

  .toolPane {
    background: #FFFFFF;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
  }
}
</style>
