<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import demoImage from "@/assets/img/demo.png";
import { getVideoDeviceList, videoStream } from "@/api/modules/index";
import Hls from "hls.js";
import dayjs from "dayjs";

const videoUrl = ref(""); // 保存m3u8地址
const videoRef = ref<HTMLVideoElement | null>(null);
// 设备状态数据
const deviceStatus = ref({
  normal: 248,
  total: 250,
});

// 监控点分组数据
const monitoringGroups = ref([
  // {
  //   id: 1,
  //   name: "邯港方向",
  //   count: 5,
  //   expanded: true,
  //   points: [
  //     { id: 1, name: "邯港方向监控001", status: "正常" },
  //     { id: 2, name: "邯港方向监控002", status: "正常" },
  //     { id: 3, name: "邯港方向监控003", status: "正常" },
  //     { id: 4, name: "邯港方向监控004", status: "正常" },
  //     { id: 5, name: "邯港方向监控005", status: "正常" },
  //   ],
  // },
  // {
  //   id: 2,
  //   name: "黄驿港方向",
  //   count: 12,
  //   expanded: false,
  //   points: [],
  // },
  // {
  //   id: 3,
  //   name: "收费站",
  //   count: 5,
  //   expanded: true,
  //   points: [
  //     { id: 6, name: "收费站监控001", status: "正常" },
  //     { id: 7, name: "收费站监控002", status: "正常" },
  //     { id: 8, name: "收费站监控003", status: "正常" },
  //     { id: 9, name: "收费站监控004", status: "正常" },
  //   ],
  // },
]);

// // 固定的六个道路监控数据
// const fixedRoadMonitors = ref([
//   { id: 101, name: "高速公路监控001", src:'' },
//   { id: 102, name: "高速公路监控002", src:'' },
//   { id: 103, name: "高速公路监控003", src:'' },
//   { id: 104, name: "高速公路监控004", src:'' },
//   { id: 105, name: "高速公路监控005", src:'' },
//   { id: 106, name: "高速公路监控006", src:'' },
// ]);
const fixedRoadMonitors = ref<any[]>([]);

// 切换分组展开状态
const toggleGroup = (group: any) => {
  group.expanded = !group.expanded;
};

// 选中的监控点
const selectedPoints = ref<any[]>([]);

// // 选择监控点
// const togglePoint = (point: any) => {
//   const index = selectedPoints.value.findIndex((p) => p.channelCode === point.channelCode);
//   if (index > -1) {
//     selectedPoints.value.splice(index, 1);
//   } else {
//     selectedPoints.value.push(point);
//   }
//   videoStream({deviceCode:'00000000001311027500',channelCode:'00000000001311028602',}).then((res)=>{
//     videoUrl.value = res;
//       nextTick();
//     if (videoRef.value) {
//       if (Hls.isSupported()) {
//         const hls = new Hls();
//         hls.loadSource(videoUrl.value);
//         hls.attachMedia(videoRef.value);
//       } else if (videoRef.value.canPlayType('application/vnd.apple.mpegurl')) {
//         videoRef.value.src = videoUrl.value;
//       }
//     }
//   })
// };
const togglePoint = async (point: any) => {
  const index = selectedPoints.value.findIndex((p) => p.channelCode === point.channelCode);
  if (index > -1) {
    // 已选中则取消选中，并移除对应视频
    selectedPoints.value.splice(index, 1);
    const monitorIdx = fixedRoadMonitors.value.findIndex(m => m.channelCode === point.channelCode);
    if (monitorIdx > -1) {
      fixedRoadMonitors.value.splice(monitorIdx, 1);
    }
  } else {
    // 超过6个，移除最早的
    if (selectedPoints.value.length >= 6) {
      const removed = selectedPoints.value.shift();
      // 同步移除fixedRoadMonitors中对应的
      const rmIdx = fixedRoadMonitors.value.findIndex(m => m.channelCode === removed.channelCode);
      if (rmIdx > -1) fixedRoadMonitors.value.splice(rmIdx, 1);
    }
    selectedPoints.value.push(point);

    // 获取视频流并放入fixedRoadMonitors
    const res = await videoStream({ deviceCode: point.deviceCode, channelCode: point.channelCode });
    // 保证fixedRoadMonitors只有6个
    if (fixedRoadMonitors.value.length >= 6) {
      fixedRoadMonitors.value.shift();
    }
    fixedRoadMonitors.value.push({
      ...point,
      src: res
    });
  }
};
onMounted(()=>{
  const endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
  getVideoDeviceList({endTime:endTime, currentPage: 1, pageSize: 2}).then((res)=>{  //暂时是公共的 先取两条
    console.log(res, 'rrrrrrrrrrrrrrrrrrrrrrrrrsssssssssssss')
    if(res.code == 200){
      res.data.data.forEach((item)=>{
        item.expanded = true
      })
      monitoringGroups.value = res.data.data
    }
    console.log(monitoringGroups.value, 'monitoringGroups.value')
  })
})
</script>

<template>
  <div class="monitor-container">
    <!-- 左侧列表 -->
    <div class="monitor-list">
      <!-- 设备状态指示器 -->
      <div class="device-status-indicator">
        <div class="corner-decoration top-left"></div>
        <div class="corner-decoration top-right"></div>
        <div class="corner-decoration bottom-left"></div>
        <div class="corner-decoration bottom-right"></div>

        <div class="status-circle">
          <img
            src=""
            alt="摄像头"
            class="camera-icon"
          />
          <!-- src="../../assets/img/camera-icon.png" -->
        </div>

        <div class="status-info">
          <div class="status-label">正常设备</div>
          <div class="status-value">{{ deviceStatus.normal }}</div>
        </div>
      </div>

      <div class="list-header">
        <div class="header-icon">
          <div class="camera-square-small" title="摄像头"></div>
        </div>
        <span>视频监控列表</span>
      </div>
      <div class="list-content">
        <div
          v-for="(group, index) in monitoringGroups"
          :key="index"
          class="group-item"
        >
          <div class="group-header" @click="toggleGroup(group)">
            <div class="group-name">
              <!-- <i class="arrow" :class="{ expanded: group.expanded }"></i> -->
              <span style="font-size: 22.5px"
                >{{ group.deviceName }}（{{ group.channels.length }}）</span
              >
            </div>
          </div>
          <div class="group-content" v-show="group.channels">
            <div
              v-for="(point, vic) in group.channels"
              :key="point.channelCode"
              class="point-item"
              :class="{ active: selectedPoints.some((p) => p.channelCode === point.channelCode) }"
              @click="togglePoint(point)"
            >
              <div class="point-info">
                <span class="point-name">{{ point.channelName }}</span>
                <div class="status-wrapper">
                  <span
                    class="status-indicator"
                    :class="point.status === 1 ? 'normal' : 'warning'"
                  ></span>
                  <span
                    class="point-status"
                    :class="point.status === 1 ? 'normal' : 'warning'"
                  >
                    {{ point.status }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧图像网格 - 改为固定显示六张图片 -->
    <div class="monitor-grid">
      <!-- <div class="fixed-grid-container">
        <div
          v-for="monitor in fixedRoadMonitors"
          :key="monitor.id"
          class="grid-item"
        >
          <div class="corner-decoration top-left"></div>
          <div class="corner-decoration top-right"></div>
          <div class="corner-decoration bottom-left"></div>
          <div class="corner-decoration bottom-right"></div>
          <div class="image-container">
              <video
              ref="videoRef"
              v-if="videoUrl"
              controls
              autoplay
              style="width:100%;height:300px;background:#000"
            ></video>
          </div>
        </div>
      </div> -->
      <div class="fixed-grid-container">
        <div
          v-for="(monitor, idx) in fixedRoadMonitors"
          :key="monitor.channelCode || monitor.id || idx"
          class="grid-item"
        >
          <div class="corner-decoration top-left"></div>
          <div class="corner-decoration top-right"></div>
          <div class="corner-decoration bottom-left"></div>
          <div class="corner-decoration bottom-right"></div>
          <div class="image-container">
            <video
              v-if="monitor.src"
              :src="monitor.src"
              controls
              autoplay
              style="width:100%;height:300px;background:#000"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.monitor-container {
  width: 100%;
  height: 100%;
  display: flex;
  background: rgba(0, 24, 65, 0.7);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 198, 255, 0.3);
  box-shadow: 0 0 15px rgba(0, 198, 255, 0.1);
  padding: 2px;
  padding: 30px;
}

.monitor-list {
  width: 35%;
  padding: 40px;
  height: 100%;
  border-right: 1px solid rgba(0, 198, 255, 0.2);
  display: flex;
  flex-direction: column;
  background: rgba(0, 24, 65, 0.9);

  .device-status-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    position: relative;
    height: 300px;
    width: 100%;
    background: rgba(0, 24, 65, 0.6);
    border: 1px solid rgba(0, 198, 255, 0.3);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 198, 255, 0.1);
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        45deg,
        rgba(0, 198, 255, 0.05),
        transparent,
        rgba(0, 198, 255, 0.05)
      );
      animation: gradientPulse 3s ease-in-out infinite;
      z-index: 0;
    }

    .corner-decoration {
      position: absolute;
      width: 15px;
      height: 15px;
      border: 1px solid #00c6ff;
    }

    .top-left {
      top: -1px;
      left: -1px;
      border-right: none;
      border-bottom: none;
    }

    .top-right {
      top: -1px;
      right: -1px;
      border-left: none;
      border-bottom: none;
    }

    .bottom-left {
      bottom: -1px;
      left: -1px;
      border-right: none;
      border-top: none;
    }

    .bottom-right {
      bottom: -1px;
      right: -1px;
      border-left: none;
      border-top: none;
    }

    .status-circle {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: rgba(0, 24, 65, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin: 0 auto 0 40px;
      box-shadow: 0 0 20px rgba(0, 198, 255, 0.15);
      z-index: 1;

      &::before {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: #00c6ff;
        border-right-color: #00c6ff;
        animation: rotate 1.5s linear infinite;
      }

      &::after {
        content: "";
        position: absolute;
        top: -5px;
        left: -5px;
        width: calc(100% + 10px);
        height: calc(100% + 10px);
        border-radius: 50%;
        border: 1px solid rgba(0, 198, 255, 0.3);
        opacity: 0.5;
      }

      .camera-square {
        width: 80px;
        height: 80px;
        background-color: #00c6ff;
        border-radius: 6px;
        box-shadow: 0 0 15px rgba(0, 198, 255, 0.6);
        position: relative;
      }
    }

    .status-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-right: 80px;
      z-index: 1;

      .status-label {
        font-size: 18px;
        color: #00c6ff;
        margin-bottom: 10px;
        position: relative;
        padding-left: 25px;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 15px;
          height: 3px;
          background-color: #00c6ff;
        }
      }

      .status-value {
        font-size: 40px;
        color: #00c6ff;
        font-weight: 500;
      }
    }
  }

  .list-header {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: rgba(0, 198, 255, 0.1);
    border-bottom: 1px solid rgba(0, 198, 255, 0.1);

    .header-icon {
      width: 16px;
      height: 16px;
      margin-right: 10px;

      .camera-square-small {
        width: 100%;
        height: 100%;
        background-color: #4079c1;
        border-radius: 3px;
        box-shadow: 0 0 8px rgba(0, 198, 255, 0.5);
      }
    }

    span {
      font-size: 24px;
      color: #fff;
      font-weight: 500;
    }
  }

  .list-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px;

    .group-item {
      margin-bottom: 10px;

      .group-header {
        height: 42px;
        display: flex;
        align-items: center;
        padding: 0 15px;
        background: rgba(14, 45, 81, 0.6);
        border-radius: 4px;
        cursor: pointer;

        &:hover {
          background: rgba(14, 45, 81, 0.8);
        }

        .group-name {
          display: flex;
          align-items: center;
          color: #fff;
          font-size: 16px;

          .arrow {
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid #fff;
            margin-right: 8px;
            transition: transform 0.3s;

            &.expanded {
              transform: rotate(180deg);
            }

            &:not(.expanded) {
              transform: rotate(90deg);
            }
          }
        }
      }

      .group-content {
        padding: 8px 0;

        .point-item {
          padding: 12px 15px;
          margin: 2px 0;
          background: rgba(14, 45, 81, 0.4);
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.3s;
          border-bottom: 1px solid rgba(0, 198, 255, 0.05);

          &:hover {
            background: rgba(14, 45, 81, 0.6);
          }

          &.active {
            background: #0e2d51;
            border: 1px solid rgba(0, 198, 255, 0.3);
          }

          .point-info {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .point-name {
              color: #fff;
              font-size: 18px;
            }

            .status-wrapper {
              display: flex;
              align-items: center;
            }

            .status-indicator {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              margin-right: 4px;

              &.normal {
                background: #00c6ff;
              }

              &.warning {
                background: #ffb52d;
              }
            }

            .point-status {
              padding: 2px 8px;
              border-radius: 2px;
              font-size: 13px;

              &.normal {
                color: #00c6ff;
              }

              &.warning {
                color: #ffb52d;
              }
            }
          }
        }
      }
    }
  }
}

.monitor-grid {
  flex: 1;
  height: 100%;
  padding: 15px;
  overflow: auto;

  .empty-state {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    height: 100%;
  }

  .fixed-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 12px;
    height: calc(100% - 10px);
    min-height: 500px;
  }

  .grid-item {
    background: rgba(14, 45, 81, 0.3);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 198, 255, 0.3);
    position: relative;
    transition: all 0.3s ease;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 12px;
      box-shadow: 0 0 15px rgba(0, 198, 255, 0.2) inset;
      pointer-events: none;
      z-index: 1;
    }

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 15px rgba(0, 198, 255, 0.4);
      border-color: rgba(0, 198, 255, 0.5);
    }

    // 添加四个角落装饰
    .corner-decoration {
      position: absolute;
      width: 15px;
      height: 15px;
      border: 1px solid #00c6ff;
      z-index: 2;
    }

    .top-left {
      top: -1px;
      left: -1px;
      border-right: none;
      border-bottom: none;
      border-top-left-radius: 8px;
    }

    .top-right {
      top: -1px;
      right: -1px;
      border-left: none;
      border-bottom: none;
      border-top-right-radius: 8px;
    }

    .bottom-left {
      bottom: -1px;
      left: -1px;
      border-right: none;
      border-top: none;
      border-bottom-left-radius: 8px;
    }

    .bottom-right {
      bottom: -1px;
      right: -1px;
      border-left: none;
      border-top: none;
      border-bottom-right-radius: 8px;
    }

    .image-header {
      padding: 8px 12px;
      background: rgba(14, 45, 81, 0.6);
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      border-bottom: 1px solid rgba(0, 198, 255, 0.2);
    }

    .image-container {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      background: rgba(0, 0, 0, 0.2);
      position: relative;
      overflow: hidden;
      border-radius: 10px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
        border-radius: 8px;
      }

      &:hover img {
        transform: scale(1.03);
      }
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes gradientPulse {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>
