<template>
  <div class="designer-canvas">
    <div class="node-panel">
      <div class="panel-title">节点类型</div>
      <div
        v-for="node in nodeTypes"
        :key="node.type"
        class="node-item"
        draggable="true"
        @dragstart="handleDragStart($event, node)"
      >
        <div class="node-icon" :style="{ backgroundColor: node.color }">
          <el-icon><component :is="node.icon" /></el-icon>
        </div>
        <div class="node-name">{{ node.label }}</div>
      </div>
    </div>

    <div class="canvas-area" @drop.prevent="$emit('drop', $event)" @dragover.prevent>
      <div :ref="setContainer" class="lf-container" />
      <div class="toolbar">
        <el-button type="primary" size="small" @click="$emit('save')">保存</el-button>
        <el-button size="small" @click="$emit('clear')">清空</el-button>
        <el-button size="small" @click="$emit('back')">返回</el-button>
      </div>

      <SubNodeDrawer
        :lf="lf"
        :node="selectedNode"
        :node-props="nodeProps"
        :role-list="roleList"
        :selected-index="selectedSubNodeIndex"
        :visible="drawerVisible"
        @update:visible="$emit('update:drawerVisible', $event)"
        @select="$emit('selectSubNode', $event)"
        @add="$emit('addSubNode')"
        @remove="$emit('removeSubNode', $event)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ComponentPublicInstance } from 'vue'
import { VideoPlay, User, Message, Operation, CircleCheck } from '@element-plus/icons-vue'
import type { Role } from '@/types/system'
import SubNodeDrawer from './SubNodeDrawer.vue'

const props = defineProps<{
  setContainer: (el: Element | ComponentPublicInstance | null) => void
  lf: any
  selectedNode: any
  nodeProps: Record<string, any>
  roleList: Role[]
  selectedSubNodeIndex: number | null
  drawerVisible: boolean
}>()

const emit = defineEmits<{
  drop: [e: DragEvent]
  save: []
  clear: []
  back: []
  'update:drawerVisible': [visible: boolean]
  selectSubNode: [index: number]
  addSubNode: []
  removeSubNode: [index: number]
}>()

const nodeTypes = [
  { type: 'start-node', label: '开始', icon: VideoPlay, color: '#67C23A' },
  { type: 'approval-node', label: '审批节点', icon: User, color: '#409EFF' },
  { type: 'cc-node', label: '抄送节点', icon: Message, color: '#E6A23C' },
  { type: 'condition-node', label: '条件节点', icon: Operation, color: '#909399' },
  { type: 'end-node', label: '结束', icon: CircleCheck, color: '#F56C6C' }
]

function handleDragStart(e: DragEvent, node: any) {
  const serializable = { type: node.type, label: node.label }
  e.dataTransfer?.setData('application/json', JSON.stringify(serializable))
}
</script>

<style scoped>
.designer-canvas {
  flex: 1;
  display: flex;
  min-width: 0;
  height: 100%;
}
.node-panel {
  width: 200px;
  border-right: 1px solid #dcdfe6;
  padding: 16px;
  background: #fafafa;
}
.panel-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #303133;
}
.node-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  cursor: move;
  background: #fff;
  border: 1px solid #ebeef5;
  transition: all 0.2s;
}
.node-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-color: #c6e2ff;
}
.node-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-right: 12px;
}
.node-name {
  font-size: 14px;
  color: #606266;
}
.canvas-area {
  flex: 1;
  position: relative;
  background: #f5f7fa;
  overflow: hidden;
}
.lf-container {
  width: 100%;
  height: 100%;
}
.toolbar {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}
</style>
