<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 shape="square" size="large"
                :src="useAppStoreInstance.userInfo.avatar ? useAppStoreInstance.userInfo.avatar : useAppStoreInstance.showavatarUrl" />
              <div class="info-item">
                <span>{{ useAppStoreInstance.userInfo.name }}</span>
                <span>{{ useAppStoreInstance.position[useAppStoreInstance.userInfo.role] }}</span>
              </div>
            </div>
          </div>

          <!-- 待办事项卡片 -->
          <div class="info-card region-map">
            <el-icon class="menu_left-icon" style="color: #6495ed;" size="20">
              <BellFilled />
            </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, onMounted, watch } 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';
import useAppStore from '../../../store/module/app';
import { useRouter, useRoute } from 'vue-router';
const useAppStoreInstance = useAppStore();
const curruserInfo = computed(() => (useAppStoreInstance.userInfo));

const router = useRouter();
const route = useRoute();
// const initUserInfoFn = () => {
//   return JSON.parse(curruserInfo).avatarUrl = JSON.parse(curruserInfo).avatarUrl?JSON.parse(curruserInfo).avatarUrl:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png";
// }
// console.log(curruserInfo.value,'89898989898989',);



// 定义一个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: '/dashboard/analysis' },
  { name: '系统管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/systemmanage/staffManage' },
  { name: '建筑管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/areabuildmanage' },
  { name: '无人机管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/uavshowdate' },
  { name: '火情管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/areafiremanage/firesurveillance' },
  { 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: '/systemmanage/staffManage' }
]);
// 响应式配置
const layoutConfig = reactive({
  containerMinHeight: '100vh',
  cardSpacing: '1rem',
  topCardHeight: '120px',  // 固定顶部卡片高度
  statsMinHeight: '300px'  // 确保统计区域最小高度
});

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

onMounted(() => {
  nextTick(() => {
    useAppStoreInstance.initavatarUrlFn()
  })
});
// 监听路由变化
watch(route, () => {
  useAppStoreInstance.initavatarUrlFn()
}, { immediate: true });


</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 0;
  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:hover .menu_left-icon {
  animation: infiniteRotate 1s linear infinite;
}

@keyframes infiniteRotate {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(45deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-45deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

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

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

}

/* 统计方块样式 */
.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>