<!--
  Description: 综合大屏-布控地图 -信息窗体 - 行政区或九五示范区信息
  Author: 李亚光
  Date: 2024-07-18
 -->
<script lang="ts" setup name="district">
import { mapData } from './mapData'
const $props = defineProps({
  data: {
    type: Object,
    required: true,
  },
})
// const info = ref<any>({})
// watch(() => $props.data, (newVal) => {
//   if (newVal) {
//     console.log(newVal, 'newVal')
//     const result = mapData.filter((item: any) => item.name === newVal.name)
//     if (result.length) {
//       info.value = result[0]
//     }
//   }
// }, {
//   deep: true,
// })
</script>

<template>
  <div class="district">
    <div class="district-header">
      {{ $props.data.name }}
    </div>
    <!-- <div class="content">
      <div class="name">面积:</div>
      <div class="value">{{ $props.data.area }}平方公里</div>
    </div>
    <div class="content">
      <div class="name">管理公司:</div>
      <div class="value">{{ $props.data.deptName }}</div>
    </div>
    <div class="content">
      <div class="name">管线长度:</div>
      <div class="value">{{ $props.data.long }}公里</div>
    </div>
    <div class="content">
      <div class="name">调压站:</div>
      <div class="value">{{ $props.data.tyz }}座</div>
    </div>
    <div class="content">
      <div class="name">调压箱:</div>
      <div class="value"> {{ $props.data.tyx }}座</div>
    </div>
    <div class="content">
      <div class="name">闸井:</div>
      <div class="value">{{ $props.data.well }}个</div>
    </div>
    <div class="content">
      <div class="name">监控覆盖率:</div>
      <div class="value">{{ $props.data.rate }}%</div>
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
.district {
  padding: 5px;

  .district-header {
    color: #a8d6f2;
    font-weight: 700;
    height: 30px;
    line-height: 30px;
    border-bottom: 2px solid #578ad1;
    box-shadow: 0 0 0 0;
  }

  .content {
    display: flex;
    padding: 5px 0;
    color: #8491a6;

    .value {
      padding-left: 5px;
    }
  }
}
</style>