<!--
  Description: 综合大屏 - 数据展示- 总体报警情况
  Author: 李亚光
  Date: 2024-09-18
 -->
<script lang="ts" setup name="FullScreenAllAlarmStatus">
import layout from './layout.vue'
import { alarmStatistics } from '@/api/home/dashboard/fullScreen'
const $props = defineProps({
  type: {
    type: String,
    required: true,
  },
})
// 宽高
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 img = {
  frame1: new URL('@/assets/images/map/frame1.png', import.meta.url),
  frame2: new URL('@/assets/images/map/frame2.png', import.meta.url),
}
const dataList = ref([
  // {
  //   name: '闸井泄漏',
  //   id: '1',
  //   value: '0',
  // },
  // {
  //   name: '管线泄漏',
  //   id: '2',
  //   value: '0',
  // },
  // {
  //   name: '场站泄漏',
  //   id: '3',
  //   value: '0',
  // },
  // {
  //   name: '现场作业',
  //   id: '4',
  //   value: '0',
  // },
  // {
  //   name: '外力破坏',
  //   id: '5',
  //   value: '0',
  // },
  // {
  //   name: '其他',
  //   id: '6',
  //   value: '0',
  // },
])

const pre = computed(() => {
  if (!dataList.value.length) {
    return []
  }
  return dataList.value.slice(0, 2)
})
const next = computed(() => {
  if (!dataList.value.length) {
    return []
  }
  return dataList.value.slice(2, 4)
})
const allAlarm = computed(() => {
  if (!dataList.value.length) {
    return 0
  }
  return dataList.value.map((item: any) => Number(item.value)).reduce((pre, next) => {
    return pre + next
  })
})
// console.log(pre.value, next.value)
// 获取数据
const loading = ref(true)
const fetchData = () => {
  alarmStatistics({ type: $props.type }).then((res) => {
    const needShow = ['浓度超限', '第三方破坏']
    const data = res.data.filter((item: any) => needShow.some((citem: string) => item.name.includes(citem)))
    data.forEach((element: any) => {
      if (element.name === '浓度超限') {
        element.name = '管线浓度超限'
      }
    });
    dataList.value = data.map((item: any, index: number) => ({ ...item, id: index + 1 }))
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}
const timer = ref()
const closeTimer = () => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
}
const openTimer = () => {
  closeTimer()
  timer.value = setInterval(() => {
    fetchData()
  }, 1000 * 60 * 2)
}

onMounted(() => {
  openTimer()
})
onBeforeUnmount(() => {
  closeTimer()
})
watch(() => $props.type, (newVal) => {
  if (newVal) {
    loading.value = true
    fetchData()
  }
  else {
    loading.value = false
  }
}, {
  deep: true,
  immediate: true,
})
</script>

<template>
  <layout v-loading="loading" class="layout" :height="height" :width="width" title="总体报警情况"
    subtitle="Overall Alarm Situation">
    <template #content>
      <div class="container">
        <div class="left">
          <div v-for="item in pre" :key="item.id" class="item" :style="{ height: `${(height - 50) / 2}px` }">
            <div class="img">
              <img :src="img.frame2">
              <div class="name">
                <div class="name1">
                  {{ item.name }}
                </div>
                <div class="value"
                  :style="{ color: item.value === '0' ? '#a7ceec' : '#d81010', fontWeight: item.value === '0' ? '500' : '700' }">
                  {{ item.value }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="middle">
          <div class="container1" :style="{ height: `${(height - 50)}px` }">
            <img class="img1" :src="img.frame2">
            <img class="img2" :src="img.frame1">
            <div class="name">
              <div class="value">
                {{ allAlarm }}
              </div>
              <div class="title1">
                当前报警
              </div>
            </div>
          </div>
        </div>
        <div class="left">
          <div v-for="item in next" :key="item.id" class="item" :style="{ height: `${(height - 50) / 2}px` }">
            <div class="img">
              <img :src="img.frame2">
              <div class="name">
                <div class="name1">
                  {{ item.name }}
                </div>
                <div class="value"
                  :style="{ color: item.value === '0' ? '#a7ceec' : '#d81010', fontWeight: item.value === '0' ? '500' : '700' }">
                  {{ item.value }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </layout>
</template>

<style lang="scss" scoped>
::v-deep(.el-loading-mask) {
  background-color: rgba($color: #0b0b0f, $alpha: 95%);
}

.container {
  display: flex;

  .left {
    width: 30%;
    color: #a7ceec;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .item {
      // margin: 7px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      img {
        width: 100%;
        // height: 100%;
        // margin: 0 auto;
      }

      .name {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .name1 {
          width: 100%;
          text-align: center;
          font-size: 12px;
        }

        .value {
          margin-top: 5px;
          font-size: 14px;
          text-align: center;
        }
      }
    }
  }

  .middle {
    width: 40%;

    .container1 {
      width: 100%;
      position: relative;

      .img1 {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .img2 {
        width: 70%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .name {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #a7ceec !important;

        .value {
          text-align: center;
          font-size: 24px;
          font-weight: 700;
          color: #d81010;
        }

        .title1 {
          margin-top: 10px;
          font-weight: 700;
        }
      }
    }
  }
}

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