<template>
  <div class="allmain">
    <div class="tip">
      <div class="tip1">无人灭火机器人数字孪生后台管理系统</div>
      <div class="tip2">国际花园小区</div>
      <div class="avatar-container" v-if="useAppStore.isCurUserLogin">
        <el-dropdown> 
          <el-avatar shape="square"   src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="toSatffManage">人员管理</el-dropdown-item>
              <el-dropdown-item @click="curUserLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="main">
      <div class="left">
        <div class="left1">
          <div 
            class="menu" 
            @click="menuclick(item)" 
            :class="useAppStoreInstance.num == item.id ? 'active' : ''" 
            v-for="item in menuList"
            :key="item.id"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="menuTo">数字孪生管理</div>
      </div>
      <div class="right">
        <div class="right-content">
          <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>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useAppStore from '../store/module/app';
import { getToken, removeToken} from '../utils/auth'

const router = useRouter();
const route = useRoute();
const useAppStoreInstance = useAppStore();

onMounted(() => {
  if (localStorage.getItem('menu')) {
    useAppStoreInstance.num = localStorage.getItem('menu')
  } else {
    numFn()
  }
})

const toSatffManage = () => {
  router.push({
    path: '/staffManage'
  })
  
  useAppStoreInstance.num = 6
}

const curUserLogout = () => {
  removeToken()
  router.push('/login')
  useAppStoreInstance.isCurUserLogin = false
}

const numFn = () => {
  switch (route.fullPath) {
    case '/home': useAppStoreInstance.num = 1; break;
    case '/buildManage': useAppStoreInstance.num = 2; break;
    case '/uavManage': useAppStoreInstance.num = 3; break;
    case '/fireManage': useAppStoreInstance.num = 4; break;
    case '/fileHistory': useAppStoreInstance.num = 5; break;
    case '/staffManage': useAppStoreInstance.num = 6; break;
  }
}

const menuclick = (row) => {
  localStorage.setItem('menu', row.id)
  useAppStoreInstance.num = 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;
  min-width: 1024px;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #051d39;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.tip {
  width: 100%;
  height: 9vh;
  min-height: 60px;
  background-image: url(../static/image/tip.png);
  background-size: cover;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 20px;
  flex-shrink: 0;
}

.tip1 {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: bold;
  background: linear-gradient(to bottom, #FFFFFF 40%, #96CBFF 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: clamp(28px, 1.2vw, 38px);
  white-space: nowrap;
  margin-right: 20px;
}

.tip2 {
  background-image: url(../static/image/tip_name.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 20px;
  height: 4vh;
  min-height: 30px;
  line-height: 4vh;
  font-size: clamp(16px, 1.5vw, 24px);
  white-space: nowrap;
}

.avatar-container {
  margin-left: auto;
  cursor: pointer;
  margin-right: 10px;
}

.main {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.left {
  width: 280px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background-color: #0a2a4a;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
}

.left1 {
  flex: 1;
  overflow-y: auto;
}

.menu {
  height: 70px;
  min-height: 50px;
  line-height: 70px;
  padding: 0 15px;
  text-align: center;
  cursor: pointer;
  font-size: clamp(14px, 1.2vw, 18px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease;
  position: relative;
}

.menu:hover {
  background: rgba(5, 113, 196, 0.3);
}

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

.menu.active::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: #06b0e1;
}

.menuTo {
  height: 100px;
  min-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;  
  background-image: url(../static/image/shuziluansheng.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 2px 2px 0px 2px;
  padding: 0 20px;
  font-size: clamp(28px, 1.2vw, 38px);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 10px rgba(6, 176, 225, 0.5);
}

.right {
  flex: 1;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #0a1e38;
  position: relative;
}

.right-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
  background: linear-gradient(135deg, rgba(10, 30, 56, 0.8) 0%, rgba(5, 29, 57, 0.9) 100%);
}

/* 滚动条样式 */
.right-content::-webkit-scrollbar {
  width: 6px;
}

.right-content::-webkit-scrollbar-track {
  background: rgba(5, 29, 57, 0.5);
}

.right-content::-webkit-scrollbar-thumb {
  background: rgba(6, 176, 225, 0.5);
  border-radius: 3px;
}

.right-content::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 176, 225, 0.8);
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .left {
    width: 220px;
  }
  
  .menu {
    height: 60px;
    line-height: 60px;
  }
}

@media (max-width: 768px) {
  .allmain {
    min-width: auto;
  }
  
  .main {
    flex-direction: column;
  }
  
  .left {
    width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .left1 {
    display: flex;
    flex-wrap: wrap;
    height: auto;
  }
  
  .menu {
    width: 50%;
    height: 50px;
    line-height: 50px;
  }
  
  .menuTo {
    display: none;
  }
  
  .right {
    width: 100%;
  }
  
  .right-content {
    padding: 15px;
  }
  
  .tip1, .tip2 {
    font-size: 14px;
  }
}
</style>