<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">
      <!-- 综合分析 -->
      <el-table :data="tableDataZH" border height="200" v-if="tabIndex == 1">
        <el-table-column prop="typeName" label="指标"></el-table-column>
        <el-table-column prop="typeName" label="实时"></el-table-column>
        <el-table-column prop="typeName" label="率定参考值"></el-table-column>
        <el-table-column prop="typeName" label="24小时均值"></el-table-column>
        <el-table-column prop="typeName" label="24小时最大"></el-table-column>
        <el-table-column prop="typeName" label="7小时均值"></el-table-column>
        <el-table-column prop="typeName" label="7小时最大"></el-table-column>
        <el-table-column prop="typeName" label="7小时最小"></el-table-column>
        <el-table-column prop="typeName" label="单位"></el-table-column>
      </el-table>
      <!-- 昼夜对比分析 -->
      <el-table :data="tableDataError" border height="200" v-if="tabIndex == 2">
        <el-table-column prop="typeName" label="指标"></el-table-column>
        <el-table-column prop="typeName" label="昼夜"></el-table-column>
        <el-table-column prop="typeName" label="24小时均值"></el-table-column>
        <el-table-column prop="typeName" label="24小时最大"></el-table-column>
        <el-table-column prop="typeName" label="7小时均值"></el-table-column>
        <el-table-column prop="typeName" label="7小时最大"></el-table-column>
        <el-table-column prop="typeName" label="7小时最小"></el-table-column>
        <el-table-column prop="typeName" label="单位"></el-table-column>
      </el-table>
      <!-- 晴雨天对比分析 -->
      <el-table :data="tableDataYW" border height="200" v-if="tabIndex == 3">
        <el-table-column prop="typeName" label="雨量级别"></el-table-column>
        <el-table-column prop="typeName" label="日历"></el-table-column>
        <el-table-column prop="typeName" label="降雨期COD均值(mg/L)"></el-table-column>
        <el-table-column prop="typeName" label="COD均值(mg/L)"></el-table-column>
        <el-table-column prop="typeName" label="DO均值(mg/L)"></el-table-column>
        <el-table-column prop="typeName" label="水量均值(m³/h)"></el-table-column>
      </el-table>
      <!-- 决策建议 -->
      <div class="suggest-nopx" v-if="tabIndex == 4">
        数据现状描述：<br />
        1、流量监晚上水量远高于白天且夜晚雨水管网COD浓度增加，雨水管网可能出现有偷拍的情况，建议排除上游排水户；<br />
        2、污水厂进水污水管网测试COD指标在雨天低于24小时均值，并严重偏离7日均值，污水管可能有雨水混排的情况，建议排查是否存在雨污混流的设计或者上游雨水倒灌。
      </div>
    </div>
  </div>
</template>
<script setup>
import {} from '@/api/dataAnalysis/syntherticData';

const tabIndex = ref('1');
const tabsArr = ref([
  { name: '综合分析', key: '1' },
  { name: '昼夜对比分析', key: '2' },
  { name: '晴雨天对比分析', key: '3' },
  { name: '决策建议', key: '4' },
]);
const tableDataZH = ref([{ typeName: '1' }, { typeName: '1' }, { typeName: '1' }]);
const tableDataError = ref([{ typeName: '1' }, { typeName: '1' }, { typeName: '1' }]);
const tableDataYW = ref([{ typeName: '1' }, { typeName: '1' }, { typeName: '1' }]);

// tab切换
function changeTab(key) {
  tabIndex.value = key;
}
// 初始化
onMounted(() => {
  changeTab('1');
});
</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;
    }
  }
}
</style>