<template>
  <div class="settings-container">
    <el-row class="popup-row">
      <el-checkbox v-model="isPopupEnabled" @change="handleCheckboxChange" style="color: aliceblue;">
        开启弹窗
      </el-checkbox>
    </el-row>

    <el-row class="channel-row">
      <Channel />
    </el-row>

    <!-- el-dialog 用于显示通知详情 -->
    <!-- <el-dialog
      title="告警详情"
      v-model="dialogVisible"
      width="50%"
      @close="handleDialogClose">
      <el-row :gutter="30" style="margin-bottom: 2vh;"> 
        <el-col span="8">告警编号：{{ dialogContent.id }}</el-col>
        <el-col span="24">摄像头编号：{{ dialogContent.camera_id }}</el-col>
        <el-col span="8">摄像头名称：{{ dialogContent.camera?.name }}</el-col>
        <el-col span="8">告警类型：{{ algorithmMap.get(dialogContent.types) || '未知类型' }}</el-col>
        <el-col span="8">告警时间：{{ dialogContent.started_at }}</el-col>
      </el-row>
      <img :src="dialogContent.snapshotUrl" alt="告警图片" v-if="dialogContent.snapshotUrl" style="max-width: 100%;" />
      <video v-if="dialogContent.videoUrl" :src="dialogContent.videoUrl" controls style="max-width: 100%;"></video>
    </el-dialog> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, inject, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import type { GlobalWebSocket } from '../utils/useGlobalWebSocket';
import Channel from '@/components/Channel.vue';
import { setDialogHandler } from '../utils/useGlobalWebSocket';
import { BoxApi } from '@/utils/boxApi';

// const apiInstance = new BoxApi();

const isPopupEnabled = ref(false);
const globalWebSocket = inject<GlobalWebSocket>('globalWebSocket');

// const dialogVisible = ref(false);
// const dialogContent = ref({
//   id: null,
//   camera_id: null,
//   camera: { name: '' },
//   types: null,
//   started_at: null,
//   snapshotUrl: '', 
//   videoUrl: ''     
// });
// const algorithmMap = ref(new Map()); 


if (!globalWebSocket) {
  throw new Error('globalWebSocket 注入失败');
}

// 在页面加载时，从 localStorage 中读取勾选状态并注册 WebSocket 回调
onMounted(async () => {
  const storedState = localStorage.getItem('isPopupEnabled');
  isPopupEnabled.value = storedState === 'true';
  if (isPopupEnabled.value && !globalWebSocket.isWebSocketConnected.value) {
    globalWebSocket.connectWebSocket();
  }

  // try {
  //   const token = localStorage.getItem('alertToken');
  //   const algorithms = await apiInstance.getAlgorithms(token);
    
    
  //   algorithmMap.value = new Map(algorithms.map((algo: { code_name: string, name: string }) => [algo.code_name, algo.name]));

    
  //   setDialogHandler(showDialog);

    
  //   if (isPopupEnabled.value && !globalWebSocket.isWebSocketConnected.value) {
  //     globalWebSocket.connectWebSocket();
  //   }
  // } catch (error) {
  //   ElMessage.error('获取算法映射失败');
  //   console.error(error);
  // }
});

// 当用户勾选或取消勾选时触发的函数
const handleCheckboxChange = () => {
  if (isPopupEnabled.value) {
    ElMessageBox.confirm('是否开启弹窗提示？', '提示', {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
    })
      .then(() => {
        localStorage.setItem('isPopupEnabled', 'true');
        globalWebSocket.connectWebSocket();
      })
      .catch(() => {
        isPopupEnabled.value = false;
        localStorage.setItem('isPopupEnabled', 'false');
      });
  } else {
    globalWebSocket.closeWebSocket();
    localStorage.setItem('isPopupEnabled', 'false');
  }
};


// const showDialog = async (data: any) => {
//   try {
//     const token = localStorage.getItem('alertToken'); 
//     const eventDetails = await apiInstance.getEventById(data.id, token);

//     const snapshot = eventDetails.mediums.find((item: any) => item.name === 'snapshot');
//     const video = eventDetails.mediums.find((item: any) => item.name === 'video');

//     dialogContent.value = {
//       id: eventDetails.id,
//       camera_id: eventDetails.camera_id,
//       camera: eventDetails.camera,
//       types: eventDetails.types,
//       started_at: eventDetails.started_at,
//       snapshotUrl: snapshot?.file || '', 
//       videoUrl: video?.file || ''        
//     };
    
//     dialogVisible.value = true;
//   } catch (error) {
//     ElMessage.error('获取告警详情失败');
//     console.error(error);
//   }
// };


// const handleDialogClose = () => {
//   dialogContent.value = {
//     id: null,
//     camera_id: null,
//     camera: { name: '' },
//     types: null,
//     started_at: null,
//     snapshotUrl: '',
//     videoUrl: ''
//   };
//   dialogVisible.value = false;
// };
</script>

<style scoped>
.settings-container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}

.popup-row {
  margin-bottom: 20px;
  height: 20vh;
  width: 80vw;
  padding: 1vh 1vw;
  margin: 1vh 2vw;
  background-color: #ffffff;
  border-radius: 8px;
  color: white;
}

.channel-row {
  margin: 1vh 2vw;
  width: 80vw;
  height: 70vh;
  background-color: #001529;
  border-radius: 8px;
}
</style>
