<template>
  <div class="main-grid" id="main-grid">
    <div class="sensor-grid-wrap" id="video-grid">
      <div class="sensor-grid" :class="gridClassName">
        <div v-for="(sensor, index) in displaySensors" :key="`${sensor.id}-${index}`" class="sensor-card">
          <template v-if="hasSensor(sensor)">
            <div class="sensor-title">{{ sensor.name }}</div>
            <template v-if="getMetrics(getSensorId(sensor)).length > 0">
              <div class="metric-list">
                <div
                  v-for="(item, idx) in getMetrics(getSensorId(sensor))"
                  :key="item.label"
                  class="metric-item"
                  :class="`metric-item-${idx}`"
                >
                  <div class="metric-label">{{ item.label }}</div>
                  <div class="metric-value">
                    <span class="value-main">{{ item.value }}</span>
                    <span class="value-unit">{{ getMetricUnit(item.label) }}</span>
                  </div>
                </div>
              </div>
            </template>
            <div v-else class="metric-empty">等待数据...</div>
          </template>
          <div v-else class="empty-card">暂未接入传感器</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import type { SensorDeviceViewItem } from '@/api/sensor-group/type';
  import type { LocalGridType } from './ScreenToolbar.vue';
  import type { SensorRealtimeData } from './useSensorRealtime';

  const METRIC_NAMES = ['温度', '湿度', '浓度'] as const;

  const props = defineProps<{
    cameraInPlay: SensorDeviceViewItem[];
    currentGrid: LocalGridType;
    sensorData: SensorRealtimeData;
  }>();

  const displaySensors = computed(() => {
    const list = props.cameraInPlay;
    const appendNum = Math.max(0, props.currentGrid - list.length);
    const emptyList: SensorDeviceViewItem[] = Array.from({ length: appendNum }, (_, index) => ({
      id: -1000 - index,
      name: '',
      code: '',
      status: '',
    }));

    return list.concat(emptyList);
  });

  const gridClassName = computed(() => `grid-${props.currentGrid}`);

  function getMetrics(sensorId: number) {
    if (sensorId < 0) return [];
    const data = props.sensorData[sensorId] ?? [];
    return data.slice(0, 3).map((item, index) => ({
      label: METRIC_NAMES[index] || `指标${index + 1}`,
      value: String(item?.value ?? '-'),
    }));
  }

  function getMetricUnit(label: string) {
    if (label === '温度') return '°C';
    if (label === '湿度') return '%RH';
    if (label === '浓度') return 'mg/m3';
    return '';
  }

  function getSensorId(sensor: SensorDeviceViewItem & { sensorId?: number }) {
    return sensor.sensorId ?? sensor.id;
  }

  const hasSensor = (sensor: SensorDeviceViewItem & { sensorId?: number }) =>
    getSensorId(sensor) >= 0 && (sensor.name !== '' || sensor.code !== '');
</script>

<style lang="scss" scoped>
  .main-grid {
    height: calc(100% - 148px);
    background: #f4f7ff;
    padding: 8px 10px 10px;
    border-radius: 0 0 4px 4px;

    .sensor-grid-wrap {
      height: 100%;
    }

    .sensor-grid {
      height: 100%;
      display: grid;
      gap: 10px;
    }

    .grid-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .grid-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-9 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid-16 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sensor-card {
      border: 1px solid #d8e3f6;
      border-radius: 4px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      box-shadow: 0 1px 8px rgba(23, 119, 255, 0.05);
      padding: 10px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;

      .sensor-title {
        font-size: 15px;
        color: #253b61;
        font-weight: 600;
        margin-bottom: 8px;
      }

      .metric-list {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 8px;
        min-height: 0;
        align-content: stretch;
      }

      .metric-item {
        border: 1px solid #dbe6f8;
        border-radius: 4px;
        background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
        padding: 6px 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 0;
        height: 100%;

        .metric-label {
          font-size: 13px;
          line-height: 18px;
          color: #4f6488;
          font-weight: 600;
          margin-bottom: 4px;
        }

        .metric-value {
          display: flex;
          align-items: baseline;
          gap: 4px;

          .value-main {
            font-size: 20px;
            line-height: 1;
            font-weight: 700;
            color: #1d3557;
          }

          .value-unit {
            font-size: 12px;
            color: #7d91b0;
            font-weight: 500;
          }
        }
      }

      .metric-item-0 {
        border-color: #ffd4c2;
        background: linear-gradient(180deg, #fff7f2 0%, #fff3eb 100%);
      }

      .metric-item-1 {
        border-color: #c6e7ff;
        background: linear-gradient(180deg, #f5fbff 0%, #edf7ff 100%);
      }

      .metric-item-2 {
        grid-column: 1 / -1;
        width: 100%;
        justify-self: stretch;
        border-color: #d8e8c0;
        background: linear-gradient(180deg, #f8fdf1 0%, #f1fae6 100%);
      }

      .metric-empty {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        color: #b0bec5;
      }
    }

    .empty-card {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #a0abc0;
      font-size: 14px;
      border: 1px dashed #d4deef;
      border-radius: 4px;
      background: #fbfdff;
    }
  }

  @media screen and (max-width: 1380px) {
    .main-grid {
      .sensor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
      }
    }
  }

  @media screen and (max-width: 1024px) {
    .main-grid {
      .sensor-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
      }
    }
  }
</style>
