<template>
  <el-card class="pb-4" shadow="hover">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="text-sm text-gray-400">设备总数</div>
        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.total }}</div>
        <div class="line-wrap bg-blue-50">
          <div :style="{ width: `${countPercent.total}` }" class="line bg-blue-300"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="text-sm text-gray-400">正常数量</div>
        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.normal }}</div>
        <div class="line-wrap bg-lime-50">
          <div :style="{ width: `${countPercent.normal}` }" class="line bg-lime-300"></div>
        </div>
      </el-col>
      <el-col :span="12" class="mt-10">
        <div class="text-sm text-gray-400">在线数量</div>
        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.online }}</div>
        <div class="line-wrap bg-green-50">
          <div :style="{ width: `${countPercent.online}` }" class="line bg-green-300"></div>
        </div>
      </el-col>
      <el-col :span="12" class="mt-10">
        <div class="text-sm text-gray-400">离线数量</div>
        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.offline }}</div>
        <div class="line-wrap bg-gray-50">
          <div :style="{ width: `${countPercent.offline}` }" class="line bg-gray-300"></div>
        </div>
      </el-col>
      <el-col :span="12" class="mt-10">
        <div class="text-sm text-gray-400">报警数量</div>
        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.warning }}</div>
        <div class="line-wrap bg-yellow-50">
          <div :style="{ width: `${countPercent.warning}` }" class="line bg-yellow-300"></div>
        </div>
      </el-col>
      <el-col :span="12" class="mt-10">
        <div class="text-sm text-gray-400">故障数量</div>
        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.fault }}</div>
        <div class="line-wrap bg-red-50">
          <div :style="{ width: `${countPercent.fault}` }" class="line bg-red-300"></div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const count = computed(() => store.state.device.count);
const countPercent = computed(() => {
  return {
    online: computeWidth(count.value.online),
    offline: computeWidth(count.value.offline),
    warning: computeWidth(count.value.warning),
    fault: computeWidth(count.value.fault),
    total: computeWidth(count.value.total),
    normal: computeWidth(count.value.normal),
  };
});

/**
 * 计算宽度百分比
 * @param {number} itemCount
 * @returns {string}
 */
function computeWidth(itemCount) {
  const percent = (itemCount * 100) / count.value.total;
  return `${percent}%`;
}
</script>

<style scoped>
.line-wrap {
  position: relative;
  width: 60%;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.line {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
</style>
