<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="请选择站点" @change="changeSite" 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="codes">
        <el-select v-model="queryParams.codes" multiple collapse-tags placeholder="请选择监测因子">
          <el-option
            v-for="item in propertyList"
            :key="item.property"
            :label="item.monitorName"
            :value="item.monitorCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="dateRange">
        <dateSelect valueFormat="YYYY-MM-DD" :dateTime="queryParams.dateRange" @update="changeTime"></dateSelect>
      </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>
        <pumpingCapacityLine
          v-if="propertyMonitorEchart.xAxisData.length"
          :refresh="refreshPropertyMonitor"
          :echartData="propertyMonitorEchart"
        ></pumpingCapacityLine>
        <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>
        <pumpingCapacityLine
          v-if="displacementEchart.xAxisData.length"
          :refresh="refreshDisplacement"
          :echartData="displacementEchart"
        ></pumpingCapacityLine>
        <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 { flowPumpingCapacityAnalysis,rtuSiteMonitorlist } from '@/api/dataAnalysis/dataCapability';
import { findDictObj } from '@/utils/ruoyi.js';
import dateSelect from '@/views/dataAnalysis/components/dateSelect'; //日期组件
import pumpingCapacityLine from './pumpingCapacityLine';
const { proxy } = getCurrentInstance();
const activeName = ref('first');
const loading = ref(false);
const showSearch = ref(true);
const searchSiteList = ref([]); //站点搜索列表
const propertyList = ref([]); //监测因子
const displacementEchart = ref({ xAxisData: [], seriesData: [] }); //累计排水量
const refreshDisplacement = ref(1); //刷新标识
const propertyMonitorEchart = ref({ xAxisData: [], seriesData: [] }); //监测因子数据
const refreshPropertyMonitor = ref(1); //刷新标识
const data = reactive({
  queryParams: {
    stCode: null,
    codes: [],
    dateRange: [proxy.moment(new Date()).format('YYYY-MM-DD'), proxy.moment(new Date()).add(1, 'days').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 : '';
    changeSite();
    rtuSiteMonitorlistM({stCode:queryParams.value.stCode})
  });
}
//修改时间
function changeTime(val) {
  queryParams.value.dateRange = val;
}
async function rtuSiteMonitorlistM(p){ 
   let {data}=await rtuSiteMonitorlist(p)
   propertyList.value=data
}

//切换站点
function changeSite(stCode) {
  console.log(stCode)
  rtuSiteMonitorlistM({stCode})
  // propertyList = findDictObj(queryParams.value.stCode, 'stCode', searchSiteList.value).siteRepairPropertyConfigList;
  // queryParams.value.codes = propertyList.value.length ? [propertyList.value[0].property] : [];
  // if (queryParams.value.stCode && queryParams.value.codes.length) {
  //   getData();
  // }
}

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

//获取数据
function getData() {
  let params = {
    stCode: queryParams.value.stCode,
    codes:queryParams.value.codes.join(','),
    startTime: queryParams.value.dateRange[0],
    endTime: queryParams.value.dateRange[1],
  };
  loading.value = true;
  flowPumpingCapacityAnalysis(params).then(res => {
    loading.value = false;
    //监测因子数据
    propertyMonitorEchart.value = {
      xAxisData: res.data.propertyMonitorXList,
      seriesData: res.data.propertyMonitorList,
    };
    refreshPropertyMonitor.value = Math.random();
    //累计排水量
    setTimeout(() => {
      displacementEchart.value = {
        xAxisData: res.data.displacementXList,
        seriesData: [],
      };
      displacementEchart.value.seriesData.push(res.data.displacementList);
      refreshDisplacement.value = Math.random();
    }, 500);
  });
}
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>