<template>
  <!-- 数据采集子系统-遥测站数据统计报表 -->
  <div class="publicContainer">
    <!-- 搜索区域 -->
    <el-form ref="queryRef" :inline="true" :model="queryParams">
      <el-form-item label="监测站类型" prop="stType">
        <el-select v-model="stType" @change="changeType">
          <el-option v-for="item in stationTypes" :key="item.id" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="站点名称" prop="stCode">
        <el-select clearable v-model="queryParams.stCode" filterable>
          <el-option v-for="item in stationList" :key="item.id" :label="item.stName" :value="item.stCode" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间维度" prop="dateType">
        <el-select v-model="queryParams.dateType">
          <el-option key="1" label="日" value="1" />
          <el-option key="2" label="月" value="2" />
          <el-option key="3" label="年" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="日期选择" prop="date">
        <el-date-picker
          type="date"
          v-model="queryParams.date"
          value-format="YYYY-MM-DD"
          placeholder="请选择日期"
          v-if="queryParams.dateType == '1'"
        >
        </el-date-picker>
        <el-date-picker
          type="month"
          v-model="queryParams.date"
          value-format="YYYY-MM"
          placeholder="请选择日期"
          v-if="queryParams.dateType == '2'"
        ></el-date-picker>
        <el-date-picker
          type="year"
          v-model="queryParams.date"
          value-format="YYYY"
          placeholder="请选择日期"
          v-if="queryParams.dateType == '3'"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button type="warning" icon="Download" @click="handleExport">导出</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table v-loading="tableLoading" :data="tableData" max-height="750">
      <el-table-column label="时间" prop="reportTime" />
      <el-table-column label="流速(m/s)" prop="va">
        <template #default="scope">{{ scope.row.va || '--' }} </template>
      </el-table-column>
      <el-table-column label="水位(m)" prop="z">
        <template #default="scope">{{ scope.row.z || '--' }} </template>
      </el-table-column>
      <el-table-column label="浊度(度)" prop="turb">
        <template #default="scope">{{ scope.row.turb || '--' }} </template>
      </el-table-column>
      <el-table-column label="小时流量(m³/s)" prop="sbl1">
        <template #default="scope">{{ scope.row.sbl1 || '--' }} </template>
      </el-table-column>
      <el-table-column label="累计流量(m³)" prop="cq1">
        <template #default="scope">{{ scope.row.cq1 || '--' }} </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { getStationList } from '@/api/dataAnalysis/syntherticData';
import { siteMonitorReport } from '@/api/dataAnalysis/realAlarm';

const { proxy } = getCurrentInstance();

const queryParams = ref({
  stCode: null,
  dateType: '2',
  date: proxy.moment(new Date()).format('YYYY-MM'),
});
const stType = ref('total');
const stationList = ref([]);
const stationTypes = ref([
  { label: '全部', id: '1', value: 'total' },
  { label: '源头地块', id: '2', value: 'typical_land' },
  { label: '雨量', id: '3', value: 'rainfall' },
  { label: '管网', id: '4', value: 'pipeline' },
  { label: '内涝点', id: '5', value: 'waterlogging' },
  { label: '排口', id: '6', value: 'drain_outlet' },
  { label: '河道', id: '7', value: 'river' },
]);
const tableData = ref([]);
const tableLoading = ref(false);

/** 获取查询数据列表 */
function getDataList() {
  tableLoading.value = true;
  siteMonitorReport(queryParams.value).then(response => {
    tableData.value = response.data;
    tableLoading.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  getDataList();
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    'business/siteHistoryMonitor/siteMonitorReportExport',
    {
      ...queryParams.value,
    },
    `遥测站数据统计 ${new Date().getTime()}.xlsx`
  );
}
// 筛选监测站类型
function changeType(val) {
  stType.value = val;
  getStationData();
}
//获取站点数据
const getStationData = async () => {
  let params = {
    monitorTargetType: stType.value == 'total' ? '' : stType.value,
    stCode: '',
    orderBy: 'tt desc',
  };
  let res = await getStationList(params);
  if (res && res.code == 200) {
    let datas = res.data;
    stationList.value = datas || [];
    queryParams.value.stCode = datas[0].stCode;
    getDataList();
  }
};

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

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