<template>
  <div class="layout-container">
    <!-- 顶部导航栏 -->
    <HeaderBar @search="handleSearch" @cart-click="handleCartClick" />

    <!-- 主体内容 -->
    <div class="layout-main">
      <div class="main-wrapper">
        <!-- 左侧菜单 -->
        <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>

        <!-- 右侧内容区 -->
        <main class="layout-content">
          <router-view />
        </main>
      </div>
    </div>

    <!-- 底部Footer -->
    <footer class="layout-footer">
      <div class="footer-content">
        <div class="footer-top">
          <div class="footer-logo">
            <img src="@/assets/logo.png" alt="logo" class="logo-img" />
            <span>优易</span>
          </div>
          <div class="footer-links">
            <div class="link-group">
              <div class="group-title">客户服务</div>
              <div class="group-item">在线客服</div>
              <div class="group-item">问题反馈</div>
            </div>
            <div class="link-group">
              <div class="group-title">客户</div>
              <div class="group-item">客户管理</div>
              <div class="group-item">供应商合作</div>
            </div>
            <div class="link-group">
              <div class="group-title">联系</div>
              <div class="group-item">帮助中心</div>
              <div class="group-item">关于我们</div>
            </div>
          </div>
          <div class="footer-qrcode">
            <div class="qrcode-item">
              <div class="qrcode-placeholder"></div>
              <span>关注公众号</span>
            </div>
            <div class="qrcode-item">
              <div class="qrcode-placeholder"></div>
              <span>关注微博</span>
            </div>
          </div>
        </div>
        <div class="footer-middle">
          <span>联系我们：400-111-0027</span>
          <span class="time">周一至周五 9:30-17:30</span>
        </div>
        <div class="footer-services">
          <div class="service-item"><el-icon><RefreshRight /></el-icon> 无忧退换货</div>
          <div class="service-item"><el-icon><Van /></el-icon> 满百包邮</div>
          <div class="service-item"><el-icon><Medal /></el-icon> 品质保证</div>
        </div>
        <div class="footer-bottom">
          <span>ICP备案号：鄂ICP备XXXXXXXX号 · 增值电信业务经营许可证编号：鄂02-20170182</span>
        </div>
      </div>
    </footer>
  </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 { HeaderBar } from '@/components'

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

const menuList = [
  {
    path: '/enterprise',
    title: '企业账户',
    icon: 'User',
    children: [
      { path: '/enterprise/companyInfo', title: '企业信息' },
      { path: '/enterprise/messageNotice', title: '消息通知' },
      { path: '/enterprise/addressManage', 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: '/trade',
    title: '交易管理',
    icon: 'ShoppingCart',
    children: [
      { path: '/trade/orderManage', title: '订单管理' },
      { path: '/trade/orderAudit', title: '审核订单' },
      { path: '/trade/afterSale', title: '售后服务' },
      { path: '/trade/batchOrder', title: '批量下单' },
      { path: '/trade/orderEvaluation', title: '订单评价' }
    ]
  },
  {
    path: '/organization',
    title: '组织管理',
    icon: 'OfficeBuilding',
    children: [
      { path: '/organization/personalInfo', 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) => {
  router.push(path)
}

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

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

<style scoped lang="scss">
.layout-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

// 主体内容
.layout-main {
  flex: 1;
  padding: 20px 0;
  
  .main-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 16px;
  }
}

// 左侧菜单 - 商城风格
.layout-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 4px;
  padding: 10px 0;
  height: fit-content;
  
  .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; }
        }
      }
    }
  }
}

// 右侧内容区
.layout-content {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: 4px;
  padding: 16px;
}

// 底部Footer
.layout-footer {
  background: #2c3e50;
  color: #fff;
  margin-top: 40px;
  
  .footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px 20px;
  }
  
  .footer-top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    
    .footer-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      .logo-img { height: 40px; filter: brightness(0) invert(1); }
      span { font-size: 24px; font-weight: bold; }
    }
    
    .footer-links {
      display: flex;
      gap: 80px;
      
      .link-group {
        .group-title { font-size: 14px; margin-bottom: 16px; }
        .group-item { font-size: 12px; color: rgba(255,255,255,0.7); margin-bottom: 10px; cursor: pointer; &:hover { color: #fff; } }
      }
    }
    
    .footer-qrcode {
      display: flex;
      gap: 20px;
      
      .qrcode-item {
        text-align: center;
        .qrcode-placeholder { width: 80px; height: 80px; background: #fff; margin-bottom: 8px; }
        span { font-size: 12px; color: rgba(255,255,255,0.7); }
      }
    }
  }
  
  .footer-middle {
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
    .time { margin-left: 16px; color: rgba(255,255,255,0.7); }
  }
  
  .footer-services {
    display: flex;
    justify-content: center;
    gap: 60px;
    padding: 20px 0;
    
    .service-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }
  }
  
  .footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 12px;
    color: rgba(255,255,255,0.5);
  }
}
</style>
