<!--
  Description: 综合大屏 - 数据展示- 总体报警情况
  Author: 李亚光
  Date: 2024-09-18
 -->
<script lang="ts" setup name="FullScreenAllAlarmStatus">
import layout from './layout.vue'
// 宽高
const height = ref((window.innerHeight - 100 - 50) / 3)
const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
window.addEventListener('resize', () => {
  height.value = (window.innerHeight - 100 - 50) / 3
  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
})
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: '15',
  },
  {
    name: '管线泄露',
    id: '2',
    value: '16',
  },
  {
    name: '场站泄露',
    id: '3',
    value: '0',
  },
  {
    name: '现场作业',
    id: '4',
    value: '0',
  },
  {
    name: '外力破坏',
    id: '5',
    value: '2',
  },
  {
    name: '其他',
    id: '6',
    value: '2',
  },
])

const pre = computed(() => {
  return dataList.value.slice(0, 3)
})
const next = computed(() => {
  return dataList.value.slice(3, 6)
})
const allAlarm = computed(() => {
  return dataList.value.map((item: any) => Number(item.value)).reduce((pre, next) => {
    return pre + next
  })
})
console.log(pre.value, next.value)
</script>

<template>
  <layout 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">
            <div class="img" :style="{ height: `${(height - 50) / 3}px` }">
              <img :src="img.frame2">
              <div class="name">
                <div class="name1">
                  {{ item.name }}
                </div>
                <div class="value">
                  {{ 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">
            <div class="img" :style="{ height: `${(height - 50) / 3}px` }">
              <img :src="img.frame2">
              <div class="name">
                <div class="name1">
                  {{ item.name }}
                </div>
                <div class="value">
                  {{ 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;

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

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

      .name {
        position: absolute;
        top: 51%;
        left: 46%;
        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: #fff;
        }

        .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>