<script setup lang="ts">
import type {
  NdmAlarmHostResultVO,
  NdmCameraResultVO,
  NdmDecoderResultVO,
  NdmDeviceResultVO,
  NdmKeyboardResultVO,
  NdmNvrResultVO,
  NdmSecurityBoxResultVO,
  NdmServerResultVO,
  NdmSwitchResultVO,
  Station,
} from '@/apis';
import { DEVICE_TYPE_LITERALS, tryGetDeviceType } from '@/enums';
import { computed, defineAsyncComponent, toRefs } from 'vue';

const AlarmHostCard = defineAsyncComponent(() => import('@/components/device/device-card/ndm-alarm-host/alarm-host-card.vue'));
const CameraCard = defineAsyncComponent(() => import('@/components/device/device-card/ndm-camera/camera-card.vue'));
const DecoderCard = defineAsyncComponent(() => import('@/components/device/device-card/ndm-decoder/decoder-card.vue'));
const KeyboardCard = defineAsyncComponent(() => import('@/components/device/device-card/ndm-keyboard/keyboard-card.vue'));
const NvrCard = defineAsyncComponent(() => import('@/components/device/device-card/ndm-nvr/nvr-card.vue'));
const SecurityBoxCard = defineAsyncComponent(() => import('@/components/device/device-card/ndm-security-box/security-box-card.vue'));
const ServerCard = defineAsyncComponent(() => import('@/components/device/device-card/ndm-server/server-card.vue'));
const SwitchCard = defineAsyncComponent(() => import('@/components/device/device-card/ndm-switch/switch-card.vue'));

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

const { ndmDevice, station } = toRefs(props);

const deviceType = computed(() => tryGetDeviceType(ndmDevice.value.deviceType));

const ndmAlarmHost = computed(() => ndmDevice.value as NdmAlarmHostResultVO);
const ndmCamera = computed(() => ndmDevice.value as NdmCameraResultVO);
const ndmDecoder = computed(() => ndmDevice.value as NdmDecoderResultVO);
const ndmKeyboard = computed(() => ndmDevice.value as NdmKeyboardResultVO);
const ndmNvr = computed(() => ndmDevice.value as NdmNvrResultVO);
const ndmSecurityBox = computed(() => ndmDevice.value as NdmSecurityBoxResultVO);
const ndmServer = computed(() => ndmDevice.value as NdmServerResultVO);
const ndmSwitch = computed(() => ndmDevice.value as NdmSwitchResultVO);
</script>

<template>
  <template v-if="deviceType === DEVICE_TYPE_LITERALS.ndmAlarmHost">
    <AlarmHostCard :ndmDevice="ndmAlarmHost" :station="station" />
  </template>
  <template v-if="deviceType === DEVICE_TYPE_LITERALS.ndmCamera">
    <CameraCard :ndmDevice="ndmCamera" :station="station" />
  </template>
  <template v-if="deviceType === DEVICE_TYPE_LITERALS.ndmDecoder">
    <DecoderCard :ndmDevice="ndmDecoder" :station="station" />
  </template>
  <template v-if="deviceType === DEVICE_TYPE_LITERALS.ndmKeyboard">
    <KeyboardCard :ndmDevice="ndmKeyboard" :station="station" />
  </template>
  <template v-if="deviceType === DEVICE_TYPE_LITERALS.ndmNvr">
    <NvrCard :ndmDevice="ndmNvr" :station="station" />
  </template>
  <template v-if="deviceType === DEVICE_TYPE_LITERALS.ndmSecurityBox">
    <SecurityBoxCard :ndmDevice="ndmSecurityBox" :station="station" />
  </template>
  <template v-if="deviceType === DEVICE_TYPE_LITERALS.ndmMediaServer || deviceType === DEVICE_TYPE_LITERALS.ndmVideoServer">
    <ServerCard :ndmDevice="ndmServer" :station="station" />
  </template>
  <template v-if="deviceType === DEVICE_TYPE_LITERALS.ndmSwitch">
    <SwitchCard :ndmDevice="ndmSwitch" :station="station" />
  </template>
</template>

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