<script setup lang="ts">
import { ref, onMounted } from "vue";
import demoImage from "@/assets/img/demo.png";
import fwqImage from "@/assets/img/fwq.png";
import { getVideoDeviceList, videoStream } from "@/api/modules/index";
import dayjs from "dayjs";
// 设备状态数据
const deviceStatus = ref({
  normal: 248,
  total: 250,
});

// 占地面积数据
const areaData = ref({
  value: 6000,
  unit: "m²",
});

// 车位数据
const parkingData = ref([
  { label: "充电车位", value: 1888 },
  { label: "大型车位", value: 60 },
  { label: "小型车位", value: 200 },
  { label: "危险品车位", value: 20 },
]);

// 监控点分组数据
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([
]);

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

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

// 选择监控点
// const togglePoint = (point: any) => {
//   const index = selectedPoints.value.findIndex((p) => p.id === point.id);
//   if (index > -1) {
//     selectedPoints.value.splice(index, 1);
//   } else {
//     selectedPoints.value.push(point);
//   }
// };
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 {
    // 超过8个，移除最早的
    if (selectedPoints.value.length >= 8) {
      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 >= 8) {
      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="title-header">
          <div class="header-icon">
            <div class="camera-square-small" title="服务区基本信息"></div>
          </div>
          <span>服务区基本信息</span>
        </div>
        <!-- 状态内容 -->
        <div class="status-content">
          <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-info">
            <div class="info-left">
              <img :src="fwqImage" alt="服务区" class="fwq-image" />
            </div>
            <div class="info-center">
              <span class="info-label">占地面积(m²)</span>
            </div>
            <div class="info-right">
              <span class="info-value">{{ areaData.value }}</span>
            </div>
          </div>

          <!-- 添加车位信息展示 -->
          <div class="parking-info">
            <div v-for="(item, index) in parkingData" :key="index" class="parking-item">
              <div class="parking-label">{{ item.label }}</div>
              <div class="parking-value">{{ item.value }}</div>
            </div>
          </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">
            <img :src="monitor.image" :alt="monitor.name" />
          </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: 15%;
  padding: 20px;
  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;
    flex-direction: column;
    margin-bottom: 30px;
    position: relative;
    height: 400px;
    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;
    }

    .title-header {
      height: 80px;
      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);
      margin: -20px -20px 20px -20px;

      .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: 34px;
        color: #fff;
        font-weight: 500;
      }
    }

    .status-content {
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 20px;
    }

    .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: 280px;
      height: 280px;
      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;
      }

      .camera-icon {
        width: 140px;
        height: 140px;
      }
    }

    .status-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1;
      height: 160px;
      width: 100%;
      border-radius: 8px;
      padding: 20px;

      .info-left {
        width: 160px;
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;

        .fwq-image {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .info-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 20px;

        .info-label {
          font-size: 32px;
          color: #ffffff;
          margin-bottom: 8px;
        }

        .info-unit {
          font-size: 24px;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .info-right {
        .info-value {
          font-size: 64px;
          font-weight: bold;
          color: #00c6ff;
          text-shadow: 0 0 10px rgba(0, 198, 255, 0.3);
        }
      }
    }

    // 添加车位信息样式
    .parking-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 160px;
      padding: 20px;
      /* background: rgba(14, 45, 81, 0.4); */
      border-radius: 8px;
      z-index: 1;

      .parking-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        padding: 0 10px;

        .parking-label {
          font-size: 26px;
          color: #ffffff;
          margin-bottom: 10px;
        }

        .parking-value {
          font-size: 45px;
          font-weight: bold;
          color: #00c6ff;
          text-shadow: 0 0 10px rgba(0, 198, 255, 0.3);
        }
      }
    }
  }

  .list-header {
    height: 80px;
    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: 34px;
      color: #fff;
      font-weight: 500;
    }
  }

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

    /* 自定义滚动条样式 */
    &::-webkit-scrollbar {
      width: 8px;
      background: rgba(0, 24, 65, 0.3);
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 198, 255, 0.3);
      border-radius: 4px;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(0, 198, 255, 0.5);
      }
    }

    &::-webkit-scrollbar-track {
      background: rgba(0, 24, 65, 0.3);
      border-radius: 4px;
    }

    /* Firefox滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 198, 255, 0.3) rgba(0, 24, 65, 0.3);

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

      .group-header {
        height: 52px;
        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: 28px;

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

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

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

      .group-content {
        padding: 8px 0;

        .point-item {
          padding: 16px 15px;
          margin: 4px 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: 24px;
            }

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

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

              &.normal {
                background: #00c6ff;
              }

              &.warning {
                background: #ffb52d;
              }
            }

            .point-status {
              padding: 4px 10px;
              border-radius: 2px;
              font-size: 20px;

              &.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(4, 1fr);
    grid-template-rows: repeat(2, 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>
