<template>
  <div class="alert-container" >
    <el-row class="bottom-pan">
      <el-col class="panel-bottom">
        <Cameras/>
      </el-col>
    </el-row>

    <el-row class="top-pan">
      <el-col :sm="24" :md="12" class="panel-top-left">
        <statistics />
      </el-col>
      <el-col :sm="24" :md="12" class="panel-top-right">
        <alertChart />
      </el-col>
    </el-row>


  </div>
</template>

<script setup>
import { ref, reactive, onMounted,computed, onBeforeUnmount} from 'vue';
import Statistics from '@/components/Statistics.vue';
import AlertChart from '@/components/AlertChart.vue';
import  Cameras from '@/components/Cameras.vue';
import { BoxApi } from '@/utils/boxApi.ts';  // 导入 BoxApi

// 创建 BoxApi 实例
const boxApi = new BoxApi();
const typeMapping = reactive({});
const token = ref(null);
// const scale = ref(1);

// const scaleStyle = computed(() => ({
//   transform: `scale(${scale.value})`,
//   transformOrigin: 'top left', 
//   width: `${100 / scale.value}%`, 
// }));

// const handleResize = () => {
//   const clientWidth = document.documentElement.clientWidth;
//   const scaleFactor = clientWidth / 1920;  
//   scale.value = scaleFactor < 1 ? scaleFactor : 1;  
// };

// 获取类型映射
const fetchTypeMapping = async (token) => {
  try {
    const algorithms = await boxApi.getAlgorithms(token);  // 使用 BoxApi 的 getAlgorithms 方法
    const additionalMappings = [{ code_name: 'minizawu:532', name: '杂物堆积' }];
    algorithms.forEach((algorithm) => {
      typeMapping[algorithm.code_name] = algorithm.name;
    });
  } catch (error) {
    console.error("Error fetching algorithms:", error);
  }
};

onMounted(async () => {
  token.value = localStorage.getItem('alertToken');
  await fetchTypeMapping(token.value);
  // handleResize();
  // window.addEventListener('resize', handleResize);
});

// onBeforeUnmount(() => {
//   window.removeEventListener('resize', handleResize);
// });
</script>

<style scoped>
.alert-container {
  /* transform: scale(0.97); */
  padding: 0;
  margin: 0;
  background-color: #f5f7fa;
  overflow-x: hidden;
  height: 100vh;
  width: 100%;
}

.top-pan {
  /* padding: 10px; */
  /* margin-bottom: 10px; */
  /* display: flex; */
  /* gap: 5px; */
  /* background-color: #fff; */
  /* background-color: #1E2E4A; */
  /* overflow: hidden; */
  /* height: 55vh; */
  /* max-height: 450px; */
  /* padding-left: 1vh; */
  /* padding-right:1vh ; */
  /* overflow: hidden; */
  height: 56vh;
  margin-top: 60px;
  /* border: 1px solid #1E2E4A; */
  
}
.bottom-pan{
  margin: 0;
  padding: 0;
  height: 33vh;
}

.panel-top-left {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.panel-top-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
}

.panel-bottom{
  margin: 0;
  padding: 0;
}
</style>
