<template>
  <div
    class="bg-gray-50 w-1/6 min-w-[120px] max-w-[200px] h-full overflow-y-auto p-2"
  >
    <div
      v-for="(item, index) in props.menus"
      :key="index"
      class="cursor-pointer my-1 py-4 px-2 relative flex items-center justify-between hover:bg-gray-100 rounded-lg"
      :class="{
        'text-gray-600': value != index,
        'text-blue-500 bg-gray-200 hover:bg-gray-200': value == index,
      }"
      @click="menuClick(item, index)"
    >
      <div class="">
        <div class="flex items-center">
          <CaretRight class="transition-all" :class="value == index ? 'w-4' : 'w-0'" />
          <span>{{ item.label }}</span>
        </div>
        <slot name="itemDesc" :item="item"></slot>
      </div>
      <div v-if="value == index" class="rounded bg-blue-500 h-5 w-1"></div>

    </div>
  </div>
</template>

<script setup>
import {
  computed,
  watch,
  markRaw,
  ref,
  inject,
  onMounted,
  provide,
  defineAsyncComponent,
  nextTick
} from "vue";

import {
  CaretRight
} from "@element-plus/icons-vue";

const props = defineProps({
  menus: {
    type: Array,
    default: () => []
  },
  active: {
    type: Number,
    default: 0
  }
});
const emit = defineEmits(["update:active", "change"]);
const value = computed({
  get() {
    return props.active;
  },
  set(v) {
    emit("update:active", v);
  }
});
const menuClick = (item, index) => {
  value.value = index
  emit('change', value.value, item, index)
}
</script>

<style lang="scss" scoped></style>
