<!--
  Description: 综合大屏-数据展示-九五示范区的基本信息展示
  Author: 李亚光
  Date: 2024-09-18
 -->
<script lang="ts" setup name="FullScreenBaseOver">
import { overall } from '@/api/home/dashboard/fullScreen'
const baseInfo = ref([
  // {
  //   name: '管线',
  //   value: '0',
  //   unit: '公里',
  // },
  {
    name: '调压站',
    value: '0',
    unit: '个',
  },
  {
    name: '闸井',
    value: '0',
    unit: '座',
  },

  {
    name: '调压箱',
    value: '0',
    unit: '座',
  },
  {
    name: '隐患点',
    value: '0',
    unit: '个',
  },
])
// 获取数据
const loading = ref(true)
const fetchData = () => {
  loading.value = true
  overall({ type: '1' }).then((res) => {
    console.log(res.data, '基本概括111111111111')
    const dataDict = {
      调压箱: 'tyx',
      闸井: 'zj',
      调压站: 'tyz',
      管线: 'gx',
    } as { [key: string]: any }
    baseInfo.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
  })
}
fetchData()
</script>

<template>
  <div class="container">
    <div v-for="item in baseInfo" :key="item.name" class="item">
      <div class="name">
        {{ item.name }}
      </div>
      <div class="content">
        <span class="value"> {{ item.value }}</span>
        <span class="unit"> {{ item.unit }}</span>
      </div>
    </div>
  </div>
</template>

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

@font-face {
  font-family: MyFont;
  src: url("@/assets/Digital.ttf");
}

.container {
  font-family: MyFont !important;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .item {
    width: 48%;
    background: url("@/assets/images/dashboard/legend.png") no-repeat center center / cover;
    border: 1px solid #249eff;
    color: #fff;
    margin-top: 10px;
    background-color: rgba($color: #1e1e20, $alpha: 70%);
    padding: 10px;

    .name {
      text-align: center;
      height: 24px;
      line-height: 24px;
    }

    .content {
      .value {
        font-size: 18px;
      }

      .unit {
        padding-left: 5px;
      }

      text-align: center;
      height: 26px;
      line-height: 26px;
    }
  }
}
</style>