<script setup>
import { Position, Handle, useVueFlow, useNode, MarkerType } from '@vue-flow/core'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import NodeCustomForm from './NodeCustomForm.vue'
import Flow from './Flow.vue'
// const Flow = defineAsyncComponent(() => import('./Flow.vue'))

const props = defineProps(['label', 'data', 'process', 'selected', 'id', 'disabled'])
const emit = defineEmits(['nodeRemove'])

const dialogVisible = ref(false)

const flowDialogVisible = ref(false)

const nodes = ref([])

const edges = ref([])

watch(
  () => props.data,
  () => {
    nodes.value = props.data.nodes || [
      {
        id: 'start',
        type: 'start',
        label: '子流程入口',
        data: { label: '子流程入口' },
        position: { x: 0, y: 0 }
      },
      {
        id: '1',
        type: 'custom',
        label: '二级旅程节点',
        data: { label: '二级旅程节点' },
        position: { x: 360, y: 0 }
      },
      {
        id: 'end',
        type: 'end',
        label: '子流程出口',
        data: { label: '子流程出口' },
        position: { x: 720, y: 0 }
      }
    ]
    edges.value = props.data.edges || [
      {
        id: 'start->1',
        type: 'custom',
        source: 'start',
        target: '1',
        animated: true,
        markerEnd: 'arrowclosed'
      },
      {
        id: '1->end',
        type: 'custom',
        source: '1',
        target: 'end',
        animated: true,
        markerEnd: 'arrowclosed'
      }
    ]
  },
  { immediate: true }
)

const { removeNodes, removeEdges, addEdges, edges: parentEdges } = useVueFlow()

const isCompleted = computed(() => {
  return !!props.data.label
})

const handleSubmit = async () => {
  Object.assign(props.data, { nodes: nodes.value, edges: edges.value })
  flowDialogVisible.value = false
}

const { node } = useNode()
function removeNodeBetweenEdges() {
  // 获取边
  const leftEdge = parentEdges.value.find(edge => edge.target === node.id)
  const rightEdge = parentEdges.value.find(edge => edge.source === node.id)
  // 删除节点
  removeNodes([node.id])
  // 删除边
  removeEdges([leftEdge.id, rightEdge.id])
  // 添加边
  addEdges([
    {
      id: `${leftEdge.source}->${rightEdge.target}`,
      type: 'custom',
      source: leftEdge.source,
      target: rightEdge.target,
      animated: true,
      markerEnd: MarkerType.ArrowClosed
    }
  ])
  emit('nodeRemove')
}
</script>

<template>
  <div class="flow-node flow-node-custom" :class="{ 'is-completed': isCompleted }">
    <el-icon class="flow-node-custom__remove" @click="removeNodeBetweenEdges" v-if="selected && !disabled"
      ><CircleCloseFilled
    /></el-icon>
    <Handle type="target" :position="Position.Left" />
    <div class="flow-node-custom__inner">
      <el-button type="primary" size="small" @click="dialogVisible = true" v-if="!disabled">编辑</el-button>
      <el-button type="primary" size="small" @click="flowDialogVisible = true" v-if="process != 2">子流程</el-button>
      <div class="flow-node__label">{{ data.label || label }}</div>
    </div>
    <Handle type="source" :position="Position.Right" />
    <NodeCustomForm
      :id="id"
      :data="data"
      :process="process"
      v-model="dialogVisible"
      v-if="dialogVisible"></NodeCustomForm>
    <el-dialog title="自动化营销旅程设计-二级流程" append-to-body width="1000" v-model="flowDialogVisible">
      <Flow v-model:nodes="nodes" v-model:edges="edges" :process="2" :disabled="disabled" style="height: 500px"></Flow>
      <template #footer>
        <el-row justify="center">
          <el-button plain auto-insert-space @click="flowDialogVisible = false">关闭</el-button>
          <el-button type="primary" auto-insert-space @click="handleSubmit" :disabled="disabled">保存</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
@import './style.css';
.flow-node-custom {
  &.is-completed {
    color: #fff;
    background-color: rgba(104, 187, 196, 0.52);
  }
}
.flow-node-custom__remove {
  position: absolute;
  right: 0;
  top: 0;
}
</style>
