<template>
  <div class="goaf-popup-container">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading">加载中...</div>

    <!-- 内容区域 -->
    <div v-else class="content-wrapper">
      <!-- 固定监测数据展示 -->
      <div class="record-list">
        <div class="record-item">
          <div class="label">CO(ppm)</div>
          <div class="value">{{ monitorData.coVal || '--' }}</div>
        </div>
        <div class="record-item">
          <div class="label">CO₂(%)</div>
          <div class="value">{{ monitorData.co2Val || '--' }}</div>
        </div>
        <div class="record-item">
          <div class="label">CH₄(%)</div>
          <div class="value">{{ monitorData.ch4Val || '--' }}</div>
        </div>
        <div class="record-item">
          <div class="label">C₂H₂(ppm)</div>
          <div class="value">{{ monitorData.c2h2Val || '--' }}</div>
        </div>
        <div class="record-item">
          <div class="label">C₂H₄(ppm)</div>
          <div class="value">{{ monitorData.c2h4Val || '--' }}</div>
        </div>
        <div class="record-item">
          <div class="label">O₂(%)</div>
          <div class="value">{{ monitorData.o2Val || '--' }}</div>
        </div>
        <div class="record-item">
          <div class="label">温度(℃)</div>
          <div class="value">{{ monitorData.temperature || '--' }}</div>
        </div>
        <div class="record-item">
          <div class="label">压差(Pa)</div>
          <div class="value">{{ monitorData.sourcePressure || '--' }}</div>
        </div>
      </div>

      <!-- 爆炸三角形图表 -->
      <div class="chart-section">
        <div class="chart-title">爆炸三角形</div>
        <div class="chart-box">
          <BlastDelta
            :posMonitor="monitorData"
            :canvas-size="{ width: 420, height: 149 }"
            :legendStyle="{ left: '50%', top: '10px' }"
            text-color="#000"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { getGoafData } from '../cad.api';
import { message } from 'ant-design-vue';
import BlastDelta from '/@/components/Configurable/preset/BlastDelta.vue';

interface Props {
  data: Record<string, any>;
}

const props = defineProps<Props>();

// 加载状态
const loading = ref(true);
// 定时器 ID（用于关闭清除）
let timer: ReturnType<typeof setInterval> | null = null;

// 固定监测数据对象
const monitorData = ref({
  coVal: '',
  ch4Val: '',
  c2h4Val: '',
  c2h2Val: '',
  co2Val: '',
  o2Val: '',
  sourcePressure: '',
  temperature: '',
  btTriBlast: '',
});

// 获取数据方法（抽取出来复用）
const fetchData = async () => {
  try {
    if (!props.data.id || !props.data.mineCode) {
      throw new Error('缺少 goafId 或 deptId');
    }

    // 调用接口
    const res = await getGoafData({
      goafId: props.data.id,
      deptId: props.data.mineCode,
    });

    // 从 res[0] 中取数据
    const data = res?.records[0] || {};
    
    // 赋值到页面
    monitorData.value = {
      coVal: data.coVal,
      ch4Val: data.ch4Val,
      c2h4Val: data.c2h4Val,
      c2h2Val: data.c2h2Val,
      co2Val: data.co2Val,
      o2Val: data.o2Val,
      sourcePressure: data.sourcePressure,
      temperature: data.temperature,
      btTriBlast: data.btTriBlast,
    };
  } catch (err) {
    message.error(`获取监测数据失败：${(err as Error).message}`);
    console.error('getGoafData error:', err);
  } finally {
    loading.value = false;
  }
};

// 页面打开时请求数据 + 开启定时
onMounted(async () => {
  // 首次立即加载
  await fetchData();
  
  // 每 10 秒刷新一次 10000ms = 10s
  timer = setInterval(() => {
    fetchData();
  }, 10000);
});

// 页面关闭时清除定时器（防止内存泄漏）
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});
</script>

<style scoped>
.goaf-popup-container {
  font-family: sans-serif;
  width: 500px;
  max-height: 600px;
  border-radius: 8px;
  padding-top: 10px;
  /* background: #fff; */
}

/* .content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
} */

.loading {
  color: #000;
  font-size: 14px;
  text-align: center;
  padding: 20px 0;
}

.record-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background-color: #dceefb;
  padding: 10px;
  border-radius: 4px;
}

.record-item {
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
  min-height: 60px;
  background-image: url(/src/assets/images/sealedGoaf/board-bg-details.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}


.label {
  height: 30px;
  width: 100%;
  flex-shrink: 0;
  font-size: 14px;
  color: #000;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.value {
  width: 100%;
  height: 50px;
  font-size: 16px;
  color: #2b6ff0;
  word-break: break-all;
  border-left: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 图表区域样式 */
.chart-section {
  margin-top: 10px;
  border-radius: 4px;
  padding: 4px 10px;
  background: #dceefb;
}

.chart-title {
  font-size: 14px;
  color: #000;
  text-align: left;
}

.chart-box {
  width: 100%;
  height: 200px;
  border-radius: 4px;
  overflow: hidden;
}
:deep(.legend-label) {
  font-size: 15px;
  color: #000;
}

.no-data {
  color: #999;
  font-size: 12px;
  text-align: center;
  padding: 10px 0;
  grid-column: 1 / 4;
}
</style>