<script setup lang="ts">
import type { NdmDeviceResultVO, Station } from '@/apis';
import { DeviceRenderer, DeviceTree, type DeviceTreeProps } from '@/components';
import type { UseDeviceSelectionReturn } from '@/composables';
import { SELECT_DEVICE_FN_INJECTION_KEY } from '@/constants';
import { usePermissionStore } from '@/stores';
import { NLayout, NLayoutContent, NLayoutSider } from 'naive-ui';
import { computed, provide, ref } from 'vue';

const permissionStore = usePermissionStore();
const stations = computed(() => permissionStore.stations.VIEW ?? []);

const selectedStation = ref<Station>();
const selectedDevice = ref<NdmDeviceResultVO>();

// 获取设备树暴露出来的 `selectDevice` 函数，并将其提供给子组件
const selectDeviceFn = ref<UseDeviceSelectionReturn['selectDevice']>();
const onExposeSelectDeviceFn: DeviceTreeProps['onExposeSelectDeviceFn'] = (fn) => {
  selectDeviceFn.value = fn;
};
provide(SELECT_DEVICE_FN_INJECTION_KEY, selectDeviceFn);

const onAfterSelectDevice: DeviceTreeProps['onAfterSelectDevice'] = (device, stationCode) => {
  selectedDevice.value = device;
  selectedStation.value = stations.value.find((station) => station.code === stationCode);
};
</script>

<template>
  <NLayout has-sider style="height: 100%">
    <NLayoutSider bordered :width="600" :collapsed-width="0" show-trigger="bar">
      <DeviceTree :events="['select', 'manage']" :sync-route="true" :device-prefix-label="'查看'" @expose-select-device-fn="onExposeSelectDeviceFn" @after-select-device="onAfterSelectDevice" />
    </NLayoutSider>
    <NLayoutContent :content-style="{ padding: '8px 8px 8px 24px' }">
      <template v-if="selectedStation && selectedDevice">
        <DeviceRenderer :station="selectedStation" :ndm-device="selectedDevice" />
      </template>
    </NLayoutContent>
  </NLayout>
</template>

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