<template>
  <a-menu
    v-model:selectedKeys="selectedKeys"
    v-model:openKeys="openKeys"
    mode="inline"
    theme="dark"
    @select="handleMenuSelect"
    @openChange="handleOpenChange"
    class="sidebar-menu"
  >
    <!-- 数据览仓（已注释） -->
    <!--
    <a-menu-item key="/index/data_center">
      <template #icon><BarChartOutlined /></template>
      <span>数据览仓</span>
    </a-menu-item>
    -->

    <!-- 市场行情（已注释） -->
    <!--
    <a-menu-item key="/price/price_list">
      <template #icon><LineChartOutlined /></template>
      <span>市场行情</span>
    </a-menu-item>
    -->

    <!-- 人员管理 -->
    <a-sub-menu key="personnel">
      <template #icon><UserOutlined /></template>
      <template #title>
        <span>人员管理</span>
      </template>
      <a-menu-item key="/personnel/department">
        <span>行政部门</span>
      </a-menu-item>
      <a-menu-item key="/personnel/staff">
        <span>行政人员</span>
      </a-menu-item>
    </a-sub-menu>

    <!-- 养殖户管理 -->
    <a-menu-item key="/farmer">
      <template #icon><TeamOutlined /></template>
      <span>养殖户管理</span>
    </a-menu-item>

    <!-- 智慧仓库 -->
    <a-sub-menu key="/smart-warehouse">
      <template #icon><HddOutlined /></template>
      <template #title>
        <span>智慧仓库</span>
      </template>
      <a-menu-item key="/smart-warehouse/smart-collar">
        <span>智能项圈</span>
      </a-menu-item>
      <a-menu-item key="/smart-warehouse/smart-earmark">
        <span>智能耳标</span>
      </a-menu-item>
      <a-menu-item key="/smart-warehouse/smart-host">
        <span>智能主机</span>
      </a-menu-item>
    </a-sub-menu>

    <!-- 屠宰无害化 -->
    <a-sub-menu key="/slaughter">
      <template #icon><SafetyOutlined /></template>
      <template #title>
        <span>屠宰无害化</span>
      </template>
      <a-menu-item key="/slaughter/slaughterhouse">
        <span>屠宰场</span>
      </a-menu-item>
      <a-menu-item key="/slaughter/harmless/place">
        <span>无害化场所</span>
      </a-menu-item>
    </a-sub-menu>

    <!-- 无纸化防疫 -->
    <a-sub-menu key="/paperless/epidemic">
      <template #icon><FileTextOutlined /></template>
      <template #title>
        <span>无纸化防疫</span>
      </template>
      <!-- <a-menu-item key="paperless/epidemic"><span>防疫首页</span></a-menu-item> -->
      <a-menu-item key="/paperless/epidemic/epidemic-agency"><span>防疫机构管理</span></a-menu-item>
      <a-menu-item key="/paperless/epidemic/epidemic-record"><span>防疫记录</span></a-menu-item>
      <a-menu-item key="/paperless/epidemic/vaccine-management"><span>疫苗管理</span></a-menu-item>
      <a-menu-item key="/paperless/epidemic/epidemic-activity"><span>防疫活动管理</span></a-menu-item>
    </a-sub-menu>

    <!-- 无纸化检疫 -->
    <!-- <a-sub-menu key="/paperless/quarantine">
      <template #icon><SafetyOutlined /></template>
      <template #title>
        <span>无纸化检疫</span>
      </template>
      <a-menu-item key="/paperless/quarantine/declaration"><span>检疫审批</span></a-menu-item>
      <a-menu-item key="/paperless/quarantine/record-query"><span>检疫证查询</span></a-menu-item>
      <a-menu-item key="/paperless/quarantine/config"><span>检疫站清单</span></a-menu-item>
    </a-sub-menu> -->

    <!-- 生资认证 -->
    <a-menu-item key="/examine/index">
      <template #icon><CheckCircleOutlined /></template>
      <span>生资认证</span>
    </a-menu-item>

    <!-- 养牛学院 -->
    <a-menu-item key="/academy">
      <template #icon><BookOutlined /></template>
      <span>养牛学院</span>
    </a-menu-item>

    <!-- 设备预警 -->
    <a-menu-item key="/device-warning">
      <template #icon><ExclamationCircleOutlined /></template>
      <span>设备预警</span>
    </a-menu-item>
  </a-menu>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { BarChartOutlined, LineChartOutlined, UserOutlined, TeamOutlined, HddOutlined, SafetyOutlined, FileTextOutlined, CheckCircleOutlined, BookOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'

const router = useRouter()
const route = useRoute()

// 当前选中的菜单项
const selectedKeys = ref([route.path])

// 展开的菜单项
const openKeys = ref([])

// 处理菜单选择
const handleMenuSelect = ({ key }) => {
  if (key) {
    router.replace(key)
  }
}

// 处理展开/收起
const handleOpenChange = (keys) => {
  openKeys.value = keys
}

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    selectedKeys.value = [newPath]
  }
)

// 组件挂载时初始化
onMounted(() => {
  // 确保选中当前路由
  selectedKeys.value = [route.path]
})
</script>

<style scoped>
.sidebar-menu {
  height: 100%;
  border-right: 0;
}
</style>