<template>
  <div class="dashboard-container" :style="containerStyle">
    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 左侧区域 -->
      <div class="left-section">
        <!-- 左侧上部分 -->
        <div class="left-top">
          <!-- 区域信息概览 -->
          <div class="info-card region-overview">
            <div class="info-grid">
              <el-avatar size="large" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
              <div class="info-item">
                <span>张明</span>
                <span>高级产品经理</span>
              </div>
            </div>
          </div>

          <!-- 待办事项卡片 -->
          <div class="info-card region-map">
            <el-icon style="color: #6495ed;" size="20"><ChatDotSquare /></el-icon>
            <span>{{ 12 }}待办事项</span>
          </div>
        </div>

        <!-- 左侧下部分：统计区域 -->
        <div class="info-card stats-alerts">
          <div class="card-tong" >
            <currentFire :currentFireData="currentFireData"></currentFire>
          </div>
          <div class="card-tong" >
            <uav :uavRepairData="uavRepairData"></uav>
          </div>
          <div class="card-tong card-tong-large" >
            <meanList :menuItems="menuItems" ></meanList>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { reactive, computed } from 'vue';
import { ChatDotSquare } from '@element-plus/icons-vue';
import currentFire from '../components/currentFire.vue';
import uav from '../components/uav.vue';
import meanList from '../components/menuList.vue';
// 定义一个ref变量，用于存储当前的火灾数据
const currentFireData = ref([
  // 火灾数据1
  {
    location: "红色 四单元 七号搂 3楼", 
    severity: "四级 (大规模)", 
    status: "消防人员已到达现场", 
    time: "2025年8月7日 11:14 发现",
    fireLevel: 0,
    isXFOk: false
  },
  // 火灾数据2
  {
    location: "金色家园小区 三单元 七号搂 3楼", 
    severity: "三级 (大规模)", 
    status: "消防人员未到达现场", 
    time: "2025年8月5日 11:14 发现",
    fireLevel: 1, 
    isXFOk: true
  },
  // 火灾数据3
  {
    location: "金色家园小区 四单元 七号搂 3楼", 
    severity: "四级 (大规模)", 
    status: "消防人员已到达现场", 
    time: "2025年8月7日 11:14 发现",
    fireLevel: 0, 
    isXFOk: false
  },
  {
    location: "金色家园小区 三单元 七号搂 3楼", 
    severity: "三级 (大规模)", 
    status: "消防人员未到达现场", 
    time: "2025年8月5日 11:14 发现",
    fireLevel: 2, 
    isXFOk: true
  },
  {
    location: "金色家园小区 四单元 七号搂 3楼", 
    severity: "四级 (大规模)", 
    status: "消防人员已到达现场", 
    time: "2025年8月7日 11:14 发现",
    fireLevel: 0, 
    isXFOk: false
  },
  {
    location: "金色家园小区 三单元 七号搂 3楼", 
    severity: "三级 (大规模)", 
    status: "消防人员未到达现场", 
    time: "2025年8月5日 11:14 发现",
    fireLevel: 2, 
    isXFOk: true
  }
]);
// 定义一个uavRepairData的ref，里面包含了多个无人机维修数据
const uavRepairData = ref([
  // 第一个无人机维修数据，已经维修
  {isRepaid: true, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]},
  // 第二个无人机维修数据，已经维修
  {isRepaid: true, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]},
  // 第三个无人机维修数据，未维修
  {isRepaid: false, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]},
  // 第四个无人机维修数据，已经维修
  {isRepaid: true, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]},
  // 第五个无人机维修数据，未维修
  {isRepaid: false, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]},
  // 第六个无人机维修数据，已经维修
  {isRepaid: true, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]},
])


const menuItems = ref([
  { name: '首页', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/' },
  { name: '系统管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/system' },
  { name: '建筑管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/buildings' },
  { name: '无人机管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/drones' },
  { name: '火情管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/fires' },
  { name: '数字孪生管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/digital-twin' },
  { name: '个人信息', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/profile' }
]);
// 响应式配置
const layoutConfig = reactive({
  containerMinHeight: '100vh',
  cardSpacing: '1rem',
  topCardHeight: '120px',  // 固定顶部卡片高度
  statsMinHeight: '300px'  // 确保统计区域最小高度
});

// 计算容器样式
const containerStyle = computed(() => ({
  minHeight: layoutConfig.containerMinHeight,
  '--card-spacing': layoutConfig.cardSpacing,
}));
</script>

<style scoped>
.dashboard-container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: rgba(0, 0, 0, 0.05);
  color: #333;
  overflow: hidden;
}

.main-content {
  display: flex;
  gap: var(--card-spacing);
  padding: 0.4rem;
  height: 100vh;
  box-sizing: border-box;
}

.left-section {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: var(--card-spacing);
  height: 100%;
}

/* 顶部卡片容器 */
.left-top {
  display: flex;

  height: auto;  /* 取消固定高度，改为内容自适应 */
}

/* 通用卡片样式 */
.info-card {
  background-color: #fff;
  padding: 1rem;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* 用户信息卡片 */
.region-overview {
  flex: 1;
  min-width: 200px;  /* 确保最小宽度 */
}

/* 用户信息布局 */
.info-grid {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}

/* 待办事项卡片 */
.region-map {
  flex: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;  /* 确保最小宽度 */
  background-color: rgba(100,149,237,0.30)
}

.region-map span {
  margin-left: 0.5rem;
  font-weight: 500;
}

/* 统计区域卡片 */
.stats-alerts {
  display: flex;
  gap: 1rem;
 border-radius: 8px;
  height: 67%;

}

/* 统计方块样式 */
.card-tong {
  flex: 1;
  border-radius: 10px;
  height: 100%;
  box-shadow: 2px 0   rgba(0, 0, 0, 0.1);
  overflow: auto;
}

.card-tong-large {
  flex: 2;  /* 第三个方块宽度是其他两个的两倍 */
}

/* 响应式适配 */
@media (max-width: 1024px) {
  .left-top {
    flex-direction: column;
  }
  
  .region-overview, .region-map {
    width: 100%;
    flex: none;
  }
}

@media (max-width: 768px) {
  .stats-alerts {
    flex-direction: column;
  }
  
  .card-tong-large {
    flex: none;
    height: 150px;  /* 在移动端保持高度 */
  }
}
</style>