<script setup lang="ts">
import type { Station } from '@/apis/domains';
import DeviceAlarmDetailModal from '@/components/dashboard-page/device-alarm-detail-modal.vue';
import DeviceParamsConfigModal from '@/components/dashboard-page/device-params-config-modal.vue';
import OfflineDeviceDetailModal from '@/components/dashboard-page/offline-device-detail-modal.vue';
import StationCard from '@/components/dashboard-page/station-card.vue';
import { useLineAlarmCountsQuery, useLineDevicesQuery } from '@/composables/query';
import { useStationStore } from '@/stores/station';
import { useLineDevicesStore } from '@/stores/line-devices';
import { NGrid, NGi } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { ref, watch } from 'vue';
import { useLineAlarmCountsStore } from '@/stores/line-alarm-counts';
import { useLayoutStore } from '@/stores/layout';

const stationStore = useStationStore();
const { stationList } = storeToRefs(stationStore);
const lineDevicesStore = useLineDevicesStore();
const { lineDevices } = storeToRefs(lineDevicesStore);
const lineAlarmCountsStore = useLineAlarmCountsStore();
const { lineAlarmCounts } = storeToRefs(lineAlarmCountsStore);

const { isFetching: lineDevicesFetching } = useLineDevicesQuery();
const { isFetching: lineAlarmCountsFetching } = useLineAlarmCountsQuery();
const layoutStore = useLayoutStore();
const { stationLayoutGridCols } = storeToRefs(layoutStore);

// 当设备查询或告警查询正在进行时，显示加载条
watch(
  [lineDevicesFetching, lineAlarmCountsFetching],
  (fetchingList) => {
    if (fetchingList.some((pending) => pending)) {
      window.$loadingBar.start();
    } else {
      window.$loadingBar.finish();
    }
  },
  {
    immediate: true,
  },
);

const selectedStation = ref<Station>();
const offlineDeviceTreeModalShow = ref(false);
const deviceAlarmTreeModalShow = ref(false);
const deviceParamsConfigModalShow = ref(false);
const openOfflineDeviceDetailModal = (station: Station) => {
  selectedStation.value = station;
  offlineDeviceTreeModalShow.value = true;
};
const openDeviceAlarmDetailModal = (station: Station) => {
  selectedStation.value = station;
  deviceAlarmTreeModalShow.value = true;
};
const openDeviceParamsConfigModal = (station: Station) => {
  selectedStation.value = station;
  deviceParamsConfigModalShow.value = true;
};
</script>

<template>
  <NGrid :cols="stationLayoutGridCols" :x-gap="6" :y-gap="6" style="padding: 8px">
    <NGi v-for="station in stationList" :key="station.code">
      <StationCard
        :station="station"
        :station-devices="lineDevices[station.code]"
        :station-alarm-counts="lineAlarmCounts[station.code]"
        @open-offline-device-detail-modal="openOfflineDeviceDetailModal"
        @open-device-alarm-detail-modal="openDeviceAlarmDetailModal"
        @open-device-params-config-modal="openDeviceParamsConfigModal"
      />
    </NGi>
  </NGrid>

  <!-- 离线设备详情对话框 -->
  <OfflineDeviceDetailModal v-model:show="offlineDeviceTreeModalShow" :station="selectedStation" :station-devices="selectedStation?.code ? lineDevices[selectedStation.code] : undefined" />
  <!-- 设备告警详情对话框 -->
  <DeviceAlarmDetailModal v-model:show="deviceAlarmTreeModalShow" :station="selectedStation" :station-alarm-counts="selectedStation?.code ? lineAlarmCounts[selectedStation.code] : undefined" />
  <!-- 设备配置面板对话框 -->
  <DeviceParamsConfigModal v-model:show="deviceParamsConfigModalShow" :station="selectedStation" />
</template>

<style scoped></style>
