<template>
  <!-- 监测分析一张图右侧列表 -->
  <div class="equipLeft">
    <div class="equipTotal">
      <div class="title"><img src="@/assets/icons/monitor/jcsb_icon.png" alt="监测设备" />监测设备</div>
      <template v-if="statusData.length > 0">
        <div class="total" v-for="(item, index) in statusData" :key="index">
          <p class="totalLabel">
            {{ item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质' }}
          </p>
          <p><img src="@/assets/icons/monitor/online_icon.png" alt="在线" title="在线" />{{ item.onlineCount }}</p>
          <p><img src="@/assets/icons/monitor/outline_icon.png" alt="离线" title="离线" />{{ item.offlineCount }}</p>
          <p><img src="@/assets/icons/monitor/error_icon.png" alt="故障" title="故障" />{{ item.faultCount }}</p>
        </div>
      </template>
      <!-- 暂无数据 -->
      <el-empty :image-size="30" v-if="statusData.length == 0" style="padding: 5px" />
    </div>
    <div class="search">
      <el-select v-model="stationCode" filterable clearable placeholder="选择监测站点" @change="searchData">
        <el-option v-for="item in stationList" :key="item.value" :label="item.stName" :value="item.stCode" />
      </el-select>
    </div>
    <!-- 站点列表 -->
    <div
      class="station"
      v-if="stationList.length > 0"
      v-loading="loadingList"
      element-loading-text="Loading..."
      element-loading-background="#010d12ed"
    >
      <div
        :class="['part', checkedCode == item.stCode ? 'checkedActive' : '']"
        v-for="(item, index) in stationList"
        :key="index"
        @click="checkStation(item)"
      >
        <div class="title" :title="item.stName">
          <span>{{ item.stName }}</span>
        </div>
        <div class="cont">
          <p>
            <span class="status">站点状态</span>
            <span class="success" v-if="item.onlineStatus == 'online'">在线</span>
            <span class="fail" v-if="item.onlineStatus == 'offline'">离线</span>
            <img
              src="@/assets/icons/monitor/yw_btn.png"
              title="运维派单"
              @click.stop="checkOrder(item)"
              v-if="item.onlineStatus == 'offline'"
            />
          </p>
          <p>
            <span class="status">数据状态</span>
            <span :class="item.faultStatus == 'normal' ? 'success' : 'fail'">
              {{ faultList.filter(item2 => item2.value == item.faultStatus)[0].label }}
            </span>
            <img
              src="@/assets/icons/monitor/sj_btn.png"
              title="故障及离线设备分析"
              @click.stop="checkFault(item)"
              v-if="item.faultStatus == 'offline'"
            />
            <img
              src="@/assets/icons/monitor/sj_btn.png"
              title="数据异常分析"
              @click.stop="checkError(item)"
              v-if="item.faultStatus == 'exception'"
            />
          </p>
          <p>
            <span style="margin-right: 15px; color: #a4bfd9">站点类型</span>
            <span style="color: #fff">
              {{ item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质' }}
            </span>
          </p>
          <p>
            <span style="margin-right: 15px; color: #a4bfd9">最后通讯</span>
            <span style="font-weight: bold; color: #fff">{{ item.tt }}</span>
            <!-- videoFlag 0否 1是-->
            <img src="@/assets/icons/monitor/video_btn.png" title="站点视频" @click.stop="checkVideo(item)" v-if="item.videoFlag == 1" />
          </p>
        </div>
      </div>
    </div>
    <!-- 暂无数据 -->
    <el-empty
      :image-size="100"
      v-if="stationList.length == 0"
      v-loading="loadingList"
      element-loading-text="Loading..."
      element-loading-background="#010d12ed"
    />
  </div>
</template>
<script setup name="equipLeft">
import { getStationList, rtuSiteTypeStatusCount } from '@/api/sponeScreen/syntherticData';
import bus from '@/bus';
const { proxy } = getCurrentInstance();
// const emit = defineEmits(["getDialogData"]);
const props = defineProps({
  monitorTargetType: String,
});
// 变量声明
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 loadingList = ref(true);
const checkedCode = ref('');
const statusData = ref([]);

// 方法定义

//获取站点数据
const getStationData = async stCode => {
  stationList.value = [];
  loadingList.value = true;
  let params = {
    monitorTargetType: props.monitorTargetType,
    stCode: stCode,
    orderBy: 'tt desc',
  };
  let res = await getStationList(params);
  bus.emit('setSites', res);
  if (res && res.code == 200) {
    let datas = res.data;
    stationList.value = datas || [];
  }
  loadingList.value = false;
};
// 按名称搜索
function searchData() {
  getStationData(stationCode.value);
}
// 点击站点
function checkStation(row) {
  checkedCode.value = row.stCode;
  bus.emit('mapClick', { id: row.id, stCode: row.stCode, stName: row.stName, gisType: 'site' }, 1); //给弹窗
}
// 获取状态统计
function getStatusType() {
  rtuSiteTypeStatusCount({ monitorTargetType: props.monitorTargetType }).then(res => {
    statusData.value = res.data;
  });
}
// 故障及离线设备分析
// function checkFault(row) {
//   emit("getDialogData", {
//     name: "故障及离线设备分析",
//     type: "dialogFault",
//     obj: row,
//   });
// }
// // 数据异常分析
// function checkError(row) {
//   emit("getDialogData", {
//     name: "数据异常分析",
//     type: "dialogSjyc",
//     obj: row,
//   });
// }
// // 站点视频
// function checkVideo(row) {
//   emit("getDialogData", {
//     name: "视频监控点",
//     type: "dialogVideo",
//     obj: row,
//   });
// }
// // 运维派单
// function checkOrder(row) {
//   emit("getDialogData", {
//     name: "运维派单",
//     type: "dialogOrder",
//     obj: row,
//   });
// }
// 初始化
onMounted(() => {
  getStatusType(); //获取状态数据
  getStationData(''); //获取列表
});
watch(
  () => props.monitorTargetType,
  value => {
    console.log('左侧站点列表--', value);
    getStatusType();
    getStationData('');
  }
);
// 页面销毁
onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
.equipLeft {
  padding: 10px;
  position: relative;
  .equipTotal {
    background: #072046;
    box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
    border-radius: 6px;
    padding: 10px;
    .title {
      display: flex;
      align-items: center;
      font-size: 15px;
      margin-bottom: 5px;
      color: #ffffff;
      img {
        margin-right: 10px;
      }
    }
    .total {
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 14px;
      height: 26px;
      background: #072046;
      p {
        width: 32%;
        padding-left: 8px;
        color: #a4bfd9;
        img {
          position: relative;
          top: 2px;
          margin-right: 4px;
        }
      }
    }
  }
  .search {
    margin: 10px auto;

    :deep(.el-select) {
      width: 100%;
      background: #082743;
      .el-input__wrapper {
        background: #08270843;
      }
      .el-input__inner {
        background: #082743;
        color: #00b4ff;
        border: #082743;
      }
    }
  }
  .station {
    height: calc(100vh - 240px);
    overflow: auto;

    .part {
      background: #072046;
      box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
      border-radius: 6px;
      padding: 10px;
      margin-bottom: 10px;
      cursor: pointer;
      img {
        float: right;
        cursor: pointer;
        width: 22px;
        height: 22px;
      }
      .title {
        font-weight: bold;
        color: #3782ff;
        font-size: 16px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        box-sizing: border-box;
        padding: 5px 0;
      }
      .cont {
        margin-bottom: 5px;
        p {
          font-weight: 500;
          color: #666666;
          font-size: 14px;
          margin: 5px 0;
          .status {
            margin-right: 30%;
            color: #a4bfd9;
          }
          .success {
            color: #24de8d;
            font-weight: bold;
          }
          .fail {
            color: #f85050;
            font-weight: bold;
          }
          .outline {
            color: #999999;
            font-weight: bold;
          }
        }
      }
    }
    .checkedActive {
      border: 1px solid #3782ff;
      background: #072046;
    }
  }
}
</style>