<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-01-12 13:27:07
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-01-12 13:59:09
 * @FilePath: \General-AI-Platform-Web-Client\src\views\workbench\components\DeviceStatus.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ref } from "vue";
import deviceStatusOnline from "@/assets/svg/deviceStatus/online.svg?component";
import deviceStatusProcess from "@/assets/svg/deviceStatus/process.svg?component";
import deviceStatusError from "@/assets/svg/deviceStatus/error.svg?component";
import deviceStatusOutline from "@/assets/svg/deviceStatus/outline.svg?component";
defineOptions({
  name: "DeviceStatus"
});

const deviceStatusData = ref<Record<string, any>>({
  onlineCount: 618,
  errorCount: 55,
  processCount: 118,
  outlineCount: 195
});

const deviceStatusOptions = ref<Record<string, any>[]>([
  {
    label: "在线",
    color: "#52C41A",
    bgColor: "rgba(82, 196, 26, 0.10)",
    valueKey: "onlineCount" // 在线数量
  },
  {
    label: "进行中",
    color: "#FAAD14",
    bgColor: "rgba(250, 173, 20, 0.10)",
    valueKey: "processCount" // 进行中数量
  },
  {
    label: "故障",
    color: "#E80D0D",
    bgColor: "rgba(232, 13, 13, 0.10)",
    valueKey: "errorCount" // 故障数量
  },
  {
    label: "离线",
    color: "#ccc",
    bgColor: "#F0F0F0",
    valueKey: "outlineCount" // 故障数量
  }
]);
</script>

<template>
  <ul class="w-full text-sm deviceStatus_box">
    <li
      class="flex items-center justify-between w-full"
      :style="{
        marginBottom: '16px'
      }"
      v-for="(v, k) in deviceStatusOptions"
      :key="k"
    >
      <div
        class="flex items-center justify-center"
        :style="{
          backgroundColor: v.bgColor,
          width: '40px',
          height: '40px',
          borderRadius: '4px',
          marginRight: '12px'
        }"
      >
        <deviceStatusOnline v-if="v.valueKey === 'onlineCount'" />
        <deviceStatusProcess v-if="v.valueKey === 'processCount'" />
        <deviceStatusError v-if="v.valueKey === 'errorCount'" />
        <deviceStatusOutline v-if="v.valueKey === 'outlineCount'" />
      </div>
      <div class="flex flex-col flex-1">
        <div class="flex justify-between" style="margin-bottom: 4px">
          <span>{{ v.label }}</span>
          <span>{{ deviceStatusData[v.valueKey] }}</span>
        </div>
        <div class="w-full">
          <el-progress
            :show-text="false"
            :stroke-width="8"
            :percentage="deviceStatusData[v.valueKey] / 10"
            :color="v.color"
          />
        </div>
      </div>
    </li>
  </ul>
</template>
