<script setup lang="ts">
import type { Station } from '@/apis';
import { DeviceTree, type DeviceTreeProps } from '@/components';
import { tryGetDeviceType } from '@/enums';
import { NModal } from 'naive-ui';
import { toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const props = defineProps<{
  station?: Station;
}>();

const show = defineModel<boolean>('show', { default: false });

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

const { station } = toRefs(props);

const onAfterSelectDevice: DeviceTreeProps['onAfterSelectDevice'] = (device, stationCode) => {
  const deviceDbId = device.id;
  const deviceType = tryGetDeviceType(device.deviceType);
  router.push({
    path: '/device',
    query: {
      stationCode,
      deviceType,
      deviceDbId,
      fromPage: route.path,
    },
  });
};
</script>

<template>
  <NModal v-model:show="show" preset="card" style="width: 600px; height: 600px" :title="`${station?.name} - 设备详情`" :content-style="{ height: '100%', overflow: 'hidden' }">
    <template #default>
      <DeviceTree :station="station" :events="['select', 'manage']" :device-prefix-label="'查看'" @after-select-device="onAfterSelectDevice" />
    </template>
  </NModal>
</template>

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