<template>
  <div class="data-module">
    <div class="module-header">
      <h3>系统资源监控</h3>
      <span class="system-time">{{ currentTime }}</span>
    </div>
    <div class="module-body">
      <div class="system-resources">
        <div
          v-for="(resource, index) in resourceList"
          :key="index"
          class="resource-item"
        >
          <span class="resource-label">{{ resource.label }}</span>
          <div class="resource-bar-container">
            <div
              class="resource-bar"
              :class="resource.barClass"
              :style="{ width: resource.value + '%' }"
            ></div>
          </div>
          <span class="resource-value">{{ resource.value + "%" }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SystemLoad",
  props: {
    currentTime: {
      type: String,
      default: "",
    },
    resourceList: {
      type: Array,
      default: () => [
        {
          label: "CPU使用率",
          value: 42,
          barClass: "cpu-bar",
        },
        {
          label: "内存使用率",
          value: 68,
          barClass: "mem-bar",
        },
        {
          label: "磁盘使用率",
          value: 35,
          barClass: "disk-bar",
        },
      ],
    },
  },
};
</script>

<style  lang="scss" scoped>
/* 组件样式将从主页面继承 */
// 数据模块通用样式
.data-module {
  background: rgba(0, 20, 40, 0.85);
  border: 1px solid #005080;
  border-radius: 0.04rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(0.05rem);
  box-shadow: 0 0 0.15rem rgba(0, 100, 200, 0.3);

  &:nth-child(1) {
    height: 2.2rem;
  }

  &:nth-child(2) {
    height: 2.5rem;
  }

  &:nth-child(3) {
    height: 2rem;
  }
}

// 模块头部
.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.12rem 0.16rem;
  background: linear-gradient(to right, #003060, #005090);
  border-bottom: 1px solid #0070b0;

  h3 {
    margin: 0;
    font-size: 0.16rem;
    font-weight: 500;
    color: #00ffcc;
  }

  .refresh-icon,
  .view-more {
    font-size: 0.12rem;
    color: #99ccff;
    cursor: pointer;
  }

  .alarm-count {
    background-color: #ff3333;
    color: #fff;
    padding: 0.02rem 0.08rem;
    border-radius: 0.1rem;
    font-size: 0.12rem;
    font-weight: bold;
  }

  .time-range,
  .chart-type,
  .system-time {
    font-size: 0.12rem;
    color: #66ccff;
  }
}

// 模块内容区
.module-body {
  flex: 1;
  padding: 0.16rem;
  overflow: hidden;
}

// 数据总览样式
.data-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.16rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0.8rem;
}

.stat-label {
  font-size: 0.12rem;
  color: #99ccff;
  margin-bottom: 0.05rem;
}

.stat-value {
  font-size: 0.2rem;
  font-weight: bold;
  color: #ffffff;

  &.online {
    color: #00ff00;
  }
}

.progress-bars {
  margin-top: 0.1rem;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-bottom: 0.08rem;
}

.progress-label {
  font-size: 0.12rem;
  color: #ffffff;
  width: 0.8rem;
}

.progress-container {
  flex: 1;
  height: 0.06rem;
  background: rgba(0, 40, 80, 0.6);
  border: 1px solid #005080;
  border-radius: 0.03rem;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(to right, #00aaff, #00ffcc);
  box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}

.progress-value {
  font-size: 0.12rem;
  color: #00ffcc;
  font-weight: bold;
  width: 0.4rem;
  text-align: right;
}

// 报警列表样式
.alarm-list {
  height: 100%;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0.04rem;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 40, 80, 0.5);
  }

  &::-webkit-scrollbar-thumb {
    background: #0070b0;
    border-radius: 0.02rem;
  }
}

.alarm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem;
  margin-bottom: 0.08rem;
  border-radius: 0.04rem;
  border-left: 3px solid;
  background: rgba(0, 30, 60, 0.7);
  font-size: 0.12rem;

  &.level-1 {
    border-color: #ff3333;
    background: rgba(255, 51, 51, 0.1);
  }

  &.level-2 {
    border-color: #ff9900;
    background: rgba(255, 153, 0, 0.1);
  }

  &.level-3 {
    border-color: #ffff00;
    background: rgba(255, 255, 0, 0.1);
  }
}

.alarm-level {
  font-weight: bold;
  width: 0.35rem;

  .alarm-item.level-1 & {
    color: #ff3333;
  }

  .alarm-item.level-2 & {
    color: #ff9900;
  }

  .alarm-item.level-3 & {
    color: #ffff00;
  }
}

.alarm-content {
  flex: 1;
  color: #ffffff;
}

.alarm-point {
  color: #99ccff;
  width: 0.5rem;
}

.alarm-time {
  color: #66ccff;
  font-size: 0.11rem;
}

// 环境数据样式
.env-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem;
  height: 100%;
}

.env-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 30, 60, 0.7);
  border-radius: 0.04rem;
  border: 1px solid #005080;
  padding: 0.1rem;
}

.env-icon {
  width: 0.3rem;
  height: 0.3rem;
  margin-bottom: 0.08rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.env-icon.temp {
  background-image: url("/static/images/temp-icon.png");
}

.env-icon.humidity {
  background-image: url("/static/images/humidity-icon.png");
}

.env-icon.pressure {
  background-image: url("/static/images/pressure-icon.png");
}

.env-icon.wind {
  background-image: url("/static/images/wind-icon.png");
}

.env-label {
  font-size: 0.12rem;
  color: #99ccff;
  margin-bottom: 0.05rem;
}

.env-value {
  font-size: 0.16rem;
  font-weight: bold;
  color: #00ffcc;
}

// 图表容器
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 1.5rem;
}

// 设备状态列表
.device-status-list {
  height: 100%;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0.04rem;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 40, 80, 0.5);
  }

  &::-webkit-scrollbar-thumb {
    background: #0070b0;
    border-radius: 0.02rem;
  }
}

.device-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem 0;
  border-bottom: 1px solid rgba(0, 100, 200, 0.2);
  font-size: 0.12rem;

  &:last-child {
    border-bottom: none;
  }
}

.device-name {
  color: #ffffff;
  width: 0.8rem;
}

.device-status {
  padding: 0.02rem 0.08rem;
  border-radius: 0.03rem;
  font-size: 0.11rem;
  font-weight: bold;

  &.normal {
    background: rgba(0, 255, 0, 0.2);
    color: #00ff00;
  }

  &.warning {
    background: rgba(255, 153, 0, 0.2);
    color: #ff9900;
  }

  &.offline {
    background: rgba(255, 51, 51, 0.2);
    color: #ff3333;
  }
}

.device-value {
  color: #00ffcc;
  font-weight: bold;
  width: 0.6rem;
  text-align: right;
}

.device-time {
  color: #66ccff;
  font-size: 0.11rem;
}

// 系统资源监控
.system-resources {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.resource-item {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.resource-label {
  font-size: 0.12rem;
  color: #ffffff;
  width: 0.9rem;
}

.resource-bar-container {
  flex: 1;
  height: 0.08rem;
  background: rgba(0, 40, 80, 0.6);
  border: 1px solid #005080;
  border-radius: 0.04rem;
  overflow: hidden;
}

.resource-bar {
  height: 100%;
  box-shadow: 0 0 0.05rem;

  &.cpu-bar {
    background: linear-gradient(to right, #00aaff, #00ffcc);
    box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
  }

  &.mem-bar {
    background: linear-gradient(to right, #ff9900, #ffcc00);
    box-shadow: 0 0 0.05rem rgba(255, 204, 0, 0.7);
  }

  &.disk-bar {
    background: linear-gradient(to right, #00cc66, #00ff99);
    box-shadow: 0 0 0.05rem rgba(0, 255, 153, 0.7);
  }
}

.resource-value {
  font-size: 0.12rem;
  font-weight: bold;
  width: 0.4rem;
  text-align: right;

  &.low {
    color: #00ff00;
  }

  &.medium {
    color: #ffcc00;
  }

  &.high {
    color: #ff3333;
  }
}

// 响应式设计 - 基于1920*1080分辨率的适配
@media (max-width: 1600px) {
  html {
    font-size: 83.3px; // 1600/1920 * 100
  }
}

@media (max-width: 1440px) {
  html {
    font-size: 75px; // 1440/1920 * 100
  }

  .left-modules,
  .right-modules {
    width: 3rem;
  }
}

@media (max-width: 1280px) {
  html {
    font-size: 66.7px; // 1280/1920 * 100
  }

  .left-modules,
  .right-modules {
    width: 2.6rem;
  }
}

// 修复滚动条样式
*::-webkit-scrollbar {
  width: 0.04rem;
  height: 0.04rem;
}

*::-webkit-scrollbar-track {
  background: rgba(0, 40, 80, 0.3);
  border-radius: 0.02rem;
}

*::-webkit-scrollbar-thumb {
  background: #0070b0;
  border-radius: 0.02rem;
}

*::-webkit-scrollbar-thumb:hover {
  background: #0090d0;
}

</style>