<template>
  <div class="panel-controls-wrap">
    <!-- 循环渲染导航项 -->
    <div class="panel-btn-box">
      <el-button size="small" class="panel-btn" v-for="(v, k) in nodeTypes" :key="k">
        <el-dropdown trigger="click" placement="right-start">
          <img class="panel-icon" :src="v.icon" alt="" />
          <template #dropdown>
            <div class="panel-controls-menu-box ds-popper-dropdown">
              <p class="title">{{ v.label }}</p>
              <el-dropdown-menu class="panel-controls-menu">
                <el-dropdown-item v-for="item in v?.children" :key="item?.type" class="node-item">
                  <div
                    class="flex items-center node-content"
                    draggable="true"
                    @dragstart="handleDragStart($event, item)"
                  >
                    <img class="mr-[8px] node-icon" :src="item?.icon" alt="" />
                    <div class="node-info">
                      <span class="node-label">{{ item?.label }}</span>
                    </div>
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </div>
          </template>
        </el-dropdown>
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import draggable from 'vuedraggable'
import { panelControlsConf } from '@/config/designControl'

defineOptions({
  name: 'PanelControlBar'
})

const props = defineProps({
  lf: {
    type: Object
  }
})
const nodeTypes = panelControlsConf
const handleDragStart = (event: DragEvent, node: Record<string, any>) => {
  if (event.dataTransfer) {
    // event.dataTransfer.setData('application/node-type', node);
    event.dataTransfer.setData('node-type', JSON.stringify(node))
  }
  console.log('handleDragStart', event, node)
  // 传递节点类型和位置信息
}
</script>

<style lang="scss">
@import url('./panelCtrl.scss');
</style>
