<template>
  <div class="allmain">
    <div class="tip">
      <div class="tip1">无人灭火机器人数字孪生后台管理系统</div>
      <div class="tip2">国际花园小区</div>
    </div>
    <div class="main">
      <div class="left">
        <div class="left1">
          <div class="menu" @click="menuclick(item)" :class="num == item.id ? 'active' : ''" v-for="item in menuList"
            :key="item.id">{{ item.name
            }}
          </div>
        </div>
        <div class="menuTo">数字孪生管理</div>
      </div>
      <div class="right">
        <router-view v-slot="{ Component, route }" :key="$route.fullPath">
          <keep-alive>
            <component v-if="!route.meta.link" :is="Component" :key="route.path" />
          </keep-alive>
        </router-view>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
onMounted(() => {
  console.log('加载');
  console.log(route);
  if (localStorage.getItem('menu')) {
    num.value = localStorage.getItem('menu')
  } else {
    numFn()
  }
})
const numFn = () => {
  switch (route.fullPath) {
    case '/home':
      num.value = 1
      break
    case '/buildManage':
      num.value = 2
      break
    case '/uavManage':
      num.value = 3
      break
    case '/fireManage':
      num.value = 4
      break
    case '/fileHistory':
      num.value = 5
      break
    case '/staffManage':
      num.value = 6
      break
  }
}
const num = ref(1)//当前菜单选中项
const menuclick = (row) => {
  localStorage.setItem('menu', row.id)
  num.value = row.id
  router.push(row.path)
}
const menuList = ref([
  {
    name: '工作台',
    id: 1,
    path: '/home'
  },
  {
    name: '建筑管理',
    id: 2,
    path: '/buildManage'
  },
  {
    name: '无人机管理',
    id: 3,
    path: '/uavManage'
  },
  {
    name: '火情管理',
    id: 4,
    path: '/fireManage'
  },
  {
    name: '历史火情',
    id: 5,
    path: '/fileHistory'
  },
  {
    name: '人员管理',
    id: 6,
    path: '/staffManage'
  },
])
</script>
<style scoped>
.allmain {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: #051d39;
  color: #ffffff;
}

.tip {
  width: 100%;
  height: 9vh;
  background-image: url(../static/image/tip.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  overflow: auto;
}

.main {
  display: flex;
  height: 90.5vh;
  width: 100%;
}

.left {
  width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.left1 {
  height: calc(100% - 80px);
}

.menuTo {
  width: 85%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-image: url(../static/image/shuziluansheng.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}

.right {
  width: calc(100% - 280px);
  padding-right: 20px;
  padding-bottom: 15px;
}

.tip1 {
  width: 25vw;
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: bold;
  line-height: 8vh;

  font-style: normal;
  background: linear-gradient(to bottom, #FFFFFF 40%, #96CBFF 100%);
  text-align: center;
  font-size: 24px;
  color: #D5F6FF;
  /* opacity: 0.79; */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  /* border: 1px solid red; */
}

.tip2 {
  width: 12vw;
  height: 4vh;
  text-align: center;
  /* margin-top: 2vh; */
  background-image: url(../static/image/tip_name.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 4vh;
}

.menu {
  height: 70px;
  width: 100%;
  line-height: 70px;
  text-align: center;
  cursor: pointer;
}

.active {
  background: linear-gradient(270deg, rgba(6, 176, 225, 0) 0%, #0571C4 100%);

}
</style>