<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="card-header">
              <h2>区域信息概览</h2>
            </div>
            <div class="info-grid">
              <div class="info-item" v-for="(item, index) in OverviewRegionalInformation" :key="index">
                <span class="label">{{ item.label }}:</span>
                <span class="value" :style="{ color: item.label === '当前可用无人机数量' ? 'green' : 'black' }">{{ item.value
                  }}</span>
              </div>
            </div>
          </div>

          <!-- 区域地图 -->
          <div class="info-card region-map">
            <img src="../../../static/image/login_bg.png" alt="阳光花园小区航拍图" class="map-image" />
          </div>
        </div>

        <!-- 左侧下部分：历史火情统计 -->
        <div class="info-card stats-alerts">
          <div class="card-tabs">
            <span class="tab-btn">历史火情统计</span>
          </div>

          <div class="tab-content history-stats">
            <div class="time-filter">
              <el-select v-model="historyFireSelectTime" placeholder="选择数据查看范围" style="width: 240px"
                class="filter-select" @change="historyFireSelectTimeFn">
                <el-option v-for="item in historyFireTimeData" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </div>
            <div class="chart-container">
              <div id="historyChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧区域 -->
      <div class="right-section">
        <div class="info-card current-situation">
          <div class="card-header  ">
            <h2> <img class="icon-fire-red" src="../../static/image/huo.png" alt="">当前火情</h2>
            <span><el-button type="warning" circle style="color: red;">紧急</el-button></span>
          </div>

          <div class="situation-list">
            <!-- 火情项目 -->
            <div class="situation-item " :class="index === 0 ? 'emergency' : ''"
              v-for="(item, index) in currentFireData" :key="index">

              <div class="situation-content">
                <p><img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span
                    class="location">{{ item.location }}</span></p>
                <p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="severity">{{
                    item.severity}}</span></p>
                <p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span
                    :class="item.isXFOk ? 'isXFOk' : 'isXFNotOk'">{{ item.status }}</span></p>
                <p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="time">{{
                    item.time}}</span></p>
              </div>
            </div>
          </div>
        </div>

        <div class="info-card current-situation1">
          <div class="card-header">
            <h2>传感器报警</h2>
            <span><el-button type="warning" circle>紧急</el-button></span>
          </div>
          <div class="situation-list">
            <!-- 火情项目 -->
            <div class="situation-item " :class="sensorFireBorderColor[item.fireLevel]"
              v-for="(item, index) in currentFireData" :key="index">

              <div class="situation-content">
                <p><img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span
                    class="location">{{ item.location }}</span></p>
                <p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="severity">{{
                    item.severity}}</span></p>
                <p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span
                    class="status">{{ item.status }}</span></p>
                <p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="time">{{
                    item.time}}</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, nextTick, reactive, onUnmounted, watchEffect } from 'vue';
import { useRoute, useRouter } from 'vue-router';


const router = useRouter();
const route = useRoute();
// 响应式高度配置，方便统一修改
const heightConfig = reactive({
  containerMinHeight: '100vh',
  leftTopHeight: '350px',
  cardSpacing: '1rem',
  headerHeight: '40px',
  chartMinHeight: '250px'
});

// 计算容器样式
const containerStyle = computed(() => ({
  minHeight: heightConfig.containerMinHeight,
  '--card-spacing': heightConfig.cardSpacing,
  '--header-height': heightConfig.headerHeight,
  '--chart-min-height': heightConfig.chartMinHeight
}));

// 区域信息数据
const OverviewRegionalInformation = ref([
  { label: "小区名称", value: "阳光花园" },
  { label: "小区建筑数量", value: "12栋" },
  { label: "配备无人机数量", value: "5台" },
  { label: "当前可用无人机数量", value: "3台" },
  { label: "最近火情发生时间", value: "2023-05-15 14:30" },
  { label: "配备无人机数量", value: "5台" },
  { label: "当前可用无人机数量", value: "3台" },
  { label: "最近火情发生时间", value: "2023-05-15 14:30" }
]);

// 历史数据时间选择
const historyFireSelectTime = ref('');
const historyFireTimeData = ref([
  { label: "近一个月", value: 30 },
  { label: "近三个月", value: 90 },
  { label: "近半年", value: 180 },
  { label: "近一年", value: 365 }
]);

// 定义一个响应式变量currentFireData，存储火灾数据
const currentFireData = ref([
  { 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: 1, 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 },

]);
// 定义一个响应式变量，用来存储火警的边框颜色
const sensorFireBorderColor = ref(["fireover", "firewarning", "fireemergency"]);
const historyFireSelectTimeFn = () => {
  console.log(historyFireSelectTime.value);
};

// 图表实例
let chartInstance = null;

const initFireHistoryChart = () => {
  nextTick(() => {  // 确保DOM渲染完成
    const chartDom = document.getElementById('historyChart');
    if (!chartDom) return;

    // 销毁已有实例避免内存泄漏
    if (chartInstance) chartInstance.dispose();

    chartInstance = echarts.init(chartDom);

    const option = {
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        top: '3%',
        containLabel: true  // 确保标签不被裁剪
      },
      tooltip: {
        trigger: 'axis',
        formatter: (params) => {
          // console.log('params', params)
          let html = `${(params[0].axisValue)}日共发生<span style="color:red">${(params[0].value)}</span>起火灾<br />`
          return html
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
          rotate: 45 // 旋转45度
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
      }]
    };
    chartInstance.on('click', function (params) {
      // 获取到点击的点的相关信息，再跳转到详情页的时候传递过去
      // console.log("--------------333333333333-------------",params.name,params.value);
      router.push({
        path: '/fireManage',
        query: { taskId: params.name }
      })
      useAppStoreInstance.num = 4
    });
    chartInstance.setOption(option);

    // 窗口大小变化时重绘图表
    const resizeHandler = () => {
      chartInstance.resize();
    };

    window.addEventListener('resize', resizeHandler);

    // 组件卸载时清理
    onUnmounted(() => {
      window.removeEventListener('resize', resizeHandler);
      chartInstance.dispose();
    });
  });
};



// 挂载时初始化
onMounted(() => {
  initFireHistoryChart();

});


</script>

<style scoped>
/* 基础样式 - 使用CSS变量方便调整 */
.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;
  overflow: hidden;
}

/* 左侧区域样式 */
.left-section {
  /* background-color: #10b981; */
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: var(--card-spacing);
  height: 100%;
  overflow: hidden;
}

.left-top {
  display: flex;
  gap: var(--card-spacing);
  height: 39%;
  flex-shrink: 0;
}

/* 卡片通用样式 - 核心优化 */
.info-card {
  background-color: rgb(255, 255, 255);
  border-radius: 8px;

  padding: 1rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.info-card:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;

  align-items: center;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 1rem;
  height: var(--header-height);
  /* flex-shrink: 0; */
}

.card-header1 {
  background-color: #e29393;
}

.card-header h2 {
  font-size: 1.2rem;
  color: #1e40af;
  margin: 0;

}

.more-btn {
  width: 50px;
  background-color: #facc15;
  display: flex;
  justify-content: center;
  border-radius: 90%;
  align-items: center;
}

.icon-fire-red {
  margin-top: -0.31rem;
  width: 15%;
  margin-right: 10px;

}

/* 区域信息概览 */
.region-overview {
  flex: 1;
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  overflow-y: auto;
  /* flex-grow: 1; */
  padding-right: 5px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;

}

.info-item:hover {
  transform: translateX(4px);
}

.info-item:last-child {
  border-bottom: none;
}

.info-item .label {
  font-size: 0.9rem;
  color: #666;
}

.info-item .value {
  font-size: 0.95rem;
  font-weight: 600;
}

/* 区域地图 */
.region-map {
  flex: 2;
  padding: 0;
}

.map-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-image:hover {

  transform: translateY(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

}

/* 历史火情统计 */
.stats-alerts {
  height: 38.5%;
  display: flex;
  flex-direction: column;


}

.card-tabs {
  display: flex;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  color: #1e40af;
}

.tab-content {

  display: flex;
  flex-direction: column;
  /* height: 100%; */
}

.history-stats {
  display: flex;
  flex-direction: column;

}

.time-filter {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

/* 图表容器 - 自适应高度 */
.chart-container {

  width: 100%;
  position: relative;
  min-height: var(--chart-min-height);
}

.chart {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
}

/* 右侧区域样式 */
.right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--card-spacing);
  height: 79%;
  overflow: hidden;
}

/* 右侧卡片 - 使用flex布局自动分配高度 */
.current-situation,
.current-situation1 {
  display: flex;
  flex-direction: column;


}

/* 火情列表 */
.situation-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  flex-grow: 1;
  padding-right: 5px;
}

/* 火情项目样式 */
.situation-item {
  display: flex;
  gap: 1rem;
  padding: 0.9rem;
  border-radius: 6px;
  background-color: #f9f9f9;
  border-left: 4px solid transparent;
  transition: transform 0.2s ease;
  border-left: #fc0000 4px solid;
}

.situation-item:hover {
  transform: translateX(4px);
}

.fireover {
  border-left: #10b981 4px solid;
}

.fireemergency {
  border-left: #fc0000 4px solid;
}

.firewarning {

  border-left: #facc15 4px solid;

}

.isXFOk {
  color: #10b981;
}

.isXFNotOk {
  color: #144937;
}

.emergency {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  /* background-color: #fff; 设置背景色避免透明 */
  /* 可选：添加阴影增强视觉效果 */

}

.situation-content p {
  margin: 0.2rem 0;
  font-size: 1rem;
  color: #444;
  height: 1.5rem;
  display: flex;

  align-items: center;
}

.icon-fire-red1 {
  height: 70%;
  margin-right: 0.5rem;
}

.situation-content .location {
  font-weight: 500;
  color: #1e40af;
}

.situation-content .severity {
  color: #ef4444;
}

.situation-content .status {
  color: #10b981;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .main-content {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .left-top {
    height: auto;
    flex-direction: column;
  }

  .region-overview,
  .region-map {
    height: 300px;
    margin-bottom: var(--card-spacing);
  }
}

@media (max-width: 768px) {
  .card-header h2 {
    font-size: 1rem;
  }

  .situation-item {
    padding: 0.7rem;
    gap: 0.7rem;
  }

  .situation-content p {
    font-size: 0.85rem;
  }
}
</style>