<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>