<template>
  <div class="surveillance-list">
    <header class="list-header">
      <img
        class="config-btn"
        v-if="surveillanceSafetyManagePermission"
        src="@/assets/images/institute-safety/config.png"
        alt=""
        @click="handleToPlatform"
      />
      <div v-else style="width: 16px"></div>
      <span> 重点监控区域 </span>
      <img class="close-btn" src="@/assets/images/institute-safety/close.png" alt="" @click="emits('close')" />
    </header>
    <main class="surveillance-list-main">
      <div class="surveillance-group" v-for="group in surveillanceAreaList" :key="group.id">
        <el-tooltip placement="top" :content="group.groupName">
          <div class="group-title"> {{ group.groupName }} </div>
        </el-tooltip>

        <div
          class="surveillance-camera"
          :class="{ 'surveillance-camera_active': cam.code === curCamera?.code }"
          v-for="cam in group.children"
          :key="cam.id"
          @click="handleChangeCamera(cam)"
        >
          <img class="camera-preview" :src="cam.pushStreamDTO.imageUrl" alt="" />
          <div class="camera-info">
            <div class="camera-name">
              <img src="@/assets/images/institute-safety/camera.png" alt="" />
              <el-tooltip placement="top" :content="cam.name">
                <span class="camera-name-text">{{ cam.name }}</span>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useRouter } from 'vue-router';
  import { ElTooltip } from 'element-plus';
  import { getSurveillanceAreaList } from '@/api/security-confidentiality-position';
  import type { PositionMonitorCameraListRes } from '@/api/security-confidentiality-position';
  import type { CameraInfo } from '@/api/disaster-overview';
  import useCameraStore from '../stores/use-camera-store';
  import { useUserInfoHook } from '@/hooks/useUserInfoHook';
  import { SURVEILLANCE_MANAGEMENT_PERMISSIONS } from '@/views/system/surveillance/constant';

  const emits = defineEmits<{
    (e: 'close'): void;
    // (e: 'change-camera', code: string): void;
  }>();

  const cameraStore = useCameraStore();
  const { curCamera } = storeToRefs(cameraStore);

  const surveillanceAreaList = ref<PositionMonitorCameraListRes[]>([]);

  const getListData = () => {
    getSurveillanceAreaList({ groupName: '', cameraName: '' }).then((res) => {
      surveillanceAreaList.value = res;
    });
  };

  const router = useRouter();
  function handleToPlatform() {
    router.push({
      name: 'SystemSurveillance',
    });
  }

  function handleChangeCamera(camera: CameraInfo) {
    cameraStore.setCurCamera(camera);
    emits('close');
  }

  const { permissions } = useUserInfoHook();
  const surveillanceSafetyManagePermission = ref<boolean>(false);

  onMounted(() => {
    surveillanceSafetyManagePermission.value = Boolean(
      permissions.find(
        (item: { code: string }) => item.code === SURVEILLANCE_MANAGEMENT_PERMISSIONS.SURVEILLANCE_SECURITY_MANAGEMENT,
      ),
    );
    getListData();
  });
</script>

<style scoped>
  .surveillance-list {
    width: 280px;
    height: 675px;

    position: absolute;
    top: 0px;
    right: 0px;

    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px 4px 4px 12px;
    backdrop-filter: blur(10px);
  }

  .list-header {
    margin: 12px 0;
    padding: 0 16px;

    font-weight: 500;
    font-size: 14px;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .config-btn,
  .close-btn {
    cursor: pointer;
  }
  .surveillance-list-main {
    padding: 0 16px;
    height: 623px;
    overflow: auto;
  }

  .surveillance-group {
    margin-top: 20px;
  }

  .group-title {
    width: 249px;
    height: 28px;
    line-height: 28px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;

    padding: 0 10px;

    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 显示省略号 */

    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
  }
  .surveillance-camera {
    cursor: pointer;
    position: relative;
    margin-top: 16px;
    width: 249px;
    height: 142px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.8);
  }
  .surveillance-camera_active {
    border: 1px solid #409eff;
    box-shadow: 0px 0px 5px 5px rgba(64, 158, 255, 0.44);
  }
  .camera-preview {
    width: 100%;
    border-radius: 4px;
  }
  .camera-info {
    position: absolute;
    bottom: 0;
    width: 248px;
    height: 80px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    border-radius: 4px;

    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 8px 12px;
  }
  .camera-name {
    font-weight: 500;
    font-size: 12px;
    color: #ffffff;

    display: flex;
    align-items: center;
    gap: 4px;
  }
  .camera-name-text {
    max-width: 200px;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 显示省略号 */
  }
</style>
