<template>
  <!-- 年径流污染削减率 -->
  <div class="publicContainer">
    <!-- gis地图 -->
    <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`" @map-click="mapClick"></MapBox>

    <!-- 海绵设施监测详情 -->
    <el-dialog v-model="dialogShow" title="海绵设施监测点位详情" :modal-append-to-body="false" width="600px">
      <el-form :inline="true">
        <el-form-item label="日期" prop="date">
          <el-date-picker type="daterange" v-model="dateSearch" value-format="YYYY-MM-DD" placeholder="请选择"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
      <div id="chartHMXJ" style="width: 100%; height: 300px"></div>
    </el-dialog>
  </div>
</template>

<script setup>
import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
import optionChart from './chartOption.js';
import YSFQ3 from '@/assets/geojson/kaifeng/kaifengPSFQ3.json';
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
import newfiberVectorLayer from '../../sponeScreen/gisMF/newfiberVectorLayer.js';
import { queryProjectStation } from '@/api/sponeScreen/syntherticData.js';
import bus from '@/bus';
const { proxy } = getCurrentInstance();
const dialogShow = ref(true);
const charts = ref(null);
const mapboxTimer = ref(null);
const dateSearch = ref([proxy.moment(new Date()).subtract(60, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);

// 历史数据搜索
function handleQuery() {
  setTimeout(() => {
    initChart();
  });
}

// echarts初始化
function initChart() {
  charts.value && charts.value.dispose();
  charts.value = proxy.echarts.init(document.getElementById('chartHMXJ'));
  optionChart.option.xAxis.data = ['2024-06-12 00:00:00', '2024-06-12 00:10:00', '2024-06-12 00:20:00'];
  optionChart.option.yAxis[1].name = 'SS(mg/L)';
  optionChart.option.series[0].data = [12, 9, 20]; //降雨量
  optionChart.option.series[1].name = '进口SS';
  optionChart.option.series[1].data = [230, 190, 132]; //进口SS
  optionChart.option.series[2].name = '出口SS';
  optionChart.option.series[2].data = [110, 90, 103]; //出口SS
  // 设置鼠标滚轮放大缩小展示数据区间
  optionChart.option.dataZoom = [{ type: 'inside', startValue: optionChart.option.xAxis.data[optionChart.option.xAxis.data.length / 2] }];
  if (optionChart.option.xAxis.data.length > 0) {
    optionChart.option.graphic.invisible = true; //暂无数据
  } else {
    optionChart.option.graphic.invisible = false; //暂无数据
  }
  charts.value.clear();
  charts.value.setOption(optionChart.option);
}
//添加海绵设施
const addFacilityLayer = async () => {
  let params = {};
  let projectStationRes = await queryProjectStation(params);
  if (projectStationRes && projectStationRes.code == 200) {
    //projectStation = this.getGeojsonData(projectStationRes.data);
    let facilityFeaturcs = [];
    projectStationRes.data.forEach(data => {
      facilityFeaturcs.push(turf.point(data.lonlat.split(',').map(Number), data));
    });
    let facilityGeojson = {
      type: 'FeatureCollection',
      features: facilityFeaturcs,
    };
    console.log('facilityGeojson--', facilityGeojson);
    bus.emit('setLegendData', [{ data: facilityGeojson, layername: 'spongeFacility', type: 'point' }]);
    bus.emit('setLayerVisible', { layername: 'spongeFacility', isCheck: true });
  }
};
//地图点击事件
const mapClick = (point, properties) => {
  console.log('point', point);
  console.log('properties', properties);
};
onMounted(() => {
  handleQuery();
  YSFQ3.features.forEach(element => {
    element.properties.name = element.properties.name + element.properties.totalflow;
  });
  //添加排水分区
  mapboxTimer.value = setInterval(() => {
    if (!newfiberMapbox) {
      return;
    } else {
      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('rainAreaLayer', YSFQ3);
      newfiberMapbox.map.setLayoutProperty('rainAreaLayer_label', 'text-allow-overlap', true);
      clearInterval(mapboxTimer.value);
    }
  }, 1000);
  setTimeout(() => {
    newfiberMapbox.map.moveLayer('kaifengWater', 'rainAreaLayer');
    //添加海绵设施
    addFacilityLayer();
  }, 4000);
});
</script>

<style lang="scss" scoped></style>