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

const { proxy } = getCurrentInstance();
const dialogShow = ref(true);
const charts = 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-12 00:00:00', '2024-06-12 00:10:00', '2024-06-12 00:20:00'];
  optionChart.option.series[0].data = [12, 9, 20]; //降雨量
  optionChart.option.series[1].data = [2.3, 1.9, 3.2]; //进口流量
  optionChart.option.series[2].data = [1.1, 0.9, 1.3]; //出口流量
  // 设置鼠标滚轮放大缩小展示数据区间
  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);
}

onMounted(() => {
  handleQuery();
});
</script>

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