<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">86</span>
          个
        </div>
        <div class="two">
          <div class="iconTwo bgcgreen"></div>
          <span>在线</span>
          <span class="bgcgreen">80</span>
          个
        </div>
        <div class="three">
          <div class="iconTwo bgcRed"></div>
          <span>离线</span>
          <span class="bgcRed">5</span>
          个
        </div>
        <div class="four">
          <div class="iconTwo bgcYellow"></div>
          <span>故障</span>
          <span class="bgcYellow">1</span>
          个
        </div>
      </div>
      <div class="box-body">
        <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.start }}</p>
              <p class="ellipsis">{{ item.num }}</p>
              <p class="ellipsis">{{ item.time }}</p>
              <p class="ellipsis reports" @click="checkReport(item)">{{ item.zt }}</p>
            </div>
          </Vue3SeamlessScroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';

const tableData = ref([
  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '离线', id: 1 },
  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '故障', id: 1 },
]);
</script>

<style lang="scss" scoped>
.longYW {
  margin-top: 10px;
  width: 100%;
  height: 31%;
  background: #07347f;
}
.ConstrucClass {
  height: 83%;
  opacity: 0.8;
  // background: red;
  .HeadContent {
    width: 100%;
    height: 23%;
    // background: #2270ff;
    align-items: center;
    line-height: 25px;
    margin-top: 2px;
    display: flex;
    .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;
      // background: red;
    }
  }
  .box-body {
    height: 80%;
    // background: yellowgreen;
    padding: 10px;
    .scrollMapHM {
      height: 100%;
      p {
        width: 18%;
        // background: red;
      }
      .reports {
        color: #3afff8;
      }
      .scroll {
        width: 100%;
        height: calc(100% - 30%);
        overflow: hidden;
        display: inline-block;
      }
    }
  }
}
.iconTwo {
  display: inline-block;
  // border-color: #18e87a;
  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>