<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.ut }}</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/dataAnalysis/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,
  };
  let res = await getStationList(params);
  console.log(res, "resresresresresres");
  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("OpenDialog_GongGong", { id: row.id, stCode: row.stCode, stName: row.stName }); //给弹窗
}
// 获取状态统计
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(""); //获取列表
  // mitt事件监听
  bus.on("mapClick", (row) => {
    checkedCode.value = row.stCode;
    bus.emit("OpenDialog_GongGong", {
      id: row.id,
      stCode: row.stCode,
      stName: row.stName,
    }); //给弹窗
  });
  // bus.on("OpenDialog_GongGong", (val) => {
  //   AllData.GG_dialogVisible = true;
  //   console.log(`--`, val);
  //   AllData.getSiteId = val.id;
  //   AllData.SiteNo = val.stCode;
  //   AllData.pmpSitNewDialogTitle = val.stName;
  // });
});
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;
      .totalLabel {
      }
      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 - 300px);
    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>