<template>
  <div class="gl-page-content">
    <DragSplit :leftContentWidth="400">
      <template #left>
        <div class="left-box">
          <ul class="menu-list">
            <li
              v-for="(item, index) in configList"
              :key="index"
              class="menu-item"
              :class="{ active: currentActive === item.value }"
              @click="handleMenuClick(item.value)"
            >
              <!-- <i :class="`menu-icon ${item.icon}`"></i> -->
              {{ item.label }}
            </li>
          </ul>
        </div>
      </template>
      <template #right>
        <div class="right-box">
          <DepartMent v-if="currentActive === 'department'"></DepartMent>
        </div>
      </template>
    </DragSplit>
  </div>
</template>

<script setup lang="ts">
import DragSplit from '@/components/common/dragSplit/index.vue';
import DepartMent from './components/departMent.vue';
import { ref } from 'vue';

const configList = [
  {
    label: '部门配置',
    value: 'department',
  },
  {
    label: '其他配置',
    value: 'other',
  },
];

// 当前选中的索引（默认选中第一个）
const currentActive = ref('department');

// 点击菜单切换选中状态
const handleMenuClick = (departValue: string) => {
  currentActive.value = departValue;
};
</script>
<style scoped lang="scss">
.gl-page-content {
  height: 100%;
  padding: 0;
  .left-box {
    padding: var(--padding-normal);
    height: 100%;
  }
  .right-box {
    padding: var(--padding-normal);
    height: 100%;
  }
  /* 菜单列表样式 */
  .menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  /* 菜单项基础样式 */
  .menu-item {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  /* 菜单项 hover 样式 */
  .menu-item:hover {
    background-color: var(--el-disabled-bg-color);
  }
  /* 选中条目高亮样式 */
  .menu-item.active {
    background-color: var(--el-color-primary-light-7);
    color: var(--el-color-primary);
    font-weight: 500;
  }
  /* 菜单图标样式 */
  .menu-icon {
    margin-right: 10px;
    font-size: 16px;
    color: #60a5fa;
  }
  // .content {
  //   position: relative;
  //   height: 100%;
  //   display: flex;
  // }
}
</style>
