<!--
 * @Date: 2025-03-11 17:25:14
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-11 18:30:47
 * @FilePath: /logic-flow2/src/views/node-vue/ProgressNode.vue
 * @Description: 文件描述
-->
<template>
  <el-progress type="dashboard" :percentage="percentage" :width="80">
    <template #default="{ percentage }">
      <span class="percentage-value">{{ percentage }}%</span>
    </template>
  </el-progress>
</template>

<script setup>
import { ref, inject, onMounted } from "vue";
import { EventType } from "@logicflow/core";
import { vueNodesMap } from "@logicflow/vue-node-registry";

const percentage = ref(80);
const getNode = inject("getNode");
const getGraph = inject("getGraph");

onMounted(() => {
  const node = getNode();
  const graph = getGraph();

  graph.eventCenter.on(EventType.NODE_PROPERTIES_CHANGE, (eventData) => { // 监听节点属性变化事件（NODE_PROPERTIES_CHANGE）
    const keys = eventData.keys; // 获取发生变化的属性名列表
    const content = vueNodesMap[node.type]; // 从 vueNodesMap 中获取当前节点类型对应的配置信息

    if (content && eventData.id === node.id) { // 确保只处理当前节点的属性变化事件,通过比对事件中的节点 ID 和当前节点的 ID
      const { effect } = content; // 从节点配置中获取 effect 配置,effect 定义了哪些属性变化时需要触发更新

      // 如果没有定义 effect，则默认更新；如果定义了 effect，则只有在 effect 中的属性发生变化时才更新
      if (!effect || keys.some((key) => effect.includes(key))) {
        console.log("eventData --->>>", eventData);
        percentage.value = eventData.properties?.progress || 0;
      }
    }
  });
});
</script>