<script setup lang="ts">
import { useDeviceSelection } from '@/composables/device';
import { useLineDevicesQuery, type LineDevices } from '@/composables/query';
import { useLineDevicesStore } from '@/stores/line-devices';
import { useStationStore } from '@/stores/station';
import { ChevronBack } from '@vicons/ionicons5';
import { NEmpty, NIcon, NLayout, NLayoutContent, NLayoutSider, NPageHeader, NScrollbar, NSpin } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import DeviceTree from '@/components/device-page/device-tree.vue';
import DeviceRenderer from '@/components/device-page/device-renderer.vue';

// 数据获取
const { isFetching: lineDevicesFetching } = useLineDevicesQuery();
const stationStore = useStationStore();
const { stationList } = storeToRefs(stationStore);
const lineDevicesStore = useLineDevicesStore();
const { lineDevices } = storeToRefs(lineDevicesStore);

const route = useRoute();
const router = useRouter();

const onClickBack = () => router.push({ path: `${route.query['from']}` });

const { selectedStationCode, selectedDeviceType, selectedDevice, selectDevice, initFromRoute } = useDeviceSelection();

// 页面初始化
onMounted(() => {
  initFromRoute(lineDevices.value);
});

// 加载条控制
watch(
  lineDevicesFetching,
  (fetching) => {
    if (fetching) {
      window.$loadingBar.start();
    } else {
      window.$loadingBar.finish();
      // 当设备数据更新时，需要重新配置设备树
      initFromRoute(lineDevices.value);
    }
  },
  {
    immediate: true,
  },
);
</script>

<template>
  <NLayout has-sider style="height: 100%">
    <NLayoutSider bordered :width="600" :collapsed-width="0" show-trigger="bar">
      <DeviceTree
        :station-list="stationList"
        :line-devices="lineDevices"
        :selected-station-code="selectedStationCode"
        :selected-device-type="selectedDeviceType"
        :selected-device="selectedDevice"
        @select-device="selectDevice"
      />
    </NLayoutSider>
    <NLayoutContent :content-style="{ 'padding-left': '24px', 'padding-top': '6px' }">
      <div style="height: 100%; display: flex; flex-direction: column">
        <div style="flex: 0 0 auto">
          <NPageHeader v-if="route.query['from']" title="" @back="onClickBack">
            <template #back>
              <NIcon>
                <ChevronBack />
              </NIcon>
              <div style="font-size: 15px">返回</div>
            </template>
          </NPageHeader>
        </div>

        <div style="flex: 1 1 auto; min-height: 0">
          <!-- 内容区域 -->
          <template v-if="selectedDevice && selectedStationCode">
            <NScrollbar x-scrollable style="height: 100%" :content-style="{ 'padding-right': '24px' }">
              <DeviceRenderer :station-code="selectedStationCode" :device="selectedDevice" />
            </NScrollbar>
          </template>
          <template v-else-if="lineDevicesFetching">
            <div style="width: 100%; height: 100%; display: flex">
              <NSpin style="margin: auto" />
            </div>
          </template>
          <template v-else>
            <div style="width: 100%; height: 100%; display: flex">
              <NEmpty description="选择设备查看诊断数据" style="margin: auto" />
            </div>
          </template>
        </div>
      </div>
    </NLayoutContent>
  </NLayout>
</template>

<style scoped lang="scss"></style>
