<script setup lang="ts">
import { getStoreData } from '@/utils/composition';
import { computed } from 'vue';

const kvmSupported = computed(() => {
  return getStoreData('loct', 'kvmspt');
}); 

</script>
<template>
  <div class="home-skeleton">
    <!-- 产品图、设备信息和资源信息 -->
    <div class="product-overview module">
      <el-skeleton direction="vertical" class="picture" animated>
        <template #template>
          <el-skeleton-item class="item server-name" variant="text" />
          <el-skeleton-item class="item server-pic" variant="rect" />
        </template>
      </el-skeleton>
      <el-skeleton direction="vertical" class="product" animated>
        <template #template>
          <el-skeleton-item class="item title" variant="text" />
          <el-skeleton-item
            v-for="index of 4"
            :key="index"
            class="item product-item"
            variant="text"
          />
          <div class="resource">
            <el-skeleton-item class="item title" variant="text" />
            <el-skeleton-item
              v-for="index of 6"
              :key="index"
              class="item resource-item"
              variant="rect"
            />
          </div>
        </template>
      </el-skeleton>
    </div>

    <!-- 性能监控和虚拟控制台 -->
    <div class="monitor-virtual">
      <div class="monitor-overview module" :class="kvmSupported ? '' : 'width-max'">
        <el-skeleton
          direction="vertical"
          class="monitor"
          style="--el-skeleton-circle-size: 100px"
          animated
        >
          <template #template>
            <el-skeleton-item class="item title" variant="text" />
            <el-skeleton-item
              v-for="index of 5"
              :key="index"
              :class="{ 'monitor-gap': index !== 5 }"
              class="item monitor-item"
              variant="circle"
            />
          </template>
        </el-skeleton>
      </div>

      <div class="virtual-overview module" v-if="kvmSupported">
        <el-skeleton direction="vertical" class="virtual" animated>
          <template #template>
            <el-skeleton-item class="item title" variant="text" />
            <el-skeleton-item class="item virtual-item" variant="rect" />
          </template>
        </el-skeleton>
      </div>
    </div>

    <!-- 快捷操作 -->
    <div class="quick-access-overview module">
      <el-skeleton direction="vertical" class="quick-access" animated>
        <template #template>
          <el-skeleton-item class="item title" variant="text" />
          <el-skeleton-item
            v-for="index of 6"
            :key="index"
            class="item quick-access-item"
            variant="rect"
          />
        </template>
      </el-skeleton>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home-skeleton {
  padding: 16px 24px 24px;

  .module {
    display: flex;
    padding: 24px;
    border-radius: 4px;
    background-color: var(--o-bg-color-base);
  }
  .product-overview {
    .picture {
      width: fit-content;

      .server-name {
        height: 24px;
        width: 548px;
      }
      .server-pic {
        width: 548px;
        height: 332px;
        margin-top: 24px;
      }
    }

    .product {
      margin-left: 100px;

      .title {
        width: 588px;
        margin-bottom: 16px;
      }
      .product-item {
        width: 1097px;
        height: 18px;
        margin-bottom: 24px;
      }

      .resource {
        margin-top: 48px;

        .resource-item {
          display: inline-block;
          width: calc((100% - 37px * 7) / 6);
          height: 104px;
          margin-right: 37px;
        }
      }
    }
  }

  .monitor-virtual {
    display: flex;
    margin-top: 16px;
    height: 334px;
    .monitor-overview {
      width: calc(100% - 380px);
      .title {
        width: 136px;
        margin-bottom: 26px;
      }
      .monitor-item {
        display: inline-block;
        width: calc((81.2%) / 5);
        max-width: 230px;
        aspect-ratio: 1;
        height: auto;
      }
      .monitor-gap {
        margin-right: calc(4.7%);
      }
    }
    .width-max{
      width: 100%;
    }

    .virtual-overview {
      width: 364px;
      margin-left: 16px;
      .title {
        width: 136px;
        margin-bottom: 32px;
      }

      .virtual-item {
        height: 224px;
        margin-top: 16px;
      }
    }
  }

  .quick-access-overview {
    margin-top: 16px;
    width: 100%;
    .title {
      width: 136px;
      margin-bottom: 24px;
    }
    .quick-access-item {
      width: calc((100% - 48px - 35px) / 6);
      height: 56px;
      display: inline-block;
      margin-right: 16px;
      &:last-child {
        margin-right: 0px;
      }
    }
  }

  .item {
    display: block;
    background: var(--o-bg-color-dark);
  }

  .title {
    height: 30px;
  }
}
</style>
