<script setup lang="ts">
import { Resolution, useHome } from '../../hooks/useHome';
import SkeletonMonitor from './SkeletonMonitor.vue';
import SkeletonProductInfo from './SkeletonProductInfo.vue';
import SkeletonProductResource from './SkeletonProductResource.vue';
import SkeletonProductPicture from './SkeletonProductPicture.vue';
import SkeletonVirtual from './SkeletonVirtual.vue';
import SkeletonQuickAccess from './SkeletonQuickAccess.vue';
import { getStoreData } from '@/utils/composition';
import { computed } from 'vue';

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


const { getResolution } = useHome();
const resolution = getResolution;
</script>

<template>
  <!-- 正常分辨率  -->
  <template v-if="resolution === Resolution.DEFAULT || resolution === Resolution.MID">
    <div id="homeDetail" class="top-open-container wrapper card">
      <div class="top-container-background"></div>
      <div class="mid-picture inline-wrapper">
        <SkeletonProductPicture />
      </div>
      <div class="mid-product inline-wrapper">
        <SkeletonProductInfo />
      </div>
    </div>

    <div class="mid-container wrapper">
      <div class="inline-wrapper card">
        <SkeletonMonitor />
      </div>

      <div class="mid-virtual inline-wrapper card" v-if="kvmSupported">
        <SkeletonVirtual />
      </div>
    </div>

    <div class="mid-container wrapper card">
      <SkeletonProductResource />
    </div>

    <div class="bottom-container wrapper card">
      <SkeletonQuickAccess />
    </div>
  </template>

  <!-- 小分辨率  -->
  <template v-if="resolution === Resolution.SMALL">
    <div id="homeDetail" class="top-open-container wrapper card">
      <div class="top-container-background"></div>
      <div class="mid-picture inline-wrapper">
        <SkeletonProductPicture />
      </div>
      <div class="mid-product inline-wrapper">
        <SkeletonProductInfo />
      </div>
    </div>

    <div class="mid-container wrapper">
      <div class="inline-wrapper card">
        <SkeletonMonitor />
      </div>

      <div class="sm-virtual inline-wrapper card" v-if="kvmSupported">
        <SkeletonVirtual />
      </div>
    </div>

    <div class="mid-container wrapper card">
      <SkeletonProductResource />
    </div>

    <div class="bottom-container wrapper card">
      <SkeletonQuickAccess />
    </div>
  </template>
</template>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-items: stretch;
}

.inline-wrapper {
  display: inline-flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.card {
  background: #fefefe;
  border-radius: 4px;
  padding: 24px;
  margin: 8px;
}

.spacing {
  margin: 16px;
}

.top-open-container {
  margin: 0 !important;
  background: #22263a;
  backdrop-filter: blur(3px) brightness(20%);
  border-radius: 4px 4px 0 0;
  z-index: 0;
  :deep(div) {
    color: #fffffe;
  }
  :deep(.td.value) {
    color: #fffffe !important;
  }
}

.top-container {
  margin-top: 16px;
  margin-left: 16px;
  margin-right: 16px;
}

.top-container-background {
  width: 100%;
  height: 300px;
  position: absolute;
  z-index: -1;
  background: #22263a;
  backdrop-filter: blur(3px) brightness(20%);
}

.mid-container {
  margin-left: 16px;
  margin-right: 16px;
  z-index: 1;
}

.mid-picture {
  flex: 1;
}

.mid-product {
  flex: 2;
}

.bottom-container {
  margin-bottom: 16px;
  margin-left: 16px;
  margin-right: 16px;
}

.mid-product {
  width: 500px;
  min-width: 500px;
}

.mid-virtual {
  width: 456px;
  min-width: 456px;
}

.sm-virtual {
  width: 344px;
  min-width: 344px;
}
</style>
