<template>
  <div class="container_menu" />
  <ul class="nav nav-tabs m-row">
    <li
      v-for="(item, index) in menus"
      :key="index"
      role="presentation"
      :class="{ active: currentTabIndex === index }"
      @click="menuChanged(index, item.infoWindowNo)"
    >
      <a>{{ item.menuName }}</a>
      <span
        v-show="currentTabIndex !== 0"
        :class="{
          jt: true,
          active: currentTabIndex === index,
        }"
      />
    </li>
    <li class="help-box">
      <span>使用帮助</span>
    </li>
  </ul>
  <InfoWindow
    v-if="infoWindowNo"
    ref="info"
    :info-window-no="infoWindowNo"
    :is-search-widget="false"
  />
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';

const menus = [
  {
    menuName: '首页',
    infoWindowNo: null,
  },
  {
    menuName: '所有资产',
    infoWindowNo: '20240922_095937',
  },
  {
    menuName: '待收货',
    infoWindowNo: '20241021_093505',
  },
  {
    menuName: '待维修',
    infoWindowNo: '20241113_115221',
  },
  {
    menuName: '待转移',
    infoWindowNo: '20241014_105157',
  },
  {
    menuName: '待处置',
    infoWindowNo: '20241113_115346',
  },
];

const router = useRouter();

const infoWindowNo = ref(null);
const currentTabIndex = ref(0);

onMounted(() => {
  if(localStorage.getItem('shortcutMenu')){
    const { menuIndex, windowNo } = JSON.parse(
      localStorage.getItem('shortcutMenu'),
    );
    menuChanged(menuIndex, windowNo);
  }
});

const menuChanged = (index, windowNo) => {
  currentTabIndex.value = index;
  if (windowNo) {
    infoWindowNo.value = windowNo;
  } else {
    router.push('/desktop/dashboard');
  }
};
</script>

<style scoped>
:deep(.flex-container-modal){
  height: calc(100vh - 100px) !important;
}
.nav-tabs > li {
  width: 74px;
  cursor: pointer;
}
.m-row {
  margin-bottom: 0;
}
.nav > li > a {
  padding: 6px 4px;
  text-align: center;
}
.nav-tabs > li > a {
  color: black;
}
.nav-tabs > li.active > a {
  color: #fff;
  border: 1px solid #ddd;
  background-color: #2681cf;
  border-radius: 4px;
  border-bottom: none;
}
.help-box {
  float: right;
  display: flex;
  align-items: center;
  width: 90px;
  color: #277fd0;
  margin-top: 5px;
}
.jt {
  position: absolute;
  top: 33px;
  left: 27px;
  border: 8px solid transparent;
}
.jt.active {
  border-top-color: #277fd0;
}
</style>