<!--
  Description: 综合大屏 - 数据展示- 基本概况
  Author: 李亚光
  Date: 2024-09-18
 -->
<script lang="ts" setup name="FullScreenBasicOverView">
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 = {
  gx: new URL('@/assets/images/map/gx.png', import.meta.url),
  tyz: new URL('@/assets/images/map/tyz.png', import.meta.url),
  zj: new URL('@/assets/images/map/zj.png', import.meta.url),
  tyx: new URL('@/assets/images/map/tyx.png', import.meta.url),
}
const dataList = ref([
  {
    name: '管线',
    id: '1',
    unit: 'KM',
    value: '57.9',
    img: img.gx,
  },
  {
    name: '调压站',
    id: '2',
    unit: '个',
    value: '9',
    img: img.tyz,
  },
  {
    name: '闸井',
    id: '3',
    unit: '个',
    value: '47',
    img: img.zj,
  },
  {
    name: '调压箱',
    id: '4',
    unit: '个',
    value: '39',
    img: img.tyx,
  },
])
</script>

<template>
  <layout :height="height" :width="width" title="基本概况" subtitle="Basic Overview">
    <template #content>
      <div class="content">
        <div v-for="item in dataList" :key="item.id" class="item">
          <div class="img">
            <img :src="item.img">
          </div>
          <div class="data">
            <div class="value">
              <span class="value">{{ item.value }}</span>
              <span class="unit">{{ item.unit }}</span>
            </div>
            <div class="name">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </template>
  </layout>
</template>

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

.content {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .item {
    width: 48%;
    display: flex;
    // justify-content: space-between;
    margin: 20px 0;

    .img {
      width: 50%;
      box-sizing: border-box;
      // flex: 1;

      img {
        width: 90%;
        height: 100%;
      }
    }

    .data {
      box-sizing: border-box;
      margin-left: 5px;

      // display: flex;
      .value {

        // padding-left: 10px;
        .value {
          color: #fff;
          font-weight: 700;
          font-size: 20px;
        }

        .unit {
          color: #83b7df;
          padding-left: 5px;
          font-weight: 700;
        }
      }

      .name {
        color: #a7ceec;
        font-size: 14px;
        padding-left: 10px;
      }
    }
  }
}
</style>