<template>
  <div>
    <aside class="layout-sidebar">
      <div class="sidebar-section" v-for="menu in menuList" :key="menu.path">
        <div class="section-header" @click="toggleMenu(menu.path)">
          <el-icon><component :is="menu.icon" /></el-icon>
          <span>{{ menu.title }}</span>
          <el-icon class="arrow"><ArrowDown /></el-icon>
        </div>
        <div class="section-items" v-show="openedMenus.includes(menu.path)">
          <div
            v-for="child in menu.children"
            :key="child.path"
            :class="['menu-item', { active: activeMenu === child.path }]"
            @click="handleMenuSelect(child.path)"
          >
            {{ child.title }}
            <el-icon class="item-arrow"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>
    </aside>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ArrowDown, ArrowRight, RefreshRight, Van, Medal } from '@element-plus/icons-vue';
import { onPath } from '@/utils/siteConfig';

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

const menuList = [
  {
    path: '/enterprise',
    title: '企业账户',
    icon: 'User',
    children: [
      { path: '/enterprise/companyInfo', title: '企业信息' },
      { path: '/enterprise/messageNotice', title: '消息通知' },
      { path: '/easybuv', title: '地址管理' },
      { path: '/enterprise/invoiceManage', title: '发票抬头管理' },
      { path: '/enterprise/purchasePlan', title: '专属采购方案' },
      { path: '/enterprise/agreementSupply', title: '协议供货' },
      { path: '/enterprise/myCollection', title: '我的收藏' },
      { path: '/enterprise/purchaseHistory', title: '历史购买' },
      { path: '/enterprise/myFootprint', title: '我的足迹' }
    ]
  },
  {
    path: '/order',
    title: '交易管理',
    icon: 'ShoppingCart',
    children: [
      { path: '/order/orderManage', title: '订单管理' },
      { path: '/order/orderAudit', title: '审核订单' },
      { path: '/order/afterSale', title: '售后服务' },
      { path: '/order/batchOrder', title: '批量下单' },
      { path: '/order/orderEvaluation', title: '订单评价' }
    ]
  },
  {
    path: '/organization',
    title: '组织管理',
    icon: 'OfficeBuilding',
    children: [
      { path: '/i', title: '个人信息' },
      { path: '/organization/deptManage', title: '部门管理' },
      { path: '/organization/staffManage', title: '人员管理' },
      { path: '/organization/roleManage', title: '角色管理' },
      { path: '/organization/approvalFlow', title: '审批流程' },
      { path: '/organization/groupEnterprise', title: '集团关联企业' }
    ]
  },
  {
    path: '/cost',
    title: '成本管理',
    icon: 'Money',
    children: [
      { path: '/cost/itemExpense', title: '分项费用' },
      { path: '/cost/quotaControl', title: '额度控制' }
    ]
  },
  {
    path: '/reconciliation',
    title: '对账管理',
    icon: 'Document',
    children: [
      { path: '/reconciliation/billManage', title: '对账单管理' },
      { path: '/reconciliation/invoiceManage', title: '开票管理' }
    ]
  },
  {
    path: '/valueAdded',
    title: '增值服务',
    icon: 'Service',
    children: [
      { path: '/valueAdded/maintenance', title: '维保服务' },
      { path: '/valueAdded/complaint', title: '投诉与建议' }
    ]
  },
  {
    path: '/analysis',
    title: '采购分析',
    icon: 'DataAnalysis',
    children: [
      { path: '/analysis/orderAnalysis', title: '订单交易分析' },
      { path: '/analysis/purchaseDetail', title: '商品采购明细' },
      { path: '/analysis/orderStatus', title: '订单执行状态' },
      { path: '/analysis/settlementStatus', title: '对账结算状况' },
      { path: '/analysis/deptPurchase', title: '部门采购金额' }
    ]
  }
];

const openedMenus = ref<string[]>([]);
const activeMenu = computed(() => route.path);

// 根据当前路由自动展开对应的父级菜单
const initOpenedMenus = () => {
  const currentPath = route.path;
  for (const menu of menuList) {
    const hasActiveChild = menu.children?.some((child) => currentPath === child.path || currentPath.startsWith(child.path + '/'));
    if (hasActiveChild) {
      // 只展开当前路由对应的菜单
      openedMenus.value = [menu.path];
      return;
    }
  }
};

// 页面加载和路由变化时自动展开菜单
onMounted(() => {
  initOpenedMenus();
});

watch(
  () => route.path,
  () => {
    initOpenedMenus();
  }
);

const toggleMenu = (path: string) => {
  const index = openedMenus.value.indexOf(path);
  if (index > -1) {
    // 如果已展开，则收起
    openedMenus.value.splice(index, 1);
  } else {
    // 手风琴效果：先收起所有，再展开当前
    openedMenus.value = [path];
  }
};

const handleMenuSelect = (path: string) => {
  onPath(path);
  // router.push(path);
};

const handleSearch = (keyword: string) => {
  console.log('搜索:', keyword);
  // TODO: 跳转到搜索结果页
};

const handleCartClick = () => {
  console.log('打开采购车');
  // TODO: 跳转到采购车页面
};
</script>

<style lang="scss" scoped>
// 左侧菜单 - 商城风格
.layout-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 4px;
  padding: 10px 0;
  height: fit-content;
  margin-right: 10px;

  .sidebar-section {
    .section-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      color: #333;

      .arrow {
        margin-left: auto;
        transition: transform 0.2s;
      }
      &:hover {
        color: #e60012;
      }
    }

    .section-items {
      .menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px 10px 40px;
        font-size: 13px;
        color: #666;
        cursor: pointer;
        transition: all 0.2s;

        .item-arrow {
          opacity: 0;
          color: #e60012;
        }

        &:hover {
          color: #e60012;
          background: #fff5f5;
          .item-arrow {
            opacity: 1;
          }
        }

        &.active {
          color: #e60012;
          background: #fff5f5;
          font-weight: 500;
          border-left: 3px solid #e60012;
          padding-left: 37px;
          .item-arrow {
            opacity: 1;
          }
        }
      }
    }
  }
}
</style>
