<!--
  Description: 综合大屏 - 数据展示- 基本概况
  Author: 李亚光
  Date: 2024-09-18
 -->
<script lang="ts" setup name="FullScreenBasicOverView">
import layout from './layout.vue'
import { overall } from '@/api/home/dashboard/fullScreen'
const $props = defineProps({
  type: {
    type: String,
    required: true,
  },
})
// 宽高
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
})
onBeforeUnmount(() => {
  window.addEventListener('resize', () => {})
})
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: '0',
    img: img.gx,
  },
  {
    name: '调压站',
    id: '2',
    unit: '个',
    value: '0',
    img: img.tyz,
  },
  {
    name: '闸井',
    id: '3',
    unit: '个',
    value: '0',
    img: img.zj,
  },
  {
    name: '调压箱',
    id: '4',
    unit: '个',
    value: '0',
    img: img.tyx,
  },
])
// 获取数据
const loading = ref(true)
const fetchData = () => {
  loading.value = true
  overall({ type: $props.type }).then((res) => {
    console.log(res.data, '基本概括')
    const dataDict = {
      调压箱: 'tyx',
      闸井: 'zj',
      调压站: 'tyz',
      管线: 'gx',
    } as { [key: string]: any }
    dataList.value.forEach((item: any) => {
      const data = res.data.filter((citem: any) => citem.name === dataDict[item.name])
      if (data.length) {
        item.value = data[0].value
      }
    })
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}
watch(() => $props.type, (newVal) => {
  if (newVal) {
    fetchData()
  }
  else {
    loading.value = false
  }
}, {
  deep: true,
  immediate: true,
})
</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: 18px;
        }

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

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