<script setup lang="ts">
import {ref, onMounted, watch, reactive, markRaw} from 'vue';

import type {Node, Edge} from '@vue-flow/core';
import {HJMethodName, HJNodeData, HJPanelFunNameArray} from './types/comTypes';
import WorkFlowDrag from '../src/leftDrags/workflow/dragData.vue'
import HJFlow from './hjflow/index.vue'

import type { ComponentSize, FormInstance, FormRules } from 'element-plus'


interface HJShenPiliuData {
  name: string //节点名称
  desc: string //节点描述
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const formData = ref<HJShenPiliuData>({
  name: '',
  desc: '',
})

const rules = reactive<FormRules<HJShenPiliuData>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
   ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  // if (!formEl) return
  // await formEl.validate((valid, fields) => {
  //   if (valid) {
  //     console.log('submit!')
  //   } else {
  //     console.log('error submit!', fields)
  //   }
  // })

  if (flowRef.value && flowRef.value.updateNodeData && selectedNode.value) {
    selectedNode.value.data.information = JSON.parse(JSON.stringify(formData.value))
    flowRef.value.updateNodeData(JSON.parse(JSON.stringify(markRaw(selectedNode.value))))
    ruleFormRef.value && ruleFormRef.value.resetFields()
    selectedNode.value = null

  }
}

const cancel = () => {
  ruleFormRef.value && ruleFormRef.value.resetFields()
}

const flowRef = ref()
const nodes = ref<HJNodeData[]>([]);
const edges = ref<Edge[]>([]);


onMounted(() => {
  // 接口调用完成要初始化 ，为的是保存一个最初的数据
  flowRef.value && flowRef.value.initFlow([], [])
});




// ======= 信息展示 =======
const infoVisible = ref(false)
const selectedNode = ref<HJNodeData | null>(null) //双击的节点数据
const closeInfo = () => {
  infoVisible.value = false
  selectedNode.value = null
}

// vue 的相关操作
const onNodeOperation = (name: HJMethodName, node: HJNodeData) : void => {
  selectedNode.value = null
  ruleFormRef.value && ruleFormRef.value.resetFields()
  selectedNode.value = JSON.parse(JSON.stringify(node))
  console.log("selectedNode",selectedNode.value)
  if (selectedNode.value && selectedNode.value.data.information) {
    formData.value = JSON.parse(JSON.stringify(selectedNode.value.data.information))
  }

}

const testGetCurrentData = () => {
  let p = {
    nodes: markRaw(nodes.value),
    edges:  markRaw(edges.value),
  }
  console.log("=========当前数据======", JSON.stringify(p) ,p )
}

</script>

<template>
  <div class="out-box">
    <WorkFlowDrag></WorkFlowDrag>
    <HJFlow class="vue-flow-box" ref="flowRef" v-model:nodes-data="nodes" v-model:edges-data="edges" @hjMethod="onNodeOperation" :show-panel="true" :panel-btns="HJPanelFunNameArray"></HJFlow>
    <div class="right-message">
      <div class="flow-header-name" @click="testGetCurrentData">当前工作流名称</div>
      <el-form

          ref="ruleFormRef"
          style="max-width: 600px"
          :model="formData"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
      >
        <el-form-item label="Activity name" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="Activity form" prop="desc">
          <el-input v-model="formData.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            保存
          </el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<style scoped lang="less">

.out-box {
  width: 100%;
  height: 80vh;
  border: 1px solid #ccc;
  display: flex;
}

.vue-flow-box {
  flex: 1;
  flex-shrink: 0;
  height: 100%;
  border: 3px solid red;
  //width: 300px;
  //height: 500px;
}

.right-message {
  width: 400px;
  height: 100%;
  border: 1px solid #ccc;
  background-color: white;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;

  .flow-header-name {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
  }

}

</style>


