<template>
  <!-- 综合分析右侧列表 -->
  <div class="ZhongheFenXi">
    <!-- 统计分析 -->
    <div class="contAnaly">
      <!-- 日期搜索 -->
      <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>
      <!-- tab内容切换 -->
      <div class="tabsBtn">
        <div class="tabsHeader">
          <div
            class="TopBtns"
            :class="[tabIndex == item.key ? 'TopBtnsActive' : '']"
            v-for="item in tabsArr"
            :key="item.key"
            @click="changeTab(item.key)"
          >
            {{ item.name }}
          </div>
        </div>

        <div class="tabsCont">
          <!-- 基本信息(原实时数据) -->
          <JiBenXinXi
            v-if="tabIndex == '0'"
            :stationCode="stationCode"
            :dataID="dataID"
            ref="jiBenXinXi"
          ></JiBenXinXi>
          <!-- 数据统计 -->
          <DataStats
            v-if="tabIndex == '1'"
            :searchDate="dateRange"
            :stationCode="stationCode"
            @changeOneData="changeOneData"
            ref="dataStatus"
          ></DataStats>
          <!-- 报表分析 -->
          <ReportAnaly
            v-if="tabIndex == '2'"
            :searchDate="dateRange"
            :stationCode="stationCode"
            ref="reportAnaly"
            @changeOneData="changeOneData"
          ></ReportAnaly>
          <!-- 趋势统计 -->
          <TrendAnaly
            v-if="tabIndex == '3'"
            :searchDate="dateRange"
            :stationCode="stationCode"
            ref="trendAnaly"
          ></TrendAnaly>
          <!-- 报警分析 -->
          <AlarmAnaly
            v-if="tabIndex == '4'"
            :searchDate="dateRange"
            :stationCode="stationCode"
            ref="alarmAnaly"
          ></AlarmAnaly>
          <!-- 运维分析 -->
          <OperationAnaly
            v-if="tabIndex == '5'"
            :searchDate="dateRange"
            :stationCode="stationCode"
            ref="operationAnaly"
          ></OperationAnaly>
          <!-- 数据分析 -->
          <DataAnaly
            v-if="tabIndex == '6'"
            :searchDate="dateRange"
            :stationCode="stationCode"
            ref="dataAnaly"
          ></DataAnaly>
          <!-- 电子档案 -->
          <StationBase
            v-if="tabIndex == '7'"
            :stationCode="stationCode"
            :dataID="dataID"
            ref="stationBase"
          ></StationBase>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="ZhongheFenXi">
import bus from "@/bus";
import JiBenXinXi from "./ZhongheFenXi_component/jiBenXinXi.vue"; //基本信息
import DataStats from "./ZhongheFenXi_component/dataStats.vue"; //数据统计
import ReportAnaly from "./ZhongheFenXi_component/reportAnaly.vue"; //报表分析
import TrendAnaly from "./ZhongheFenXi_component/trendAnaly.vue"; //趋势统计
import AlarmAnaly from "./ZhongheFenXi_component/alarmAnaly.vue"; //报警分析
import OperationAnaly from "./ZhongheFenXi_component/operationAnaly.vue"; //运维分析
import DataAnaly from "./ZhongheFenXi_component/dataAnaly.vue"; //数据分析
import StationBase from "./ZhongheFenXi_component/stationBase.vue"; //电子档案

const props = defineProps({
  SiteNo: String,
  dataID: String,
});
const { proxy } = getCurrentInstance();

// 变量声明
const stationCode = props.SiteNo;
const dataID = props.dataID;
const tabsArr = ref([
  { name: "基本信息", key: "0" },
  { name: "数据统计", key: "1" },
  { name: "报表分析", key: "2" },
  { name: "趋势统计", key: "3" },
  { name: "报警分析", key: "4" },
  { name: "运维分析", key: "5" },
  { name: "数据分析", key: "6" },
  { name: "电子档案", key: "7" },
]);
const tabIndex = ref("0"); //默认选中
const tableLoading = ref(false);
const tableData = ref([{ monitorPropertyList: [] }]);
const dateRange = ref([
  proxy.moment().subtract(15, "days").format("YYYY-MM-DD"),
  proxy.moment().format("YYYY-MM-DD"),
]);
const dataStatus = ref(null);
const reportAnaly = ref(null);
const alarmAnaly = ref(null);
const trendAnaly = ref(null);
const operationAnaly = ref(null);
const dataAnaly = ref(null);
const jiBenXinXi = ref(null);
const stationBase = ref(null);

// 方法定义
// 搜索数据
function searchData() {
  changeTab(tabIndex.value);
  switch (tabIndex.value) {
    case "0":
      setTimeout(() => {
        jiBenXinXi.value.getDetailData(dataID);
        jiBenXinXi.value.getLatestData();
      });
      break;
    case "1":
      setTimeout(() => {
        dataStatus.value.getList(stationCode);
      });
      break;
    case "2":
      setTimeout(() => {
        reportAnaly.value.getList(stationCode);
      });
      break;
    case "3":
      setTimeout(() => {
        trendAnaly.value.getList(stationCode);
      });
      break;
    case "4":
      setTimeout(() => {
        alarmAnaly.value.getList(stationCode);
      });
      break;
    case "5":
      setTimeout(() => {
        operationAnaly.value.getList(stationCode);
      });
      break;
    case "6":
      setTimeout(() => {
        dataAnaly.value.getList(stationCode);
      });
    case "7":
      setTimeout(() => {
        stationBase.value.getList(stationCode);
      });
      break;
  }
}
// tab切换
function changeTab(key) {
  tabIndex.value = key;
}
// 数据统计和报表分析右上角切换事件
function changeOneData(key) {
  tabIndex.value = key;
  changeTab(tabIndex.value);
}

watch(
  () => dateRange.value,
  (val) => {
    localStorage.setItem("searchDateRangeEquip", dateRange.value);
  }
);
// 初始化
onMounted(() => {
  localStorage.setItem("searchDateRangeEquip", dateRange.value);
});

// 页面销毁
onBeforeUnmount(() => {
  bus.off("leftStationClick");
});
</script>
<style lang="scss" scoped>
.ZhongheFenXi {
  width: 100%;
  height: 100%;
  .contAnaly {
    background: #00367400;
    box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
    border-radius: 6px;
    padding: 10px;
    margin-top: 5px;
    width: 100%;
    height: 100%;
    .search {
      .el-button {
        margin-left: 15px;
        margin-top: -6px;
      }
    }
    .tabsBtn {
      margin-top: 10px;
      width: 100%;
      height: calc(100% - 30px);
      .tabsHeader {
        width: 100%;
        height: 40px;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1px;
          background: #114f89;
        }

        .TopBtns {
          height: 40px;
          line-height: 40px;
          width: auto;
          float: left;
          padding: 0 10px;
          margin: 0 10px;
          color: #a4bfd9;
          cursor: pointer;
        }
        .TopBtnsActive {
          color: #3cbdff;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background: #3cbdff;
          }
        }
      }

      .el-button {
        border-radius: 15px;
        margin-right: 15px;
      }
      .tabsCont {
        margin-top: 10px;
        height: calc(100% - 50px);
        overflow: auto;
      }
    }
  }
}
</style>