<script setup lang="ts">
import UserList from "~/components/ServerUserPage/UserList.vue";
import MiniCard from "~/components/Cards/MiniCard.vue";
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
import Process from "~/pages/host/process.vue";
import NetworkList from "~/pages/host/networkList.vue";

definePageMeta({
  layout: 'main',
  middleware: ['auth']
})
const reload = ref(false)
const pageReload=ref(false)
const route = useRoute()
const mainLayoutStore=useMainLayoutStore()
const userId=computed(()=>route.params.id as string)
watch(()=>userId.value,()=>{
  reload.value=true;
  nextTick(()=>{
    reload.value=false;
  })
})
watch(()=>mainLayoutStore.SelectServer.id,()=>{
  pageReload.value=true;
  setTimeout(()=> {
    pageReload.value = false;
  },400)
})
const processList=ref<string[]>([])
const updateProcessList=(data:string[])=>{
  processList.value=data
}
watch(() => mainLayoutStore.SelectServer.id, () => {
  navigateTo('/serverUser/all')
})
</script>

<template>
  <div class="server-user-layout" v-if="!pageReload">
    <UserList  />
      <XScroll>
        <div class="top"  v-if="!reload&&userId!=='all'">
          <MiniCard :title="`CPU使用率-用户${userId}`" :watcher="`CpuUsage-${userId}`"/>
          <MiniCard :title="`内存总使用率-用户${userId}`" :watcher="`MemoryUsage-${userId}`"/>
          <MiniCard :title="`磁盘总使用率`" watcher="DiskTotalUsage"/>
          <MiniCard :title="`网络接口使用率`" watcher="InterfaceTotalUtilizationPercentage"/>
        </div>
        <div class="top"  v-if="!reload&&userId==='all'">
          <MiniCard title="CPU总使用率" :watcher="`CpuTotalUsage`"/>
          <MiniCard title="内存总使用率" :watcher="`MemoryTotalUsage`"/>
          <MiniCard title="磁盘总使用率" watcher="DiskTotalUsage"/>
          <MiniCard title="网络接口使用率" watcher="InterfaceTotalUtilizationPercentage"/>
        </div>
      </XScroll>
    <div class="box" >
      <NuxtPage  v-if="!reload"/>
    </div>
    <div class="bottom-box">
      <div class="process-box"  v-if="!reload">
        <process :user-name="userId==='all'?'':userId" @update="updateProcessList" />
      </div>
      <div class="net-box"  v-if="!reload">
        <network-list :filter="userId!=='all'" :pids="processList"/>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "base";
.server-user-layout{
  width: 100%;
  display: grid;
  grid-template-columns: minmax(auto,400px) 1fr;
  grid-template-rows: auto 1fr;
  min-height: 800px;
  gap: $gap*2;
}
.top{
  display: flex;
  gap: $gap;
  width: 100%;
  >*{
    flex: 1;
  }
}
.box{
  background: $light-bg-color;
  border-radius: $radius;
  border: $border;
  padding: $padding;
}
.bottom-box{
  border-radius: $radius;
  display: flex;
  gap: $gap*2;
  grid-column: 1/3;
  min-height: 1000px;
}
//窗体小于800
@media screen and (max-width: 1600px) {
  .bottom-box{
    flex-direction: column;
  }
}
.process-box,.net-box{
  flex: 1;
  border: $border;
  border-radius: $radius;
  background: $light-bg-color;
}

</style>