<template>
  <!-- 数据分析 -->
  <div class="dataAnaly">
    <div class="tableLineMonitor">
      <el-button type="primary" @click="checkSuggest">查看决策建议</el-button>
    </div>
    <!-- 表格 -->
    <div class="tableBox animate__animated animate__zoomIn" v-loading="tableLoading">
      <div class="part">
        <p class="title">极值统计分析</p>
        <el-table :data="tableDataJZ">
          <el-table-column label="指标" prop="monitorName" width="120" show-overflow-tooltip />
          <el-table-column label="率定参考值" prop="refererValue" width="100" />
          <el-table-column label="24小时均值" prop="hoursAverage24Hours" width="100" />
          <el-table-column label="24小时最大" prop="hoursMax24Hours" width="100" />
          <el-table-column label="7日均值" prop="daysAverage7Days" />
          <el-table-column label="7日最大" prop="daysMax7Days" />
          <el-table-column label="7日最小" prop="daysMin7Days" />
          <el-table-column label="单位" prop="unit" />
        </el-table>
      </div>
      <div class="part">
        <p class="title">白天监测统计分析</p>
        <el-table :data="tableDataDay">
          <el-table-column label="指标" prop="monitorName" />
          <el-table-column label="24小时均值" prop="hoursAverage24Hours" />
          <el-table-column label="24小时最大" prop="hoursMax24Hours" />
          <el-table-column label="7日均值" prop="daysAverage7Days" />
          <el-table-column label="7日最大" prop="daysMax7Days" />
          <el-table-column label="7日最小" prop="daysMin7Days" />
          <el-table-column label="单位" prop="unit" />
        </el-table>
      </div>
      <div class="part">
        <p class="title">晴雨天监测对比分析</p>
        <el-table :data="tableDataSunBody">
          <el-table-column
            :label="item.title"
            :prop="item.key"
            v-for="(item, index) in tableDataSunHead"
            :key="index"
          ></el-table-column>
        </el-table>
      </div>
      <div class="part">
        <p class="title">夜间监测统计分析</p>
        <el-table :data="tableDataNight">
          <el-table-column label="指标" prop="monitorName" />
          <el-table-column label="24小时均值" prop="hoursAverage24Hours" />
          <el-table-column label="24小时最大" prop="hoursMax24Hours" />
          <el-table-column label="7日均值" prop="daysAverage7Days" />
          <el-table-column label="7日最大" prop="daysMax7Days" />
          <el-table-column label="7日最小" prop="daysMin7Days" />
          <el-table-column label="单位" prop="unit" />
        </el-table>
      </div>
    </div>
  </div>
  <!-- 决策建议弹窗 -->
  <el-dialog v-model="dialogShow" title="问题监测建议" width="600px" append-to-body class="equipMonitorDialog">
    <div class="content">{{ suggestText }}</div>
  </el-dialog>
</template>
<script setup>
import { getDataAnalyse, decisionSuggest } from '@/api/dataAnalysis/syntherticData';

const props = defineProps({
  searchDate: Array,
  stationCode: String,
});
const { proxy } = getCurrentInstance();

const tableDataJZ = ref([]);
const tableDataDay = ref([]);
const tableDataSunHead = ref([]);
const tableDataSunBody = ref([]);
const tableDataNight = ref([]);
const dialogShow = ref(false);
const suggestText = ref('');
const tableLoading = ref(true);

// 获取列表数据
function getList(code) {
  console.log('数据分析统计---', props.stationCode);
  tableLoading.value = true;
  tableDataSunHead.value = [];
  let params = {
    startDate: props.searchDate ? props.searchDate[0] : '',
    endDate: props.searchDate ? props.searchDate[1] : '',
    siteCode: code,
  };
  getDataAnalyse(params).then(res => {
    let datas = res.data;
    tableDataDay.value = datas.dayStatistics;
    tableDataNight.value = datas.nightStatistics;
    tableDataSunHead.value = datas.rtuSiteRainDayResponse.rainAnalysisReportHeadsList; //动态表头
    tableDataSunBody.value = datas.rtuSiteRainDayResponse.rainAnalysisReportValueList;
    tableDataJZ.value = datas.limitStatistics;
    tableLoading.value = false;
  });
}
// 获取决策建议
function checkSuggest() {
  let params = {
    startDate: props.searchDate ? props.searchDate[0] : '',
    endDate: props.searchDate ? props.searchDate[1] : '',
    siteCode: props.stationCode,
  };
  decisionSuggest(params).then(res => {
    suggestText.value = res.data;
    dialogShow.value = true;
  });
}
// 初始化
onMounted(() => {
  getList(props.stationCode);
});
defineExpose({
  getList,
});
onBeforeUnmount(() => {});
</script>
<style lang="scss">
.equipMonitorDialog {
  .content {
    padding-bottom: 30px;
    line-height: 28px;
    font-size: 16px;
    white-space: pre-wrap;
  }
}
.dataAnaly {
  width: 100%;
  .tableLineMonitor {
    margin-bottom: 15px;
  }
  .tableBox {
    display: flex;
    flex-wrap: wrap;
    .part {
      width: 49%;
      margin-right: 10px;
      .title {
        text-align: center;
        height: 30px;
        line-height: 30px;
        background: #0f69ff;
        color: #fff;
        margin-top: -10px;
      }
      .el-table {
        top: -15px;
        .el-scrollbar {
          height: calc(100vh - 825px);
        }
      }
    }
  }
}
</style>