<script setup lang="ts">
import type { NdmKeyboardResultVO } from '@/apis/models';
import { useDebugModeStore } from '@/stores/debug-mode';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { ref, toRefs } from 'vue';

import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
import KeyboardHistoryDiagCard from './history-diag-card/keyboard-history-diag-card.vue';

const props = defineProps<{
  stationCode: string;
  ndmKeyboard: NdmKeyboardResultVO;
}>();

const debugModeStore = useDebugModeStore();

const { stationCode, ndmKeyboard } = toRefs(props);

const selectedTab = ref('设备状态');
</script>

<template>
  <NCard size="small">
    <NTabs v-model:value="selectedTab" size="small">
      <NTabPane name="设备状态" tab="设备状态">
        <NFlex vertical>
          <DeviceHeaderCard :device="ndmKeyboard" />
        </NFlex>
      </NTabPane>
      <NTabPane name="历史诊断" tab="历史诊断">
        <!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
        <KeyboardHistoryDiagCard :station-code="stationCode" :ndm-keyboard="ndmKeyboard" :key="ndmKeyboard.id" />
      </NTabPane>
      <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
      <NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
        <pre class="raw-data">{{ { ...ndmKeyboard } }}</pre>
      </NTabPane>
    </NTabs>
  </NCard>
</template>

<style scoped lang="scss">
.raw-data {
  white-space: pre-wrap;
  word-break: break-all;
}
</style>
