<template>
  <!-- 综合分析右侧列表 -->
  <div class="equipRightMonitorPage">
    <!-- 基本信息 -->
    <div class="basePart">
      <div class="infoC" :title="baseInfo.stName">
        <span>站点名称:</span><span class="value">{{ baseInfo.stName || '--' }}</span>
      </div>
      <div class="infoC">
        <span>站点编号:</span><span class="value">{{ baseInfo.stCode || '--' }}</span>
      </div>
      <div class="infoC" :title="baseInfo.address">
        <span>安装地址:</span><span class="value">{{ baseInfo.address || '--' }}</span>
      </div>
      <div class="infoC">
        <span>站点类型:</span>
        <span class="value">
          {{
            baseInfo.siteType == 'water_level'
              ? '水位'
              : baseInfo.siteType == 'flow'
              ? '流量'
              : baseInfo.siteType == 'rain'
              ? '降雨'
              : baseInfo.siteType == 'quality'
              ? '水质'
              : '--'
          }}
        </span>
      </div>
      <div class="infoC">
        <span>安装时间:</span><span class="value">{{ baseInfo.installDate || '--' }}</span>
      </div>
      <div class="infoC">
        <span>建设方式:</span>
        <span class="value">
          {{
            baseInfo.buildType == 'owner'
              ? '自建'
              : baseInfo.buildType == 'share'
              ? '共享'
              : baseInfo.buildType == 'official'
              ? '市局'
              : '--'
          }}
        </span>
      </div>
      <div :title="baseInfo.lonLat" class="infoC">
        <span>定位:</span><span class="value">{{ baseInfo.lonLat || '--' }}</span>
      </div>
      <div class="infoC">
        <span>高程:</span>
        <span class="value">
          {{
            baseInfo.elevationSystem == 'yellow_sea'
              ? '黄海'
              : baseInfo.elevationSystem == '85'
              ? '85国标'
              : baseInfo.elevationSystem == 'wusong'
              ? '吴淞'
              : '--'
          }}
        </span>
      </div>
      <div class="infoC">
        <span>关联对象:</span><span class="value">{{ baseInfo.belongName || '--' }}</span>
      </div>
      <div class="infoC"><div class="check" @click="checkMore(baseInfo)">查看更多>></div></div>
      <!-- 最新一条数据 -->
      <el-table v-loading="tableLoading" :data="tableData" height="85">
        <el-table-column prop="stCode" label="站点编号" width="130"></el-table-column>
        <el-table-column prop="tt" label="实时观测时间" width="170"></el-table-column>
        <!-- 动态因子表头列 -->
        <el-table-column
          v-if="!!tableData[0]"
          v-for="(item, index) in tableData[0].monitorPropertyList"
          :key="index"
          :prop="item.monitorCode"
          :label="item.monitorName + item.unit"
          show-overflow-tooltip
          width="200"
        >
        </el-table-column>
        <el-table-column prop="installHeight" label="安装高度(m)" width="120"></el-table-column>
        <el-table-column prop="faultStatus" label="故障状态" min-width="120">
          <template #default="scope">
            <span :class="scope.row.faultStatus == 'normal' ? 'success' : 'fail'">
              {{
                scope.row.faultStatus == 'normal'
                  ? '正常'
                  : scope.row.faultStatus == 'low_battery'
                  ? '低电压'
                  : scope.row.faultStatus == 'low_signal'
                  ? '低信号'
                  : scope.row.faultStatus == 'exception'
                  ? '异常值'
                  : scope.row.faultStatus == 'offline'
                  ? '离线'
                  : '--'
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="onlineStatus" label="在线状态" min-width="120">
          <template #default="scope">
            <span :class="scope.row.onlineStatus == 'online' ? 'success' : 'fail'">
              {{ scope.row.onlineStatus == 'online' ? '在线' : scope.row.faultStatus == 'offline' ? '离线' : '--' }}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="对比分析" width="110" fixed="right">
          <template #default="scope">
            <img src="@/assets/images/monitor/dbfx_btn.png" alt="对比分析" class="dbfxImg" @click="checkAnalysis(scope.row)" />
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <!-- 统计分析 -->
    <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="success" @click="searchData">搜索</el-button>
        <el-button type="warning" @click="exportData">导出</el-button>
      </div>
      <!-- tab内容切换 -->
      <div class="tabsBtn">
        <el-button
          :type="tabIndex == item.key ? 'warning' : 'primary'"
          v-for="item in tabsArr"
          :key="item.key"
          @click="changeTab(item.key)"
        >
          {{ item.name }}
        </el-button>
        <div class="tabsCont">
          <!-- 数据统计 -->
          <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>
        </div>
      </div>
    </div>
    <!-- 查看更多弹窗 -->
    <el-dialog v-model="dialogShow" title="站点基本信息" width="1000px" append-to-body class="equipMonitorDialog">
      <StationBase v-if="dialogShow" :stationInfo="baseInfo"></StationBase>
    </el-dialog>
    <!-- 站点对比分析弹窗 -->
    <el-dialog v-model="dialogShowDB" title="站点对比分析" width="1500px" append-to-body class="equipMonitorDialog">
      <StationDialog v-if="dialogShowDB" :stationDBInfo="stationDBInfo"></StationDialog>
    </el-dialog>
  </div>
</template>
<script setup name="equipRightMonitorPage">
import { getStationDetail, realtimeDataLatest } from '@/api/dataAnalysis/syntherticData';
import bus from '@/utils/mitt';
import DataStats from './dataStats.vue'; //数据统计
import ReportAnaly from './reportAnaly.vue'; //报表分析
import TrendAnaly from './trendAnaly.vue'; // 报警分析
import AlarmAnaly from './alarmAnaly.vue'; // 趋势统计
import OperationAnaly from './operationAnaly.vue'; //运维分析
import DataAnaly from './dataAnaly.vue'; //数据分析
import StationBase from './stationBase.vue'; //基本信息查看更多
import StationDialog from './stationDialog.vue'; //站点对比分析

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

// 变量声明
const baseInfo = ref({});
const stationCode = ref('');
const tabsArr = ref([
  { name: '数据统计', key: '1' },
  { name: '报表分析', key: '2' },
  { name: '趋势统计', key: '3' },
  { name: '报警记录', key: '4' },
  { name: '运维分析', key: '5' },
  { name: '数据分析', key: '6' },
]);
const tabIndex = ref('1'); //默认选中
const tableLoading = ref(false);
const tableData = ref([{ monitorPropertyList: [] }]);
const dialogShow = ref(false);
const dialogShowDB = ref(false);
const stationDBInfo = ref({});
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);

// 方法定义
// 搜索数据
function searchData() {
  changeTab(tabIndex.value);
  switch (tabIndex.value) {
    case '1':
      setTimeout(() => {
        dataStatus.value.getList(stationCode.value);
      });
      break;
    case '2':
      setTimeout(() => {
        reportAnaly.value.getList(stationCode.value);
      });
      break;
    case '3':
      setTimeout(() => {
        trendAnaly.value.getList(stationCode.value);
      });
      break;
    case '4':
      setTimeout(() => {
        alarmAnaly.value.getList(stationCode.value);
      });
      break;
    case '5':
      setTimeout(() => {
        operationAnaly.value.getList(stationCode.value);
      });
      break;
    case '6':
      setTimeout(() => {
        dataAnaly.value.getList(stationCode.value);
      });
      break;
  }
}
// 导出数据
function exportData() {
  let params = {
    startTime: dateRange.value[0],
    endTime: dateRange.value[1],
    stCode: stationCode.value,
  };
  proxy.download(
    'business/siteHistoryMonitor/dataAnalysis/export',
    {
      ...params,
    },
    `siteHistoryMonitor_${new Date().getTime()}.zip`
  );
}
// tab切换
function changeTab(key) {
  tabIndex.value = key;
}
// 数据统计和报表分析右上角切换事件
function changeOneData(key) {
  tabIndex.value = key;
  changeTab(tabIndex.value);
}
// 对比分析点击
function checkAnalysis(row) {
  stationDBInfo.value = row;
  dialogShowDB.value = true;
}
// 查看更多
function checkMore(obj) {
  dialogShow.value = true;
}
// 获取详情数据
const getDetailData = id => {
  getStationDetail(id).then(res => {
    baseInfo.value = res.data;
  });
};
// 获取最新一条数据
function getLatestData() {
  tableLoading.value = true;
  tableData.value = [];
  realtimeDataLatest(stationCode.value).then(res => {
    tableData.value.push(res.data);
    tableLoading.value = false;
  });
}
watch(
  () => dateRange.value,
  val => {
    localStorage.setItem('searchDateRangeEquip', dateRange.value);
  }
);
// 初始化
onMounted(() => {
  localStorage.setItem('searchDateRangeEquip', dateRange.value);
  bus.on('leftStationClick', e => {
    // console.log('获取左侧站点值---', e);
    stationCode.value = e.stCode;
    if (!!e.id) {
      getDetailData(e.id); //获取详情数据
      getLatestData(); //获取最新一条数据
      searchData(); //默认加载数据统计
    }
  });
});

// 页面销毁
onBeforeUnmount(() => {
  bus.off('leftStationClick');
});
</script>
<style lang="scss">
@import '@/assets/styles/variables.module.scss';
.equipRightMonitorPage {
  width: 100%;
  .basePart {
    display: flex;
    flex-wrap: wrap;
    background: $mainColor1;
    box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
    overflow: auto;
    .infoC {
      width: 20%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #c6c6c6;
      margin-top: 10px;
      span:nth-of-type(1) {
        display: inline-block;
        width: 80px;
        padding-left: 10px;
      }
      .value {
        flex: 1;
        font-weight: bold;
        color: #c6c6c6;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .check {
        color: #24de8d;
        cursor: pointer;
        padding-left: 10px;
      }
    }
    .el-table {
      margin: 10px;
      border-top: 1px solid $mainColor2;
      .dbfxImg {
        cursor: pointer;
      }
      .success {
        color: #24de8d;
        font-weight: bold;
      }
      .fail {
        color: #f85050;
        font-weight: bold;
      }
    }
  }
  .contAnaly {
    background: $mainColor1;
    box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
    border-radius: 6px;
    padding: 10px;
    margin-top: 5px;
    .search {
      .el-button {
        margin-left: 15px;
        margin-top: -6px;
      }
    }
    .tabsBtn {
      margin-top: 10px;
      .el-button {
        border-radius: 15px;
        margin-right: 15px;
      }
      .tabsCont {
        margin-top: 10px;
        height: calc(100vh - 428px);
        overflow: auto;
      }
    }
  }
}
</style>