<!-- 视频监控-->
<template>
  <div class="pricemoitorrecord">
    <div class="menuBox">
      <a-menu v-model:selectedKeys="activeKey" mode="horizontal">
        <a-menu-item v-for="item in tabsList" :key="item.value" @click="changeMenu(item.value)">{{ item.lable }}
        </a-menu-item>
      </a-menu>
    </div>
    <component :is="currentComponent" />
  </div>
</template>
<script setup>
import RealTimeMonitoring from './videoData/RealTimeMonitoring.vue'
import BusinessTraceability from './videoData/BusinessTraceability.vue'
import VideoAnalysis from './videoData/VideoAnalysis.vue'
const tabsList = [
  { value: '1', lable: '实时视频监控' },
  { value: '2', lable: '视频回放' },
  { value: '3', lable: '业务追溯' },
  { value: '4', lable: '视频分析' }
]
const activeKey = ref(['1'])
const currentComponent = ref(RealTimeMonitoring)

function changeMenu(key) {
  switch (key) {
    case '1':
      return currentComponent.value = RealTimeMonitoring
    case '2':
      return currentComponent.value = ''
    case '3':
      return currentComponent.value = BusinessTraceability
    case '4':
      return currentComponent.value = VideoAnalysis
    default:
      return ''
  }
}
</script>

<style scoped lang="less">
.menuBox {
  opacity: 0.7;
  min-width: 400px;

  .ant-menu {
    line-height: 36px;

    .ant-menu-item {
      padding: 0 5px;
    }
  }
}
</style>
