<!--
  Description: 事件大屏 - 数据展示- 设备在线监控
  Author: 李亚光
  Date: 2024-09-18
 -->
<script lang="ts" setup name="FullScreenDeviceOnlineMonitor">
import { getOffline } from '@/api/home/device/count'
import layout from './layout.vue'
import { color } from 'echarts'
// 宽高
const height = ref((window.innerHeight - 100 - 50) / 3 + 20)
const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
window.addEventListener('resize', () => {
  height.value = (window.innerHeight - 100 - 50 + 20) / 3
  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
})
onBeforeUnmount(() => {
  window.addEventListener('resize', () => { })
})
const loading = ref(false)
const colorList = ref([
  '#2391FF',
  '#FF745A',
  '#FFC328',
  '#1AC9FF',
  '#2352d6',
  '#19be6b',
  '#8B71ED',
  '#E46CBB',
  '#2391FF',
  '#FF745A',
  '#FFC328',
  '#1AC9FF',
  '#2352d6',
  '#19be6b',
  '#8B71ED',
  '#E46CBB',
])
const data = ref([])
onMounted(() => {
  loading.value = true
  getOffline().then(res => {
    let response = res.data
    if (response.length > 8) {
      response = response.slice(0, 8)
    }
    data.value = response.map((item: any) => ({
      ...item,
      online: Number(item.deviceCount) - Number(item.offCount)
    })).map((item: any, index: number) => ({
      ...item,
      value: Math.floor((Number(item.online) / Number(item.deviceCount)) * 100),
      color: colorList.value[index]
    }))
    loading.value = false
  })
})
</script>

<template>
  <layout class="layout" :height="height" :width="width" title="设备在线监控" subtitle="Equipment Online Monitoring">
    <template #content>
      <div v-loading="loading" class="container " :style="{ width: `${width}px`, height: `${height - 36}px` }">
        <div v-for="item in data" :key="item.name" class="item">
          <el-progress type="circle" :percentage="item.value" :striped="true" striped-flow
            :width="(width - width * 0.22) / 4" :title="item.name" :color="item.color" :class="item.class" />
          <span class="value" :title="item.name">{{ item.name }}</span>
        </div>
      </div>
    </template>
  </layout>
</template>

<style lang="scss" scoped>
::v-deep(.el-progress-circle__track) {
  // stroke: #093262 !important;
  stroke-width: 4 !important;
}

.circle1 {
  ::v-deep(.el-progress-circle__track) {
    stroke: rgba($color: #057CF7, $alpha: 0.5) !important;
  }
}

.circle2 {
  ::v-deep(.el-progress-circle__track) {
    stroke: rgba($color: #FF745A, $alpha: 0.5) !important;
  }
}

.circle3 {
  ::v-deep(.el-progress-circle__track) {
    stroke: rgba($color: #FFC328, $alpha: 0.5) !important;
  }
}

.circle4 {
  ::v-deep(.el-progress-circle__track) {
    stroke: rgba($color: #1AC9FF, $alpha: 0.5) !important;
  }
}

.circle5 {
  ::v-deep(.el-progress-circle__track) {
    stroke: rgba($color: #2352d6, $alpha: 0.5) !important;
  }
}

.circle6 {
  ::v-deep(.el-progress-circle__track) {
    stroke: rgba($color: #19be6b, $alpha: 0.5) !important;
  }
}

.circle7 {
  ::v-deep(.el-progress-circle__track) {
    stroke: rgba($color: #8B71ED, $alpha: 0.5) !important;
  }
}

.circle8 {
  ::v-deep(.el-progress-circle__track) {
    stroke: rgba($color: #E46CBB, $alpha: 0.5) !important;
  }
}

::v-deep(.el-loading-mask) {
  background-color: rgba($color: #0b0b0f, $alpha: 95%);
}

// .layout {
//   ::v-deep(.title) {
//     padding-left: 8px !important;
//     color: #fff;
//     font-weight: 700;
//     // padding-left: 20px;
//     box-sizing: border-box;
//   }

// overflow: hidden;
// }

::v-deep(.el-progress__text) {
  color: #fff;
  font-size: 16px !important;
  font-weight: 700;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow: hidden;

  .item {
    width: 21%;
    padding: 8px 0;

    .value {
      color: #fff;
      display: inline-block;
      text-align: center;
      font-size: 12px;
      width: 100%;
      white-space: nowrap;

      /* 确保文本在一行内显示 */
      overflow: hidden;

      /* 超出容器部分隐藏 */
      text-overflow: ellipsis;

      /* 文字溢出显示省略号 */
    }
  }
}
</style>