<template>
  <div class="key-monitor-area">
    <div class="container-title">
      <span class="line"></span>
      <span class="title">重点监测区域</span>
    </div>
    <div class="monitor-areas">
      <div v-if="monitorEditPermission" class="add-area" @click="updateMonitorVisible = true">
        <span class="add-icon">+</span>
        <span>编辑监测区域</span>
      </div>
      <div class="monitor-area">
        <div v-if="selectedCamerasOfOverview.length === 0" class="empty-style">
          <img class="empty-img" src="@/assets/images/empty-2.png" alt="" />
          <span>暂无监测区域</span>
        </div>
        <div v-for="(item, index) in selectedCamerasOfOverview" :key="index" class="monitor-item">
          <img
            v-if="!getCameraUrl(item)"
            src="@/assets/images/disaster-overview/no-camera-url.png"
            alt=""
            class="monitor-no-url"
          />
          <div class="monitor-video">
            <LiveVideo :url="getCameraUrl(item)" :poster="getCameraImg(item)" :id="`monitor-livevideo-${index}`" />
            <img
              src="@/assets/images/disaster-overview/full-screen.png"
              alt=""
              class="full-screen"
              @click="isFullScreen ? exitFullscreen() : fullScreen(`monitor-livevideo-${index}`, 'overview-monitor')"
            />
          </div>
          <div class="monitor-info">
            <img src="@/assets/images/disaster-overview/camera.png" alt="" />
            <span class="camera-name">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <UpdateMonitorArea v-if="updateMonitorVisible" @confirm="handleConfirmAddMonitor" @close="handleCloseAddMonitor" />
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted, onUnmounted, ref } from 'vue';
  import screenfull from 'screenfull';
  import urlJoin from 'url-join';
  import { storeToRefs } from 'pinia';
  import { ElMessage } from 'element-plus';
  import LiveVideo from '@/components/live/LiveVideo.vue';
  import UpdateMonitorArea from '@/components/monitor-camera-edit/UpdateMonitorArea.vue';
  import { useUserInfoHook } from '@/views/disaster/hooks/index';
  import { DISASTER_PERMISSIONS } from '@/views/disaster/constant/index';
  import { useMonitorCameraEdit } from '@/store/modules/useMonitorCameraEdit';
  import { userSplitScreenFullScreen } from '@/store/modules/userSplitScreenFullScreen';
  import { CameraInfo, CameraInTree, updateCameraToOverviewGroup } from '@/api/disaster-overview';

  const monitorCameraEdit = useMonitorCameraEdit();
  const { idOfOverview, selectedCamerasOfOverview } = storeToRefs(monitorCameraEdit);
  const { getSelectedCameraIdsOfOverview } = monitorCameraEdit;

  const { isFullScreen, curFullScreenType } = storeToRefs(userSplitScreenFullScreen());
  const { fullScreen, exitFullscreen } = userSplitScreenFullScreen();
  const { permissions } = useUserInfoHook();

  const monitorEditPermission = computed(() => {
    return Boolean(permissions.find((item: { code: string }) => item.code === DISASTER_PERMISSIONS.OVERVIEW_MONITOR));
  });
  const updateMonitorVisible = ref(false);

  const isHttps = () => {
    return window.location.protocol.startsWith('https');
  };

  const getCameraUrl = (val: CameraInfo) => {
    if (val.pushStreamDTO && val.pushStreamDTO.videoUrls) {
      const videoUrl = val.pushStreamDTO.videoUrls.pushstreamIp;
      const protocol = isHttps() ? 'wss' : 'ws';
      // 如果是绝对地址
      if (videoUrl.startsWith('http')) {
        // 如果是https的话，websocket要用wss
        return videoUrl.replace('http', protocol);
      }
      const u = urlJoin(
        `${protocol}://`,
        window.location.host,
        window.location.pathname === '/' ? '' : window.location.pathname,
        videoUrl,
      );
      return u;
    }
    return '';
  };

  const getCameraImg = (val: CameraInfo) => {
    if (val.pushStreamDTO && val.pushStreamDTO.imageUrl) {
      return val.pushStreamDTO.imageUrl;
    }
    return '';
  };

  const handleConfirmAddMonitor = (data: CameraInTree[]) => {
    updateMonitorVisible.value = false;
    const cameraAddIds: number[] = data.map((item) => item.id);
    updateCameraToOverviewGroup({ groupId: idOfOverview.value, cameraIdList: cameraAddIds }).then(() => {
      getSelectedCameraIdsOfOverview();
      ElMessage({
        message: '监测区域编辑成功',
        type: 'success',
      });
    });
  };

  const handleCloseAddMonitor = () => {
    updateMonitorVisible.value = false;
  };

  onMounted(() => {
    getSelectedCameraIdsOfOverview();
  });

  window.onresize = () => {
    if (!screenfull.isFullscreen) {
      isFullScreen.value = false; //判断退出全屏，进行赋值
      curFullScreenType.value = 'single';
    }
  };

  onUnmounted(() => {
    window.onresize = null;
  });
</script>

<style scoped lang="scss">
  .key-monitor-area {
    padding-top: 10px;

    .container-title {
      height: 24px;
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 16px;
      color: #000000;

      .line {
        width: 3px;
        height: 16px;
        background: #1777ff;
        margin-right: 10px;
      }

      .title {
        margin-right: 12px;
      }
    }

    .monitor-areas {
      height: calc(100% - 24px);
      padding: 16px 0;
      display: flex;
      flex-direction: column;

      .add-area {
        padding: 0 16px;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #333333;
        margin-bottom: 16px;
        cursor: pointer;

        .add-icon {
          width: 24px;
          height: 24px;
          border: 1px dashed #1777ff;
          color: #1777ff;
          font-size: 20px;
          line-height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12px;
        }
      }

      .add-area:hover {
        color: #1777ff;
      }

      .monitor-area {
        width: 100%;
        height: calc(100% - 32px);
        overflow: auto;
        padding: 0 16px;

        .monitor-item {
          margin-bottom: 16px;

          .monitor-info {
            display: flex;
            align-items: center;

            .camera-name {
              margin-left: 12px;
            }

            .delete-icon {
              display: block;
              margin-left: auto;
              cursor: pointer;
              color: #a8abb2;
            }

            .delete-icon:hover {
              color: #1777ff;
            }
          }

          .monitor-no-url {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }

          .monitor-video {
            position: relative;
            width: 100%;
            height: 100%;
          }

          .full-screen {
            position: absolute;
            bottom: 10px;
            right: 5px;
            cursor: pointer;
          }
        }

        .empty-style {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          color: rgba(0, 0, 0, 0.5);

          .empty-img {
            width: 100%;
            object-fit: contain;
          }
        }
      }
    }
  }
</style>
