<!-- 粮食质量管理 -->
<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 InOutStorage from './qualityControl/InOutStorage.vue'
import qualityInspection from './qualityControl/qualityInspection.vue'
import ReportQuery from './qualityControl/ReportQuery.vue'
const tabsList = [
  { value: '1', lable: '出入库质检' },
  { value: '2', lable: '整仓质检' },
  { value: '3', lable: '质检机构' },
  { value: '4', lable: '质检报表查询' },
  { value: '5', lable: '质检数据录入' }
]
const activeKey = ref(['1'])
const currentComponent = ref(InOutStorage)

function changeMenu(key) {
  switch (key) {
    case '1':
      return currentComponent.value = InOutStorage
    case '2':
      return currentComponent.value = ''
    case '3':
      return currentComponent.value = qualityInspection
    case '4':
      return currentComponent.value = ReportQuery
    case '5':
      return currentComponent.value = ''
    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>
