<template>
  <div class="split-container">
    <div class="split-sidebar">
      <el-menu :default-active="activeMenu" class="sidebar-menu" @select="handleMenuSelect">
        <!-- 纵剪分条集成页按需求只保留五个核心业务板块 -->
        <el-menu-item index="inventory">
          <i class="el-icon-box"></i>
          <span slot="title">库存</span>
        </el-menu-item>
        <el-menu-item index="processing">
          <i class="el-icon-s-operation"></i>
          <span slot="title">WIP</span>
        </el-menu-item>
        <el-menu-item index="report">
          <i class="el-icon-document"></i>
          <span slot="title">报表</span>
        </el-menu-item>
        <el-menu-item index="shipping">
          <i class="el-icon-truck"></i>
          <span slot="title">发货</span>
        </el-menu-item>
        <el-menu-item index="quality">
          <i class="el-icon-warning-outline"></i>
          <span slot="title">品质</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="split-content">
      <component :is="currentComponent" />
    </div>
  </div>
</template>

<script>
import Inventory from './components/Inventory.vue'
import Processing from './components/Processing.vue'
import Report from './components/Report.vue'
import Shipping from './components/Shipping.vue'
import Quality from './components/Quality.vue'

export default {
  name: 'SplitSystem',
  components: {
    Inventory,
    Processing,
    Report,
    Shipping,
    Quality,
  },
  data() {
    return {
      // 默认先展示库存板块，与其他集成入口保持一致。
      activeMenu: 'inventory',
    }
  },
  computed: {
    currentComponent() {
      const componentMap = {
        inventory: 'Inventory',
        processing: 'Processing',
        report: 'Report',
        shipping: 'Shipping',
        quality: 'Quality',
      }
      return componentMap[this.activeMenu]
    },
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenu = index
    },
  },
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 0 !important;
}

.split-container {
  display: flex;
  width: 100%;
  height: calc(100vh - 84px);
  background-color: #f5f7fa;
}

.split-sidebar {
  width: 100px;
  background-color: #fff;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);

  .sidebar-menu {
    border: none;
    background-color: transparent;
    flex: 1;
    overflow-y: auto;
    border-right: none;

    ::v-deep .el-menu-item {
      color: #606266;
      padding: 0 20px;
      font-size: 14px;

      &:hover {
        background-color: #ecf5ff;
        color: #409eff;
      }

      &.is-active {
        background-color: #ecf5ff;
        color: #409eff;
        border-right: 3px solid #409eff;
      }

      i {
        font-size: 18px;
        margin-right: 8px;
      }
    }
  }
}

.split-content {
  flex: 1;
  overflow: hidden;
}
</style>
