<template>
  <div
    class="w-[136px] h-full box-border border-r-[1px] border-r-[#E5E8EE] py-[12px] px-[8px] flex flex-col gap-[4px] select-none">
    <div class="text-[12px] text-[#99A0AE] p-[4px]">系统设置</div>

    <div
      :class="['box-border flex items-center py-[10px] px-[12px] rounded-[6px] cursor-pointer', item.id === currentId ? 'bg-[#EFF6FF]' : '']"
      v-for="item in systemMenus" :key="item.id" @click="handleClick(item)">
      <component :is="item.icon" :color="item.id === currentId ? item.activeColor : item.color"
        class="w-[20px] h-[20px]" />
      <span class="box-border px-[8px] text-[14px] font-medium text-[#525866]">{{ item.name }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { systemMenus } from '@/constant/system-config'

const currentId = ref(1)

const handleClick = async (item: any) => {
  currentId.value = item.id
}
</script>