<!-- 物料面板 -->
<script setup lang="ts">
import MaterialItem from '@/editor/panels/material/components/MaterialItem.vue'
import { getMaterialGroups, getMaterialsByGroup } from '@/materials'

defineOptions({
  name: 'MaterialPanel',
})

const activeGroup = ref('charts')

const groups = getMaterialGroups()

const currentMaterials = computed(() => {
  return getMaterialsByGroup(activeGroup.value)
})
</script>

<template>
  <div class="flex">
    <div class="w-12 border-r border-white/20">
      <div
        v-for="value in groups"
        :key="value.key"
        class="cursor-pointer flex flex-col items-center justify-center text-sm text-(--el-text-color-regular) h-12"
        :class="{ 'bg-white/10 text-white': activeGroup === value.key }"
        @click="activeGroup = value.key"
      >
        <span><Icon :icon="value.icon" width="16" /></span>
        <span>{{ value.name }}</span>
      </div>
    </div>
    <div class="flex-1 p-2.5 overflow-auto">
      <MaterialItem
        class="mt-2.5"
        v-for="item in currentMaterials"
        :key="item.name"
        :material="item"
      />
    </div>
  </div>
</template>

<style scoped></style>
