<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="chartHMJC" 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 YSFQ2 from '@/assets/geojson/kaifeng/kaifengPSFQ2.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';
import { onBeforeUnmount } from 'vue';
const { proxy } = getCurrentInstance();
const dialogShow = ref(false);
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('chartHMJC'));
  optionChart.option.xAxis.data = ['2024-06-24 00:00:00', '2024-06-12 00:10:00', '2024-06-12 00:20:00'];
  optionChart.option.series = [
    {
      name: '降雨量(mm)',
      data: [230, 190, 132],
      type: 'bar',
      barWidth: 10,
      yAxisIndex: 0,
    },
    {
      name: '流量(m³/s)',
      data: [12, 9, 20],
      type: 'line',
      smooth: true,
      yAxisIndex: 1,
      symbolSize: 8,
    },
  ];
  optionChart.option.yAxis = [
    {
      name: '降雨量(mm)',
      type: 'value',
      inverse: true, //翻转
      nameLocation: 'start', // 坐标轴名称显示位置
      nameGap: 15, // 坐标轴名称与轴线之间的距离
      nameTextStyle: {
        color: '#c6c6c6', //字体颜色
        fontSize: 12, //字体大小
        align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#066592',
        },
      },
      axisLabel: {
        color: '#c6c6c6',
      },
    },
    {
      name: '流量(m³/s)',
      type: 'value',
      nameLocation: 'end', // 坐标轴名称显示位置
      nameGap: 15, // 坐标轴名称与轴线之间的距离
      nameTextStyle: {
        color: '#c6c6c6', //字体颜色
        fontSize: 12, //字体大小
        align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
      },
      axisLabel: {
        color: '#c6c6c6',
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#066592',
        },
      },
    },
  ];
  // 设置鼠标滚轮放大缩小展示数据区间
  // 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);
  dialogShow.value = true;
  setTimeout(() => {
    initChart();
  });
};
onMounted(() => {
  handleQuery();
  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(() => {
    newfiberMapbox.map.moveLayer('kaifengWater', 'rainAreaLayer');
    //添加海绵设施
    addFacilityLayer();
  }, 4000);
});
onBeforeUnmount(() => {
  YSFQ2.features.forEach(element => {
    element.properties.name = element.properties.name.split('/')[0];
  });
});
</script>

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