<template>
  <!-- 趋势分析-昼夜 -->
  <div class="">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="" prop="stCode">
        <el-select v-model="queryParams.stCode" filterable placeholder="请选择站点" style="width: 300px">
          <el-option
            v-for="dict in searchSiteList"
            :key="dict.stCode"
            :label="`${dict.stName}-${dict.stCode}`"
            :value="dict.stCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="time">
        <el-date-picker
          v-model="queryParams.time"
          value-format="YYYY-MM-DD"
          type="date"
          range-separator="-"
          :clearable="false"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="getData">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- Echarts数据展示 -->
    <div class="echarts-content flex flex-v" v-loading="loading">
      <!-- 监测因子数据 -->
      <div class="echart-height flex flex-1 flex-v" style="height: 100%; background: #ffffff">
        <div class="echart-title">白天趋势分析</div>
        <trendAnalysisNightLine
          v-if="dayEchart.xlist.length"
          :refresh="refreshDayEchart"
          :echartData="dayEchart"
        ></trendAnalysisNightLine>
        <empty v-else emptyText="暂无统计数据" :width="100" :height="100" style="margin-top: 50px"></empty>
      </div>
      <!-- 累计排水量数据 -->
      <div class="flex flex-1 flex-v" style="height: 100%; background: #ffffff">
        <div class="echart-title">晚上趋势分析</div>
        <trendAnalysisNightLine
          v-if="nightEchart.xlist.length"
          :refresh="refreshNightEchart"
          :echartData="nightEchart"
        ></trendAnalysisNightLine>
        <empty v-else emptyText="暂无统计数据" :width="100" :height="100" style="margin-top: 50px"></empty>
      </div>
    </div>
  </div>
</template>

<script setup>
import { listRepairAllSite } from '@/api/dataAnalysis/repairdata';
import { trendAnalysisNight } from '@/api/dataAnalysis/dataCapability';
import trendAnalysisNightLine from './trendAnalysisNightLine';

const { proxy } = getCurrentInstance();
const loading = ref(false);
const showSearch = ref(true);
const searchSiteList = ref([]); //站点搜索列表
const dayEchart = ref({ flowList: [], rainfallList: [], ssList: [], xlist: [] }); //白天echarts监测数据
const refreshDayEchart = ref(1); //刷新标识
const nightEchart = ref({ flowList: [], rainfallList: [], ssList: [], xlist: [] }); //夜晚echarts监测数据
const refreshNightEchart = ref(1); //刷新标识
const data = reactive({
  queryParams: {
    stCode: null,
    time: proxy.moment(new Date()).format('YYYY-MM-DD'),
  },
});

const { queryParams } = toRefs(data);

//获取站点列表
function getSearchSiteList() {
  loading.value = true;
  listRepairAllSite({ platformCode: 111211 }).then(res => {
    searchSiteList.value = res.data;
    queryParams.value.stCode = searchSiteList.value.length ? searchSiteList.value[0].stCode : '';
    getData();
  });
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef');
  queryParams.value.stCode = searchSiteList.value.length ? searchSiteList.value[0].stCode : '';
  getData();
}

//获取数据
function getData() {
  loading.value = true;
  trendAnalysisNight(queryParams.value).then(res => {
    loading.value = false;
    if (JSON.stringify(res.data) != '{}') {
      dayEchart.value = res.data.day;
      refreshDayEchart.value = Math.random();
      setTimeout(() => {
        nightEchart.value = res.data.night;
        refreshNightEchart.value = Math.random();
      });
    } else {
      dayEchart.value = { flowList: [], rainfallList: [], ssList: [], xlist: [] };
      nightEchart.value = { flowList: [], rainfallList: [], ssList: [], xlist: [] };
    }
  });
}
getSearchSiteList();
</script>
<style lang="scss" scoped>
.echarts-content {
  height: calc(100vh - 230px);
}
.echart-title {
  font-size: 22px;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #5b6388;
  line-height: 17px;
  padding: 20px;
}
</style>