<script setup lang="ts">

import AreaChart2 from "~/components/Charts/AreaChart2.vue";

const route = useRoute()
const userId=toRef(route.params.id)
</script>

<template>
 <div class="user-info-layout">
   <div class="cpu-chart">
     <AreaChart2  :value-ids="[userId==='all'?'CpuTotalUsage':`CpuUsage-${userId}`]" :value-names="['CPU使用率']" :colors="['#0073f4']" :bg-color="'rgba(0,115,244,0.3)'" :configs="[
            {
              areaStyle:{}
            }
        ]"/>

   </div>
   <div class="memory-chart">
     <AreaChart2  :bg-color="'rgba(38,153,100,0.3)'" :colors="['#269964']" :value-names="['内存使用率']" :value-ids="[userId==='all'?'MemoryTotalUsage':`MemoryUsage-${userId}`]" :configs="[
            {
              areaStyle:{}
            }
        ]"/>
   </div>
   <div class="processes-chart">
     <AreaChart2  :bg-color="'rgba(208,157,209,0.3)'" :colors="['#d09dd1']" :value-names="['进程数']" :value-ids="[`UserProcesses-${userId}`]" :configs="[
            {
              areaStyle:{}
            }
        ]"/>
   </div>
 </div>
</template>

<style scoped lang="scss">
@import "base";
.user-info-layout{
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  gap: $gap*2;
  *{
    @include SC_Font;
  }
}
.cpu-chart {
  border: 4px solid #0073f4;
  border-radius: $radius*2;
  height: 32rem;
  overflow: hidden;
  grid-column: 1/3;
}
.memory-chart {
  border: 4px solid #269964;
  border-radius: $radius*2;
  height: 32rem;
  overflow: hidden;
}
.processes-chart{
  border: 4px solid #d09dd1;
  border-radius: $radius*2;
  height: 32rem;
  overflow: hidden;
}
</style>