<template>
  <!-- 监测设备 -->
  <div class="equipJCPage">
    <div class="partTitleHM">监测设备</div>
    <div class="partContHM">
      <!-- 类型 -->
      <div class="flex flex-wrap">
        <div
          :class="['part', stationIndex == item.key ? 'active' : '']"
          v-for="(item, index) in stationType"
          :key="index"
          @click="checkStation(item.key)"
        >
          {{ item.name }}{{ headerObj[item.key] || '(--)' }}
        </div>
      </div>
      <!-- 监测内容 -->
      <div class="monitorCont" v-loading="loadingList">
        <el-select clearable filterable v-model="stationCode" placeholder="请输入站点名称" class="stationSel" @change="searchData">
          <el-option v-for="item in stationList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
        </el-select>
        <div class="contPart" v-for="item in stationList" :key="item.stCode">
          <div class="title">{{ item.stName }}</div>
          <img src="@/assets/newImgs/HMScreen/video.png" alt="" @click="dialogShowVideo = true" />
          <div class="flex flex-wrap">
            <div class="parts">
              站点状态
              <span class="green" v-if="item.onlineStatus == 'online'">在线</span>
              <span class="red" v-if="item.onlineStatus == 'offline'">离线</span>
            </div>
            <div class="parts">
              数据状态
              <span :class="item.faultStatus == 'normal' ? 'success' : 'fail'">
                {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }}
              </span>
            </div>
            <div class="parts">
              监测类型
              <span>
                {{ item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质' }}
              </span>
            </div>
            <div class="parts">
              建设方式
              <span :class="item.buildType == 'owner' ? 'success' : 'yellow'">
                {{ item.buildType == 'owner' ? '新建' : '共享' }}
              </span>
            </div>
            <div class="parts" style="width: 100%">
              最后通讯 <span>{{ item.tt }}</span>
            </div>
          </div>
        </div>
        <empty v-if="stationList.length == 0" :width="100" :height="100" style="margin-top: 50px"></empty>
      </div>
    </div>
    <!-- 视频弹窗 -->
    <el-dialog title="站点视频" v-model="dialogShowVideo" width="800px" append-to-body>
      <img src="@/assets/newImgs/HMScreen/videoTest.png" alt="" />
    </el-dialog>
  </div>
</template>

<script setup>
import { getSiteInfoCountZH } from '@/api/dataAnalysis/syntherticData';
import { getStationList } from '@/api/dataAnalysis/syntherticData';
const { proxy } = getCurrentInstance();

const dialogShowVideo = ref(false);
const stationIndex = ref('total');
const stationType = ref([
  { name: '全部', value: '1', key: 'total' },
  { name: '雨量站', value: '3', key: 'rainfall' },
  { name: '河道断面', value: '7', key: 'river' },
  { name: '管网监测点', value: '4', key: 'pipeline' },
  { name: '内涝点', value: '5', key: 'waterlogging' },
  { name: '海绵设施', value: '6', key: 'drain_outlet' },
  { name: '源头地块', value: '2', key: 'typical_land' },
]);
const loadingList = ref(true);
const headerObj = ref({});
const stationCode = ref('');
const stationList = ref([]);
const faultList = ref([
  { value: 'normal', label: '正常' },
  { value: 'low_battery', label: '低电压' },
  { value: 'low_signal', label: '低信号' },
  { value: 'exception', label: '异常值' },
  { value: 'offline', label: '离线' },
]);

// 获取不同监测类型对应数量
const getStationCount = async () => {
  let res = await getSiteInfoCountZH();
  if (res && res.code == 200) {
    headerObj.value = res.data;
  }
};

// 类型点击
function checkStation(key) {
  stationIndex.value = key;
  getStationData();
}

// 按名称搜索
function searchData() {
  getStationData(stationCode.value);
}

//获取站点数据
const getStationData = async () => {
  loadingList.value = true;
  let params = {
    monitorTargetType: stationIndex.value == 'total' ? '' : stationIndex.value,
    stCode: stationCode.value,
    orderBy: 'tt desc',
  };
  let res = await getStationList(params);
  if (res && res.code == 200) {
    let datas = res.data;
    stationList.value = datas || [];
  }
  loadingList.value = false;
};

onMounted(() => {
  getStationCount(); // 获取不同监测类型对应数量
  checkStation('total'); //加载全部站点
});
</script>

<style lang="scss" scoped>
.equipJCPage {
  width: 100%;
  .partContHM {
    .part {
      background: #013a73;
      border: 1px solid #2ddaff;
      cursor: pointer;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #e4f5ff;
      padding: 3px 5px;
      margin: 0px 5px 8px 0px;
      &:hover {
        background: #166f84;
        border: 1px solid #2cfce9;
      }
    }
    .active {
      background: #166f84;
      border: 1px solid #2cfce9;
    }
    .monitorCont {
      height: calc(100vh - 315px);
      overflow: auto;
      .stationSel {
        width: 100%;
        margin-bottom: 10px;
      }
      .contPart {
        background: rgba(9, 145, 222, 0.3);
        padding: 5px 15px;
        margin-bottom: 5px;
        position: relative;
        .parts {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          color: #b8ecff;
          margin-bottom: 6px;
          width: 50%;
          span {
            color: #3afff8;
            font-weight: 400;
            font-size: 16px;
            margin-left: 10px;
          }
        }
        .title {
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 18px;
          color: #e4f5ff;
          cursor: pointer;
          margin-bottom: 8px;
        }
        img {
          width: 26px;
          height: 26px;
          position: absolute;
          top: 5px;
          right: 30px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>