<template>
  <div class="_root">
    <div v-if="isLoading" class="loading">加载中...</div>
    <div v-else>
      <ProcessTreeNode
        :node="dom"
        :node-map="nodeMap"
        @selectedNode="handleSelectNode"
        ref="rootNode"
      />
    </div>
  </div>
</template>
<!-- 旧版代码，目前无用。2025-09-11 -->
<script>
import ProcessTreeNode from './ProcessTreeNode.vue';

export default {
  name: 'ProcessTree',
  components: { ProcessTreeNode },
  data() {
    return {
      isLoading: true,
      nodeMap: new Map(),
      valid: true
    };
  },
  computed: {
    dom() {
      return this.$store.state.workflow.design.process || {};
    }
  },
  mounted() {
    if (!(this.nodeMap instanceof Map)) {
      this.nodeMap = new Map();
    }

    if (!this.dom.id) {
      this.$store.dispatch('workflow/loadForm', {
        process: {
          id: 'node_start',
          type: 0,
          nodeName: '发起人',
          nodeKey: `flk_${Date.now()}`,
          childNode: {
            id: 'node_end',
            type: -1,
            nodeName: '结束'
          }
        }
      });
    }

    this.$nextTick(() => {
      this.isLoading = false;
    });
  },
  methods: {
    handleSelectNode(node) {
      console.log("********",node)
      this.$store.commit('workflow/SET_SELECTED_NODE', node);
      this.$emit('selectedNode', node);
    },
    validateProcess() {
      const err = [];
      this.valid = true;
      this.$refs.rootNode.validate(err);
      return err;
    }
  },
  beforeDestroy() {
    this.nodeMap.clear();
  }
};
</script>

<style scoped>
._root {
  margin: 0 auto;
  min-height: 100px;
}
.loading {
  text-align: center;
  padding: 20px;
  color: #888;
}
</style>
