<template>
  <div class="control-container flex text-center w-full">
    <div class="control-wrapper">
      <h3 class="control-title">任务类</h3>
      <div class="control-items">
        <div v-for="item in taskInputs"
             class="ks-model-item control-item"
             draggable="true"
             @dragend="handleDragEnd"
             @dragstart="handleDragStart($event, item)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="control-wrapper">
      <h3 class="control-title">机动控制类</h3>
      <div class="control-items">
        <div v-for="item in controlInputs"
             class="ks-model-item control-item"
             draggable="true"
             @dragend="handleDragEnd"
             @dragstart="handleDragStart($event, item)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="control-wrapper">
      <h3 class="control-title">飞行参数类</h3>
      <div class="control-items">
        <div v-for="item in flyInputs"
             class="ks-model-item control-item"
             draggable="true"
             @dragend="handleDragEnd"
             @dragstart="handleDragStart($event, item)">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, type PropType } from 'vue';
import { CheckOutlined } from '@ant-design/icons-vue';
import type { ModelElement, SavedGraphData } from './types';
import type { Graph, Node, NodeProperties } from '@antv/x6';
import BuilderInputs from './builder-inputs.vue';
import { controlInputs, flyInputs, taskInputs } from './control-options';
import type { ElementInput } from './inputs';

export default defineComponent({
  components: { CheckOutlined, BuilderInputs },
  props: {
    node: { type: [Object, null] as PropType<Node<NodeProperties> | null | undefined>, required: false },
    graph: { type: [Object, null] as PropType<Graph | null | undefined>, required: true },
    element: { type: [Object, null] as PropType<ModelElement | null | undefined>, required: false },
    saved: { type: Object as PropType<SavedGraphData>, required: false },
  },
  emits: ['element-drag-end', 'element-drag-start'],
  setup(_props, { emit }) {

    const handleDragEnd = (e: DragEvent) => {
      emit('element-drag-end', e);
    };

    const handleDragStart = (e: DragEvent, nm: ElementInput, parent?: ElementInput) => {
      nm.parent = parent ? {
        id: parent?.id,
        key: parent?.key,
        name: parent?.name,
        description: parent?.description,
        category: parent?.category,
        children: [],
        draggable: true,
      } : undefined;
      emit('element-drag-start', e, nm);
    };

    return {
      handleDragEnd,
      handleDragStart,
      taskInputs,
      controlInputs,
      flyInputs,
    };
  },
});
</script>