<template>
  <a-menu v-model:selectedKeys="state.selectedKeys" mode="horizontal">
    <a-menu-item :key="1">
      设备列表
    </a-menu-item>
    <a-menu-item :key="2">
      机场异常反馈记录
    </a-menu-item>
    <a-menu-item :key="3">
      设备变化记录
    </a-menu-item>
  </a-menu>
  <template v-if="state.selectedKeys[0] === 1">
    <DeviceList />
  </template>
  <template v-else-if="state.selectedKeys[0] === 2">
    <FeedbackRecord />
  </template>
  <template v-else-if="state.selectedKeys[0] === 3">
    <ChangeRecord />
  </template>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import DeviceList from '/@/components/devices/deviceList/index.vue'
import FeedbackRecord from '/@/components/devices/feedbackRecord/index.vue'
import ChangeRecord from '/@/components/devices/changeRecord/index.vue'

const state = reactive({
  selectedKeys: [1],
})
</script>

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