<script setup lang="ts">
import { reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { Resolution, useHome, WebStyleType } from '../../hooks/useHome';
import { getStoreData } from '@/utils/composition';

const { getResolution, getWebStyle } = useHome();
const resolution = getResolution;
const webStyle = getWebStyle();
const locale = getStoreData('loct', 'locale');
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => {
      return {};
    },
  },
});
const { data } = toRefs(props);
const router = useRouter();
let resourceData = data?.value?.data;

// 计算资源使用率
function getResourceUsage(current: number, total: number) {
  if (total === 0) {
    return 0;
  }
  return Math.min(100, Math.round((current / total) * 100));
}
</script>

<template>
  <div class="resource-card">
    <div class="resource-header">
      <span v-t="'HOME_RESOURCE_TITLE'" class="title"></span>
    </div>
    
    <!-- 上半部分：处理器、电源、风扇、网卡在位情况，每行一个 -->
    <div class="upper-section">
      <div class="resource-container" @click="router.push('/navigate/system/info/processor')">
        <div class="resource-info">
          <div class="resource-header-row">
            <span v-t="'HOME_PROCESSOR'" class="detail-title"></span>
            <div class="resource-details">
              <span class="current">{{ resourceData.Processor?.CurrentNum || '--' }}</span>
              <span class="slash">/</span>
              <span class="total">{{ resourceData.Processor?.MaxNum || '--' }}</span>
            </div>
          </div>
          <div class="resource-usage">
            <div class="usage-bar">
              <div 
                class="bar-fill" 
                :style="{ width: getResourceUsage(resourceData.Processor?.CurrentNum, resourceData.Processor?.MaxNum) + '%' }"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <div class="resource-container" @click="router.push('/navigate/system/power')">
        <div class="resource-info">
          <div class="resource-header-row">
            <span v-t="'HOME_POWER'" class="detail-title"></span>
            <div class="resource-details">
              <span class="current">{{ resourceData.Power?.CurrentNum || '--' }}</span>
              <span class="slash">/</span>
              <span class="total">{{ resourceData.Power?.MaxNum || '--' }}</span>
            </div>
          </div>
          <div class="resource-usage">
            <div class="usage-bar">
              <div 
                class="bar-fill" 
                :style="{ width: getResourceUsage(resourceData.Power?.CurrentNum, resourceData.Power?.MaxNum) + '%' }"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <div class="resource-container" @click="router.push('/navigate/system/fans')">
        <div class="resource-info">
          <div class="resource-header-row">
            <span v-t="'HOME_FAN'" class="detail-title"></span>
            <div class="resource-details">
              <span class="current">{{ resourceData.Fan?.CurrentNum || '--' }}</span>
              <span class="slash">/</span>
              <span class="total">{{ resourceData.Fan?.MaxNum || '--' }}</span>
            </div>
          </div>
          <div class="resource-usage">
            <div class="usage-bar">
              <div 
                class="bar-fill" 
                :style="{ width: getResourceUsage(resourceData.Fan?.CurrentNum, resourceData.Fan?.MaxNum) + '%' }"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <div class="resource-container" @click="router.push('/navigate/system/info/net')">
        <div class="resource-info">
          <div class="resource-header-row">
            <span v-t="'COMMON_NETWORK'" class="detail-title"></span>
            <div class="resource-details">
              <span class="current">{{ resourceData.Netadapter?.CurrentNum || '--' }}</span>
              <span class="slash">/</span>
              <span class="total">{{ resourceData.Netadapter?.MaxNum || '--' }}</span>
            </div>
          </div>
          <div class="resource-usage">
            <div class="usage-bar">
              <div 
                class="bar-fill" 
                :style="{ width: getResourceUsage(resourceData.Netadapter?.CurrentNum, resourceData.Netadapter?.MaxNum) + '%' }"
              ></div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
    
    <!-- 下半部分：内存和存储信息 -->
    <div class="lower-section">
      <div class="memory-section">
        <h3 v-t="'HOME_MEMORY'" class="section-title"></h3>
        <div class="memory-info">
          <div class="info-item">
            <span class="info-label" v-t="'HOME_HEALTH_CURRENTNUM'"></span>
            <span class="info-value">{{ resourceData.Memory?.CurrentNum || '--' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label" v-t="'HOME_HEALTH_TOTALNUM'"></span>
            <span class="info-value">{{ resourceData.Memory?.MaxNum || '--' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label" v-t="'COMMON_CAPACITY'"></span>
            <span class="info-value">{{ resourceData.Memory?.CapacityGiB || '--' }}GB</span>
          </div>
        </div>
      </div>
      
      <div class="storage-section">
        <h3 v-t="'HOME_STORE'" class="section-title"></h3>
        <div class="storage-info">
          <div class="info-item">
            <span class="info-label" v-t="'OTHER_RAID_CARD'"></span>
            <span class="info-value">{{ resourceData.Storage?.RaidControllerNum || '--' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label" v-t="'HOME_LOGICAL_DISK'"></span>
            <span class="info-value">{{ resourceData.Storage?.LogicalDriveNum || '--' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label" v-t="'HOME_PHYSICAL_DISK'"></span>
            <span class="info-value">{{ resourceData.Storage?.PhysicalDriveNum || '--' }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.resource-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .resource-header {
    margin-bottom: 12px;

    .title {
      font-size: 16px;
      font-weight: bold;
      color: var(--o-text-color-primary);
    }
  }

  .upper-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;

    .resource-container {
      background: #f8f9fa;
      border-radius: 6px;
      padding: 12px;
      transition: all 0.3s ease;
      cursor: pointer;
      border: 1px solid #eaeaea;

      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        background: #edf2ff;
        border-color: #1890ff;
      }

      .resource-info {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .resource-header-row {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .detail-title {
            font-size: 14px;
            font-weight: bold;
            color: var(--o-text-color-primary);
          }

          .resource-details {
            display: flex;
            justify-content: center;
            align-items: baseline;
            gap: 2px;

            .current {
              font-size: 14px;
              font-weight: bold;
              color: #1890ff;
            }

            .slash {
              font-size: 12px;
              color: #999;
            }

            .total {
              font-size: 12px;
              color: #666;
            }
          }
        }

        .resource-usage {
          display: flex;
          align-items: center;
          gap: 8px;

          .usage-bar {
            flex: 1;
            height: 8px;
            background: #eaeaea;
            border-radius: 4px;
            overflow: hidden;

            .bar-fill {
              height: 100%;
              background: linear-gradient(90deg, #1890ff, #40a9ff);
              transition: width 0.3s ease;
            }
          }

          .usage-text {
            font-size: 12px;
            color: #666;
            min-width: 30px;
            text-align: right;
          }
        }
      }
    }
  }

  .lower-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;

    .memory-section,
    .storage-section {
      background: #f8f9fa;
      border-radius: 6px;
      padding: 10px;
      border: 1px solid #eaeaea;

      .section-title {
        font-size: 13px;
        font-weight: bold;
        color: var(--o-text-color-primary);
        margin: 0 0 8px 0;
        padding-bottom: 6px;
        border-bottom: 1px solid #eaeaea;
      }

      .memory-info,
      .storage-info {
        display: flex;
        flex-direction: column;
        gap: 6px;

        .info-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 2px 0;

          .info-label {
            font-size: 11px;
            color: #666;
          }

          .info-value {
            font-size: 12px;
            font-weight: 500;
            color: #333;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1200px) {
  .lower-section {
    grid-template-columns: 1fr;
  }
}
</style>
