<template>
  <div class="inbound-flow">
    <el-form :model="form" label-width="100px">
      <el-form-item label="流程编码">
        <el-input v-model="form.flowCode" placeholder="flow_code" />
      </el-form-item>
      <el-form-item label="流程名称">
        <el-input v-model="form.flowName" placeholder="流程名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleCreate">保存流程</el-button>
      </el-form-item>
    </el-form>

    <div class="flow-canvas">
      <VueFlow v-model="elements" fit-view-on-init>
        <Background pattern-color="#aaa" :gap="16" />
        <Controls />
      </VueFlow>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { VueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { createFlowDefinition } from '@/api/flow'
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'

const form = reactive({
  flowCode: '',
  flowName: '',
})

const elements = ref<any[]>([
  {
    id: '1',
    type: 'input',
    label: '接收消息',
    position: { x: 250, y: 5 },
    data: { nodeType: 'receive' },
  },
  {
    id: '2',
    label: '意图识别',
    position: { x: 250, y: 120 },
    data: { nodeType: 'intent', intent: 'rescue_request' },
  },
  {
    id: '3',
    label: 'Webhook 推送',
    position: { x: 250, y: 240 },
    data: { nodeType: 'webhook', webhookUrl: '' },
  },
  { id: 'e1-2', source: '1', target: '2' },
  { id: 'e2-3', source: '2', target: '3' },
])

async function handleCreate() {
  try {
    const nodes = elements.value
      .filter((el) => !('source' in el))
      .map((el) => {
        const { nodeType, ...config } = el.data || {}
        return {
          nodeType,
          config,
          position: el.position,
        }
      })

    const edges = elements.value
      .filter((el) => 'source' in el)
      .map((el) => ({
        source: el.source,
        target: el.target,
      }))

    const res: any = await createFlowDefinition({
      flowCode: form.flowCode,
      flowName: form.flowName,
      flowType: 'inbound',
      definitionJson: { nodes, edges },
    })

    ElMessage.success('保存成功')
    console.log(res)
  } catch (e: any) {
    ElMessage.error(e.message)
  }
}
</script>

<style scoped>
.inbound-flow {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
}

.flow-canvas {
  flex: 1;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  min-height: 400px;
}
</style>
