<template>
  <!-- 数据状态- 数据异常分析 -->
  <div class="dataError">
    <div class="tabsBtn">
      <el-button
        :type="tabIndex == item.key ? 'primary' : ''"
        v-for="item in tabsArr"
        :key="item.key"
        @click="changeTab(item.key)"
      >
        {{ item.name }}
      </el-button>
    </div>
    <div class="content" v-loading="tableLoading">
      <!-- 综合分析 -->
      <el-table :data="tableDataZH" border height="200" v-if="tabIndex == 1">
        <el-table-column label="指标" prop="monitorName" />
        <el-table-column label="实时" prop="monitorValue" />
        <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>
      <!-- 昼夜对比分析 -->
      <el-table :data="tableDataError" border height="200" v-if="tabIndex == 2">
        <el-table-column prop="monitorName" label="指标"></el-table-column>
        <el-table-column prop="dayNightType" label="昼夜">
          <template #default="{ row }">
            <div>{{ row.dayNightType == 'day' ? '白天' : '晚上' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="hoursAverage24Hours" label="24小时均值"></el-table-column>
        <el-table-column prop="hoursMax24Hours" label="24小时最大"></el-table-column>
        <el-table-column prop="daysAverage7Days" label="7小时均值"></el-table-column>
        <el-table-column prop="daysMax7Days" label="7小时最大"></el-table-column>
        <el-table-column prop="daysMin7Days" label="7小时最小"></el-table-column>
        <el-table-column prop="unit" label="单位"></el-table-column>
      </el-table>
      <!-- 晴雨天对比分析 -->
      <el-table :data="tableDataSunBody" border height="200" v-if="tabIndex == 3">
        <el-table-column
          :label="item.title"
          :prop="item.key"
          v-for="(item, index) in tableDataSunHead"
          :key="index"
        ></el-table-column>
      </el-table>
      <!-- 决策建议 -->
      <div class="suggest-nopx" v-if="tabIndex == 4">
        <div class="suggestText">{{ suggestText }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { getDataAnalyse, decisionSuggest } from '@/api/dataAnalysis/syntherticData';

const props = defineProps({
  stationRow: Object,
});
const { proxy } = getCurrentInstance();
const tabIndex = ref('1');
const tabsArr = ref([
  { name: '综合分析', key: '1' },
  { name: '昼夜对比分析', key: '2' },
  { name: '晴雨天对比分析', key: '3' },
  { name: '决策建议', key: '4' },
]);
const suggestText = ref('--');
const tableDataZH = ref([]);
const tableDataError = ref([]);
const tableDataSunHead = ref([]);
const tableDataSunBody = ref([]);
const tableLoading = ref(true);
const dateRange = ref([]);

// tab切换
function changeTab(key) {
  tabIndex.value = key;
}
// 获取数据
function getDataList() {
  tableLoading.value = true;
  let params = {
    startDate: dateRange.value[0],
    endDate: dateRange.value[1],
    siteCode: props.stationRow.stCode,
  };
  getDataAnalyse(params).then(res => {
    let datas = res.data;
    tableDataZH.value = datas.limitStatistics;
    tableDataSunHead.value = datas.rtuSiteRainDayResponse.rainAnalysisReportHeadsList; //动态表头
    tableDataSunBody.value = datas.rtuSiteRainDayResponse.rainAnalysisReportValueList;
    tableDataError.value = datas.dayNightStatistics;
    tableLoading.value = false;
  });
}
// 获取决策建议
function checkSuggest() {
  let params = {
    startDate: dateRange.value[0],
    endDate: dateRange.value[1],
    siteCode: props.stationRow.stCode,
  };
  decisionSuggest(params).then(res => {
    suggestText.value = res.data;
  });
}

// 初始化
onMounted(() => {
  // 获取右侧查询日期
  dateRange.value = localStorage.getItem('searchDateRangeEquip').split(',');
  getDataList();
  checkSuggest();
});
</script>
<style lang="scss">
.dataError {
  width: 100%;
  .tabsBtn {
    text-align: center;
  }
  .content {
    margin-top: 15px;
    .suggest-nopx {
      line-height: 26px;
      padding: 10px;
      font-size: 14px;
      border: 1px solid #ebf5ff;
      height: 200px;
      overflow: auto;
      .suggestText {
        line-height: 28px;
        font-size: 16px;
        white-space: pre-wrap;
      }
    }
  }
}
</style>