<template>
  <div class="designer-property-header">
    <el-icon><Setting /></el-icon>
    <span>{{ title }}</span>
  </div>

  <process-property v-if="current.type === 'PROCESS'" :mode="mode" :info="state.processDescriptor" @on-save="onSaveProcess"></process-property>
  <node-property v-if="current.type === 'NODE'" :graph="graph" :mode="mode" :info="state.nodeDescriptor" @on-save="onSaveNode"></node-property>
  <flow-property v-if="current.type === 'FLOW'" :mode="mode" :info="state.flowDescriptor" @on-save="onSaveFlow"></flow-property>
</template>

<script setup lang="ts">
import { computed, reactive, watchEffect } from 'vue'
import type { Graph } from '@antv/x6'
import { cloneDeep } from 'lodash-es'

import type { OperMode, ProcessDescriptor, NodeDescriptor, FlowDescriptor } from '@cacp/ui'

import ProcessProperty from './ProcessDesignProcessProperty.vue'
import NodeProperty from './ProcessDesignNodeProperty.vue'
import FlowProperty from './ProcessDesignFlowProperty.vue'

const props = defineProps<{
  graph?: Graph
  mode: OperMode
  current: {
    type: 'PROCESS' | 'NODE' | 'FLOW'
    data: ProcessDescriptor | NodeDescriptor | FlowDescriptor
  }
}>()
const emits = defineEmits<{
  (e: 'on-save-process', process: ProcessDescriptor): void
  (e: 'on-save-node', node: NodeDescriptor): void
  (e: 'on-save-flow', flow: FlowDescriptor): void
}>()

const state = reactive<{
  processDescriptor?: ProcessDescriptor,
  nodeDescriptor?: NodeDescriptor,
  flowDescriptor?: FlowDescriptor,
}>({
})

watchEffect(() => {
  if (props.current.type === 'NODE') {
    state.nodeDescriptor = cloneDeep(props.current.data as NodeDescriptor)
  } else if (props.current.type === 'FLOW') {
    state.flowDescriptor = cloneDeep(props.current.data as FlowDescriptor)
  } else {
    state.processDescriptor = cloneDeep(props.current.data as ProcessDescriptor)
  }
}) 

const title = computed(() => {
  if (props.current.type === 'NODE') {
    return '节点属性 - ' + props.current.data.name
  } else if (props.current.type === 'FLOW') {
    return '连线属性 - ' + props.current.data.name
  } else {
    return '流程属性'
  }
})

function onSaveProcess(data: ProcessDescriptor) {
  emits('on-save-process', data)
}
function onSaveNode(data: NodeDescriptor) {
  emits('on-save-node', data)
}
function onSaveFlow(data: FlowDescriptor) {
  emits('on-save-flow', data)
}
</script>
