<template>
  <!-- 年径流总量控制率 -->
  <div class="publicContainer">
    <!-- gis地图 -->
    <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`"></MapBox>

    <!-- 年份选择 -->
    <el-select clearable v-model="yearKH" placeholder="请选择年份" disabled class="selYear">
      <el-option label="2022" value="2022" />
      <el-option label="2023" value="2023" />
      <el-option label="2024" value="2024" />
    </el-select>

    <!-- 海绵设施监测详情 -->
    <el-dialog v-model="dialogShow" title="海绵项目监测分析详情" :modal-append-to-body="false" width="600px">
      <div class="publicDetail">
        <h3 class="titleBase">基础信息</h3>
        <div class="part">
          <div class="title">项目名称:</div>
          <div class="content">{{ projectDetail.name }}</div>
        </div>
        <div class="part">
          <div class="title">统计年份:</div>
          <div class="content">{{ projectDetail.year }}</div>
        </div>
        <div class="part">
          <div class="title">降雨总量(mm):</div>
          <div class="content number">{{ projectDetail.rainTotal }}</div>
        </div>
        <div class="part">
          <div class="title">占地面积(㎡):</div>
          <div class="content number">{{ projectDetail.area }}</div>
        </div>

        <h3 class="titleBase">水量监测</h3>
        <div class="part" style="width: 100%">
          <div class="title">项目外排总径流体积(m³):</div>
          <div class="content number">{{ projectDetail.wpzjl }}</div>
        </div>

        <h3 class="titleBase">设计指标</h3>
        <div class="part">
          <div class="title">设计降雨量(mm):</div>
          <div class="content number">{{ projectDetail.sjRain }}</div>
        </div>
        <div class="part">
          <div class="title">计算径流面积(㎡):</div>
          <div class="content number">{{ projectDetail.sjArea }}</div>
        </div>
        <div class="part">
          <div class="title">设计年径流总量控制率(%):</div>
          <div class="content number">{{ projectDetail.sjjlzl }}</div>
        </div>

        <h3 class="titleBase">效果评价</h3>
        <div class="part">
          <div class="title">实际年径流总量控制率(%):</div>
          <div class="content number">{{ projectDetail.jlzlSJ }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
import YSFQ2 from '@/assets/geojson/kaifeng/kaifengPSFQ2.json';
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
import yuanTous from '@/assets/images/gisMap/in.png';

const { proxy } = getCurrentInstance();
const dialogShow = ref(false);
const mapboxTimer = ref(null);
const yearKH = ref('2024');
const projectArr = ref([
  {
    name: '汴京路管网及道路海绵化改造',
    geometry: 'POINT(114.374417 34.793947)',
    area: 110330.52,
    sjArea: 85635.45,
    year: 2024,
    rainTotal: 627.1,
    wpzjl: 1407.78,
    sjRain: 54.62,
    sjjlzl: 90,
    jlzlSJ: 90,
  },
]);
const projectDetail = ref({});

//添加海绵项目
const addFacilityLayer = async () => {
  let point = { type: 'FeatureCollection', features: [] };
  projectArr.value.map(item => {
    let projectGeojson = { geometry: Terraformer.WKT.parse(item.geometry), properties: item };
    point.features.push(projectGeojson);
    addPointProject(newfiberMapbox.map, point, 'projectNjlzl');
  });
};
// 添加点位方法
function addPointProject(map, data, layerId) {
  newfiberMapbox.map.loadImage(yuanTous, (error, image) => {
    if (error) throw error;
    !!!map.getSource(layerId) && map.addImage(layerId, image);
    !!!map.getSource(layerId) && map.addSource(layerId, { type: 'geojson', data: data });
    !!!map.getLayer(layerId) &&
      map.addLayer({
        id: layerId,
        type: 'symbol',
        source: layerId,
        layout: {
          'text-field': ['get', 'name'],
          'text-font': ['KlokanTech Noto Sans Regular'],
          'text-size': 16,
          'text-line-height': 2,
          'text-anchor': 'bottom',
          'text-offset': [0, 3],
          'text-max-width': 50,
          'icon-image': layerId,
          'icon-size': 0.15,
        },
        paint: {
          'text-color': 'rgba(127, 11, 147, 1)',
          'text-halo-color': 'rgba(255, 255, 255, 1)',
          'text-halo-width': 2,
        },
      });
  });
}

onMounted(() => {
  YSFQ2.features.forEach(element => {
    element.properties.name = element.properties.name + '/' + element.properties.totalflow;
  });
  //添加排水分区
  mapboxTimer.value = setInterval(() => {
    if (!newfiberMapbox) {
      return;
    } else {
      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('rainAreaLayer', YSFQ2);
      newfiberMapbox.map.setLayoutProperty('rainAreaLayer_label', 'text-allow-overlap', true);
      clearInterval(mapboxTimer.value);
    }
  }, 1000);

  setTimeout(() => {
    // 添加海绵项目
    addFacilityLayer();
    // 地图点击事件
    newfiberMapbox.map.on('click', e => {
      let clickfeature = newfiberMapbox.map
        .queryRenderedFeatures([
          [e.point.x - 10 / 2, e.point.y - 10 / 2],
          [e.point.x + 10 / 2, e.point.y + 10 / 2],
        ])
        .filter(i => i.layer.id == 'projectNjlzl');
      if (clickfeature.length == 0) return;
      projectDetail.value = clickfeature[0].properties; //项目介绍详情
      dialogShow.value = true;
    });
  }, 1000);
});
onBeforeUnmount(() => {
  YSFQ2.features.forEach(element => {
    element.properties.name = element.properties.name.split('/')[0];
  });
  if (mapboxTimer.value) clearInterval(mapboxTimer.value);
});
</script>

<style lang="scss" scoped>
.selYear {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 99;
  width: 100px;
}
</style>