<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>
            {{
              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">
      <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">站点类型</span>
            <span>
              {{
                item.siteType == 'water_level'
                  ? '水位'
                  : item.siteType == 'flow'
                  ? '流量'
                  : item.siteType == 'rain'
                  ? '降雨'
                  : '水质'
              }}
            </span>
          </p>
          <p>
            <span style="margin-right: 15px">最后通讯</span>
            <span style="font-weight: bold">{{ 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" />
  </div>
</template>
<script setup name="equipLeft">
import { getStationList, rtuSiteTypeStatusCount } from '@/api/dataAnalysis/syntherticData';
import bus from '@/utils/mitt';

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 => {
  loadingList.value = true;
  let params = {
    monitorTargetType: props.monitorTargetType,
    stCode: stCode,
  };
  let res = await getStationList(params);
  if (res && res.code == 200) {
    let datas = res.data;
    stationList.value = datas || [];
    if (datas.length > 0) {
      checkStation(datas[0]); //有数据时默认点击第一个
    } else {
      bus.emit('leftStationClick', { id: '', stCode: '' }); //给右侧传相应值
    }
  }
  loadingList.value = false;
};
// 按名称搜索
function searchData() {
  getStationData(stationCode.value);
}
// 点击站点
function checkStation(row) {
  checkedCode.value = row.stCode;
  bus.emit('leftStationClick', { id: row.id, stCode: row.stCode }); //给右侧传相应值
}
// 获取状态统计
function getStatusType() {
  rtuSiteTypeStatusCount({ siteType: 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: #ffffff;
    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;
      img {
        margin-right: 10px;
      }
    }
    .total {
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 14px;
      height: 26px;
      p {
        width: 32%;
        padding-left: 8px;
        img {
          position: relative;
          top: 2px;
          margin-right: 4px;
        }
      }
    }
  }
  .search {
    margin: 10px auto;
    .el-select {
      width: 100%;
    }
  }
  .station {
    height: calc(100vh - 380px);
    overflow: auto;

    .part {
      background: #ffffff;
      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;
      }
      .cont {
        margin-bottom: 5px;
        p {
          font-weight: 500;
          color: #666666;
          font-size: 14px;
          margin-bottom: -6px;
          .status {
            margin-right: 30%;
          }
          .success {
            color: #24de8d;
            font-weight: bold;
          }
          .fail {
            color: #f85050;
            font-weight: bold;
          }
          .outline {
            color: #999999;
            font-weight: bold;
          }
        }
      }
    }
    .checkedActive {
      border: 1px solid #3782ff;
      background: #e4eeff;
    }
  }
}
</style>