<template>
  <!-- 监测设备 -->
  <div class="equipJCPage">
    <div class="partTitleHM">监测设备</div>
    <div class="partContHM">
      <!-- 类型 -->
      <div class="flex flex-wrap flex-justcontent-spacearound">
        <div
          :class="['part', stationIndex == item.value ? 'active' : '']"
          v-for="(item, index) in stationType"
          :key="index"
          @click="checkStation(item)"
        >
          {{ item.label }}
        </div>
      </div>
      <!-- 监测内容 -->
      <div class="monitorCont">
        <el-select clearable v-model="stationCode" placeholder="请输入站点名称" class="stationSel">
          <el-option v-for="item in stationList" :key="item.stationCode" :label="item.stationName" :value="item.stationCode" />
        </el-select>
        <div class="contPart" v-for="item in stationList" :key="item.stationCode">
          <p class="title">{{ item.stationName }}</p>
          <p>
            站点状态 <span :class="[item.status1 == '在线' ? 'green' : 'red']">{{ item.status1 }}</span>
          </p>
          <p>
            数据状态 <span :class="[item.status2 == '正常' ? 'green' : 'red']">{{ item.status2 }}</span>
          </p>
          <p>
            站点类型 <span>{{ item.type }}</span>
          </p>
          <p>
            最后通讯 <span>{{ item.date }}</span>
          </p>
          <img src="@/assets/newImgs/HMScreen/video.png" alt="" v-if="!!item.video" @click="dialogShowVideo = true" />
        </div>
      </div>
    </div>
    <!-- 视频弹窗 -->
    <el-dialog title="站点视频" v-model="dialogShowVideo" width="800px" append-to-body>
      <img src="@/assets/newImgs/HMScreen/videoTest.png" alt="" />
    </el-dialog>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const dialogShowVideo = ref(false);
const stationIndex = ref('');
const stationType = ref([
  { value: '', label: '全部(87)' },
  { value: '1', label: '源头减排(29)' },
  { value: '5', label: '河道断面(5)' },
  { value: '6', label: '污水处理厂(5)' },
  { value: '2', label: '雨量站(8)' },
  { value: '7', label: '泵站(2)' },
  { value: '4', label: '管网(20)' },
  { value: '3', label: '内涝点(18)' },
]);
const stationCode = ref('');
const stationList = ref([
  {
    stationName: '十四大街马家河支桥雨量站',
    stationCode: '1',
    status1: '在线',
    status2: '正常',
    type: '降雨',
    date: '2024-05-10 12:03:20',
    video: '11',
  },
  {
    stationName: '汴京路雨水进口',
    stationCode: '2',
    status1: '离线',
    status2: '异常',
    type: '流量、ss',
    date: '2024-06-10 12:03:20',
    video: '',
  },
  {
    stationName: '汴京路雨水出口',
    stationCode: '3',
    status1: '离线',
    status2: '异常',
    type: '流量、ss',
    date: '2024-06-10 15:03:20',
    video: '',
  },
]);

// 类型点击
function checkStation(item) {
  stationIndex.value = item.value;
}

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

<style lang="scss" scoped>
.equipJCPage {
  width: 100%;
  .partContHM {
    .part {
      background: #013a73;
      border: 1px solid #2ddaff;
      cursor: pointer;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #e4f5ff;
      padding: 3px 5px;
      margin: 0px 8px 8px 0px;
      &:hover {
        background: #166f84;
        border: 1px solid #2cfce9;
      }
    }
    .active {
      background: #166f84;
      border: 1px solid #2cfce9;
    }
    .monitorCont {
      height: calc(100vh - 550px);
      overflow: auto;
      .stationSel {
        width: 100%;
        margin-bottom: 10px;
      }
      .contPart {
        background: rgba(9, 145, 222, 0.3);
        padding: 15px;
        margin-bottom: 5px;
        position: relative;
        p {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          color: #b8ecff;
          margin-bottom: 6px;
          span {
            color: #3afff8;
            font-weight: 400;
            font-size: 16px;
            margin-left: 10px;
          }
        }
        .title {
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 18px;
          color: #e4f5ff;
          cursor: pointer;
        }
        img {
          width: 26px;
          height: 26px;
          position: absolute;
          top: 20px;
          right: 30px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>