<template>
  <div class="leftPanel">
    <el-tabs v-model="leftPanelState" class="demo-tabs" type="border-card">
      <el-tab-pane label="图表组件" name="1">
        <el-card style="width: 80px" shadow="never" :draggable="true"
                 @dragstart="onDragStart($event, 'line')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                 :body-style="{padding:'4px 0'}">
          <template #header>
            <StarFilled />
          </template>
          图表
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="数据源" name="2">Config</el-tab-pane>
      <el-tab-pane label="表单组件" name="3">Role</el-tab-pane>
      <el-tab-pane label="Task" name="4">Task</el-tab-pane>
    </el-tabs>
  </div>
  <div class="content" @drop="onDrop">
    <VueFlow :min-zoom="0.01" ref="flowRef" v-model:nodes="nodes" v-model:edges="edges" fit-view-on-init
             default-marker-color="#409EFF"
             @node-click="logEvent('click', $event)"
             @node-contextMenu="logEvent('contextmenu', $event)"
             @dragover="onDragOver"
    >
      <Background :size="1" :gap="20" pattern-color="#BDBDBD" />
      <template #node-line="lineNodeProps">
        <LineNdoe v-bind="lineNodeProps"
                  @resize="resize"></LineNdoe>
      </template>
    </VueFlow>
  </div>
  <div class="rightPanel"></div>
</template>
<script setup lang="ts">
import { VueFlow, useVueFlow } from '@vue-flow/core';
import { Background } from '@vue-flow/background';
import { StarFilled } from '@element-plus/icons-vue';
import { onDragStart, onDrop, onDragOver } from './tool';

const leftPanelState = ref('1');
const nodes = ref([]);
const edges = ref([]);
const logEvent = async (eventname, event) => {
  switch (eventname) {
    case 'click':
      console.log('click', event);
      break;
    case 'contextmenu':
      console.log('contextmenu', event);
  }
};
</script>
<style>
.leftPanel {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  border-right: 1px solid #409EFF;
}

.content {
  position: absolute;
  top: 0;
  left: 320px;
  width: calc(100% - 320px - 320px);
  height: 100%;
}

.rightPanel {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  border-left: 1px solid #409EFF;
}
</style>
