<!-- 库存数量 -->
<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 InventoryDetails from './Inventory/InventoryDetails.vue'
import Chart from './Inventory/chart.vue'
import Report from './Inventory/report.vue'
const tabsList = [
  { value: '1', lable: '库存明细' },
  { value: '2', lable: '库存图表' },
  { value: '3', lable: '库存报告' },
]
const activeKey = ref(['1'])
const currentComponent = ref(InventoryDetails)

function changeMenu(key) {
  switch (key) {
    case '1':
      return currentComponent.value = InventoryDetails
    case '2':
      return currentComponent.value = Chart
    case '3':
      return currentComponent.value = Report
    default:
      return ''
  }
}
</script>

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

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

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