<template>
  <div class="dashboard-container">
    <div class="situation-list">
      <!-- Fire situation items -->
      <div 
        class="situation-item" 
        :class="[
          index === 0 ? 'emergency' : '',
          `fire${item.fireLevel === 0 ? 'over' : item.fireLevel === 1 ? 'warning' : 'emergency'}`
        ]" 
        v-for="(item, index) in currentFireData" 
        :key="index"
      >
        <div class="situation-content">
          <p>
            <img class="icon-fire" src="../../../static/image/huo.png" alt="fire icon"> 
            <span class="location">{{ item.location }}</span>
          </p>
          <p>
            <img class="icon-fire" src="../../../static/image/huo.png" alt="fire icon"> 
            <span class="severity">{{ item.severity }}</span>
          </p>
          <p>
            <img class="icon-fire" src="../../../static/image/huo.png" alt="fire icon"> 
            <span :class="item.isXFOk ? 'isXFOk' : 'isXFNotOk'">{{ item.status }}</span>
          </p>
          <p>
            <img class="icon-fire" src="../../../static/image/huo.png" alt="fire icon"> 
            <span class="time">{{ item.time }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

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

const router = useRouter();
const props = defineProps(["currentFireData"])
// Fire data with proper typing


let chartInstance = null;

const initFireHistoryChart = () => {
  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) => {
        return `${params[0].axisValue}日共发生<span style="color:red">${params[0].value}</span>起火灾<br />`;
      } 
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel: { rotate: 45 }
    },
    yAxis: { type: 'value' },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {}
    }]
  };
  
  chartInstance.on('click', function(params) {
    router.push({
      path: '/fireManage',
      query: { taskId: params.name }
    });
  });
  
  chartInstance.setOption(option);

  const resizeHandler = () => chartInstance.resize();
  window.addEventListener('resize', resizeHandler);
  
  onUnmounted(() => {
    window.removeEventListener('resize', resizeHandler);
    if (chartInstance) chartInstance.dispose();
  });
};

onMounted(() => {
  initFireHistoryChart();
});
</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;
}

.situation-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  padding-right: 5px;
}

.situation-item {
  display: flex;
  /* gap: 1.5rem; */
  padding: 0.9rem;
  margin-bottom: 0.5rem;
  border-radius: 6px;
    box-shadow: #7a7a7a 0 0 0.5rem;
  background-color: #f9f9f9;
  border-left: 4px solid transparent;
  transition: transform 0.2s ease;
}

.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);
}

.situation-content {
  width: 100%;

}

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

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

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

.severity {
  color: #ef4444;
}

/* Custom scrollbar */
::-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: 768px) {
  .situation-item {
    padding: 0.7rem;
    gap: 0.7rem;
  }
  
  .situation-content p {
    font-size: 0.85rem;
  }
}
</style>