<template>
  <!-- 数据状态- 数据异常分析 -->
  <div class="ShuJuYiChangFenXi">
    <!-- 日期搜索 -->
    <div class="search">
      <el-date-picker
        v-model="dateRange"
        value-format="YYYY-MM-DD"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="false"
      ></el-date-picker>
      <el-button type="primary" @click="searchData">查询</el-button>
    </div>
    <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="100%" 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="100%" 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="100%" 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 name="ShuJuYiChangFenXi">
import { ref, reactive, toRefs, onMounted } from "vue";
import { getDataAnalyse, decisionSuggest } from "@/api/dataAnalysis/syntherticData";

const props = defineProps({
  SiteNo: String,
  dataID: String,
});
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([
  proxy.moment().subtract(15, "days").format("YYYY-MM-DD"),
  proxy.moment().format("YYYY-MM-DD"),
]);
// tab切换
function changeTab(key) {
  tabIndex.value = key;
}
// 获取数据
function getDataList() {
  tableLoading.value = true;
  let params = {
    startDate: dateRange.value[0],
    endDate: dateRange.value[1],
    siteCode: props.SiteNo,
  };
  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.SiteNo,
  };
  decisionSuggest(params).then((res) => {
    suggestText.value = res.data;
  });
}
function searchData() {
  if (tabIndex != "4") {
    getDataList();
  } else {
    checkSuggest();
  }
}
// 初始化
onMounted(() => {
  // 获取右侧查询日期
  getDataList();
  checkSuggest();
});
</script>
<style lang="scss" scoped>
.ShuJuYiChangFenXi {
  width: 100%;
  padding: 10px;
  height: 100%;
  box-sizing: border-box;

  .search {
    margin-top: 5px;
    .el-button {
      margin-left: 15px;
      margin-top: -6px;
    }
  }
  .tabsBtn {
    text-align: left;
    margin-top: 10px;
    .el-button {
      border-radius: 15px;
      margin-right: 15px;
    }
  }
  .content {
    margin-top: 15px;
    height: calc(100% - 90px);
    .suggest-nopx {
      line-height: 26px;
      padding: 10px;
      font-size: 14px;
      border: 1px solid #ebf5ff;
      height: 100%;
      overflow: auto;
      .suggestText {
        line-height: 28px;
        font-size: 16px;
        white-space: pre-wrap;
      }
    }
  }
}
</style>