<script setup lang="ts">
import { computed, PropType, ref } from "vue";
import { AnimationPic } from "@/components/AnimationCard";
import serverIcon from "@/assets/animate/device/server.json";
defineOptions({
  name: "ServerCard"
});

interface CardProductType {
  isEnabled: boolean;
  state: string;
  description: string;
  deviceSort: string;
}

const props = defineProps({
  device: {
    type: Object as PropType<CardProductType>
  }
});

const cardClass = computed(() => [
  "server-card",
  { "server-card_offline": props.device?.state === "离线" }
]);

const stateClass = computed(() => [
  "server-state",
  { "server-state_offline": props.device?.state === "离线" }
]);

const progressData = ref([
  {
    label: "CPU",
    percent: 0.79,
    strokeColor: "rgb(243,48,5)"
  },
  {
    label: "内存",
    percent: 0.18,
    strokeColor: "rgb(33,169,122)"
  },
  {
    label: "存储",
    percent: 0.79,
    strokeColor: "rgb(33,169,122)"
  },
  {
    label: "GPU",
    percent: 0.18,
    strokeColor: "rgb(250,173,20)"
  }
]);
</script>

<template>
  <div :class="cardClass">
    <div class="server-header">
      <div class="server-name">{{ device?.deviceSort }}</div>
      <div :class="stateClass">{{ device?.state }}</div>
    </div>
    <div class="server-content">
      <div class="server-content-left">
        <AnimationPic :value="serverIcon" />
      </div>
      <div class="server-content-right">
        <ul class="w-full">
          <li v-for="(v, k) in progressData" :key="k">
            <div class="flex items-center rectProgress_box">
              <span>
                {{ v.label }}
              </span>
              <div class="flex flex-1">
                <el-progress
                  style="width: 100%; margin-left: 8px"
                  :show-text="false"
                  :stroke-width="10"
                  :percentage="100 * v.percent"
                  :color="v.strokeColor"
                />
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "./ServerCard.scss";
/* 测试 */
</style>

<style lang="scss">
.rectProgress_box {
  .el-progress-bar__outer {
    border-radius: 2px;
  }

  .el-progress-bar__inner {
    border-radius: 0;
  }
}
</style>
