<template>
  <div class="longYW">
    <div class="partTitleHM">监测站点统计</div>
    <div class="ConstrucClass">
      <div class="HeadContent">
        <div class="one">
          <div class="iconTwo bgcBlue"></div>
          <span>总计</span>
          <span class="bgcBlue">{{ tableData.length }}</span>
          个
        </div>
        <div class="two">
          <div class="iconTwo bgcgreen"></div>
          <span>在线</span>
          <span class="bgcgreen">{{ onlineNum }}</span>
          个
        </div>
        <div class="three">
          <div class="iconTwo bgcRed"></div>
          <span>离线</span>
          <span class="bgcRed">{{ outlineNum }}</span>
          个
        </div>
      </div>
      <div class="box-body" v-loading="tableLoading">
        <div class="scrollMapHM">
          <div class="scrollTitle flex">
            <p>站点名称</p>
            <p>监测类型</p>
            <p>通讯时间</p>
            <p>状态</p>
          </div>

          <Vue3SeamlessScroll :list="tableData" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
            <div class="scrollCont flex" v-for="item in tableData" :key="item.id">
              <p class="ellipsis">{{ item.stName }}</p>
              <p class="ellipsis">
                {{
                  item.monitorTargetType == 'rainfall'
                    ? '雨量站'
                    : item.monitorTargetType == 'river'
                    ? '河道'
                    : item.monitorTargetType == 'lake'
                    ? '湖泊'
                    : item.monitorTargetType == 'pipeline'
                    ? '管网'
                    : item.monitorTargetType == 'channel'
                    ? '港渠'
                    : item.monitorTargetType == 'typical_land'
                    ? '典型项目'
                    : '--'
                }}
              </p>
              <p class="ellipsis">{{ item.tt }}</p>
              <p class="ellipsis reports">
                {{
                  item.faultStatus == 'normal'
                    ? '正常'
                    : item.faultStatus == 'low_battery'
                    ? '低电压'
                    : item.faultStatus == 'low_signal'
                    ? '低信号'
                    : item.faultStatus == 'exception'
                    ? '异常值'
                    : item.faultStatus == 'offline'
                    ? '离线'
                    : '--'
                }}
              </p>
            </div>
          </Vue3SeamlessScroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import { getStationList } from '@/api/dataAnalysis/syntherticData';

const tableData = ref([]);
const tableLoading = ref(true);
const onlineNum = ref(0);
const outlineNum = ref(0);

// 获取设备数据
function getDataList() {
  tableLoading.value = true;
  getStationList({ orderBy: 'tt desc' }).then(res => {
    tableData.value = res.data || [];
    tableLoading.value = false;
    let arrOn = tableData.value.filter(item => item.onlineStatus == 'outline');
    outlineNum.value = arrOn.length; //离线数
    onlineNum.value = tableData.value.length - arrOn.length; //在线数
  });
}

onMounted(() => {
  getDataList();
});
</script>

<style lang="scss" scoped>
.longYW {
  margin-top: 10px;
  width: 100%;
  height: 32.5%;
}
.ConstrucClass {
  height: 90%;
  background: #004565;
  margin-top: -5px;
  opacity: 0.8;
  .HeadContent {
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: space-around;
    padding: 8px 0px;
    .one,
    .two,
    .three,
    .four {
      width: 24.5%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 15px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 600;
    }
  }
  .box-body {
    height: 90%;
    padding: 0px 10px;
    .scrollMapHM {
      height: 100%;
      p {
        width: 18%;
      }
      .reports {
        color: #3afff8;
      }
      .scroll {
        width: 100%;
        height: 65%;
        overflow: hidden;
        display: inline-block;
      }
    }
  }
}
.iconTwo {
  display: inline-block;
  border-style: solid;
  border-width: 2px;
  width: 0;
  height: 0;
  position: relative;
  top: -2px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-left: 15px;
}
.bgcBlue {
  color: #619bff;
}
.bgcgreen {
  color: #2ceea7;
}
.bgcRed {
  color: #fa5959;
}
.bgcYellow {
  color: #ffcf2a;
}
</style>