<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "SystemLayoutSider",
});
</script>

<script setup lang="ts">
import Icon from "@/components/Module/Icon/index.vue";
import { ref } from "vue";

interface propsType {
  menus: Array<{
    name: string;
    path: string;
    key: string;
    icon: string;
  }>;
}

let props = withDefaults(defineProps<propsType>(), {
  // 默认值
  menus: () => [],
});

const emits = defineEmits(["click"]);

// 点击事件
const onHandle = (item: { path: string; key: string }) => {
  emits("click", item);
};

const prefix = "_system-menus";
</script>

<template>
  <div :class="prefix">
    <button :class="`${prefix}-row`" v-for="item in props.menus" @click="onHandle(item)">
      <div :class="`${prefix}-row__icon`">
        <Icon :name="item.icon" />
      </div>
      <div :class="`${prefix}-row__label`">{{ item.name }}</div>
    </button>
  </div>
</template>

<style lang="scss" scoped>
$prefix: "_system-menus";

.#{$prefix} {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
  &-row {
    width: 100%;
    height: 40px;
    padding: 5px;
    border-radius: 12px;
    background-color: transparent;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    cursor: pointer;
    &:hover {
      background-color: #333;
    }
    &__icon {
      margin-right: 8px;
      font-size: 16px;
    }
    &__label {
      font-size: 14px;
      font-weight: 500;
    }
  }
}
</style>
