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

    <el-row class="top-pan">
      <el-col :sm="24" :md="12" class="panel-top-left">
        <statistics />
        <!-- <div class="placeholder">预留块区域</div> -->
      </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 } 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 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);
});
</script>

<style scoped>
.alert-container {
  padding: 0;
  margin: 0;
  background-color: #f5f7fa;
}

.top-pan {
  /* padding: 10px; */
  /* margin-bottom: 10px; */
  display: flex;
  gap: 10px;
  background-color: #fff;
  overflow: hidden;
  height: 55vh;
}
.bottom-pan{
  margin: 0;
  padding: 0;
}

.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>
