<template>
  <ElRow v-if="props.list.length" class="vtj-components__box" :gutter="10">
    <ElCol v-for="item in props.list" :span="props.span">
      <div
        class="vtj-components__item"
        draggable="true"
        @dragstart="onDragStart(item, $event)"
        @dragend="onDragEnd"
        :title="item.name">
        <img v-if="item.icon" :src="item.icon" alt="" />
        <span v-else class="vtj-components__name">{{ item.name }}</span>
        <span>{{ item.title }}</span>
        <div
          v-if="props.editable || props.removable"
          class="vtj-components__footer">
          <i
            v-if="props.editable"
            @click.stop="onEdit(item)"
            class="vtj-icon-edit"></i>
          <i
            v-if="props.removable"
            @click.stop="onRemove(item)"
            class="vtj-icon-remove"></i>
        </div>
      </div>
    </ElCol>
  </ElRow>
  <ElEmpty v-else description="暂无数据" :image-size="60"></ElEmpty>
</template>
<script lang="ts" setup>
import { ElRow, ElCol, ElEmpty } from 'element-plus';
import {
  ComponentDescription,
  TemplateDescription,
  emitter,
  EVENT_COMPONENETS_DRAG_END,
  EVENT_COMPONENETS_DRAG_START
} from '@vtj/engine';

interface Props {
  list?: ComponentDescription[];
  span?: number;
  editable?: boolean;
  removable?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  span: 6,
  list: () => []
});

const emit = defineEmits(['edit', 'remove']);

function onDragStart(
  item: ComponentDescription | TemplateDescription,
  e: DragEvent
) {
  // e.dataTransfer?.setData('component', JSON.stringify(item));
  emitter.emit(
    EVENT_COMPONENETS_DRAG_START,
    (item as TemplateDescription).schema || item
  );
}

function onDragEnd() {
  // console.log(onDragEnd);
  emitter.emit(EVENT_COMPONENETS_DRAG_END);
}

function onEdit(item: ComponentDescription) {
  emit('edit', item);
}

function onRemove(item: ComponentDescription) {
  emit('remove', item);
}
</script>
