<template>
  <!-- 综合分析左侧列表 -->
  <div class="equipLeftPage">
    <div class="equipTotal">
      <div class="title"><img src="@/assets/images/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/images/monitor/online_icon.png" alt="在线" title="在线" />{{ item.onlineCount }}</p>
          <p><img src="@/assets/images/monitor/outline_icon.png" alt="离线" title="离线" />{{ item.offlineCount }}</p>
          <p><img src="@/assets/images/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/images/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'">
              {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }}
            </span>
            <img
              src="@/assets/images/monitor/sj_btn.png"
              title="故障及离线设备分析"
              @click.stop="checkFault(item)"
              v-if="item.faultStatus == 'offline'"
            />
            <img
              src="@/assets/images/monitor/sj_btn.png"
              title="数据异常分析"
              @click.stop="checkError(item)"
              v-if="item.faultStatus == 'exception'"
            />
          </p>
          <p>
            <span style="margin-right: 15px">建设方式</span>
            <span :class="item.buildType == 'owner' ? 'success' : 'yellow'">
              {{ item.buildType == 'owner' ? '新建' : '共享' }}
            </span>
          </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.tt }}</span>
            <!-- videoFlag 0否 1是-->
            <img src="@/assets/images/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="equipLeftPage">
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 == 'total' ? '' : props.monitorTargetType,
    stCode: stCode,
    orderBy: 'tt desc',
  };
  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() {
  let types = props.monitorTargetType == 'total' ? '' : props.monitorTargetType;
  rtuSiteTypeStatusCount({ monitorTargetType: types }).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>
@import '@/assets/styles/variables.module.scss';
.equipLeftPage {
  padding: 10px;
  position: relative;
  .equipTotal {
    background: $mainColor1;
    box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
    border-radius: 6px;
    padding: 10px;
    display: none;
    .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 - 230px);
    overflow: auto;

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