<script setup lang="ts">
import { CopyOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { computed, ref, watch } from 'vue';
import { useElementsInfoStore } from '../../stores/elementsInfo.ts';
import { useNodeStatusInfoStore } from '../../stores/nodeStatusInfo.ts';
import { useSelectedInfoStore } from '../../stores/selectedInfo.ts';
import iconSetting from './iconSetting.ts';

defineOptions({
  name: 'NodeWarperNew',
});

const props = defineProps<{
  node: any
  graph: any
}>();

const elementsInfoStore = useElementsInfoStore();
const selectedInfoStore = useSelectedInfoStore();
const nodeStatusInfoStore = useNodeStatusInfoStore();

const nodeId = computed(() => {
  return props.node?.id;
});

const graph = computed(() => {
  // console.log('graphModel:', props.graphModel);
  return props.graph;
});

const node = computed(() => {
  return props.node;
});

const properties = computed(() => {
  return props.node.properties;
});

const wrapperColor = computed(() => {
  if (nodeId.value && nodeStatusInfoStore.finishedNodeIds.includes(nodeId.value)) {
    return '#4eb819';
  }
  if (nodeId.value && nodeStatusInfoStore.rejectedNodeIds.includes(nodeId.value)) {
    return '#ff4d4f';
  }

  return '';
});

const isSelected = ref(selectedInfoStore.selectId === nodeId.value);

// const showOver = ref(selectedInfoStore.selectId === nodeId.value);

// const root = ref<HTMLElement | null>(null);

watch(
  () => selectedInfoStore.selectId,
  (val) => {
    // console.log('watch selectId:', val, 'nodeId:', nodeId.value);
    isSelected.value = val === nodeId.value;
    // showOver.value = isSelected.value;
  },
);

// pointer 事件处理函数，绑定在组件根元素上，避免全局竞态
// function onPointerEnter() {
//   console.log('00000');
//   showOver.value = true;
// }
// function onPointerLeave() {
//   if (!isSelected.value) {
//     showOver.value = false;
//   }
// }

// onMounted(() => {
//   nextTick(() => {
//     if (root.value) {
//       console.log('9999');
//       root.value.addEventListener('mouseenter', onPointerEnter);
//       root.value.addEventListener('mouseleave', onPointerLeave);
//     }
//   });
// });

function deleteNode() {
  // 删除节点
  elementsInfoStore.deleteElement(nodeId.value);
  graph.value.deleteNode(nodeId.value);
}

function cloneNode() {
  // 克隆节点
  const newNodeId = `node-${Date.now()}`;
  const offset = 40;
  graph.value.addNode({
    type: node.value.type,
    id: newNodeId,
    x: (node.value.x || 0) + offset,
    y: (node.value.y || 0) + offset,
    properties: { ...properties.value },
  });

  const nodeinfo = { id: newNodeId, type: node.value.type, title: properties.value?.title || '' };
  elementsInfoStore.updateElement(newNodeId, nodeinfo);
}
</script>

<template>
  <div class="node-warp" :class="{ 'node-m-selected': isSelected }" :style="{ borderColor: wrapperColor }">
    <div v-show="isSelected" class="operate-panel">
      <CopyOutlined :style="{ fontSize: '12px', color: '#aaa', cursor: 'pointer' }" @click="cloneNode" />
      <DeleteOutlined :style="{ fontSize: '12px', color: '#aaa', marginLeft: '6px', cursor: 'pointer' }" @click="deleteNode" />
    </div>
    <div class="flow-node">
      <component :is="iconSetting[properties.iconName]" v-if="properties.iconName" />
    </div>
  </div>
</template>

<style scoped>
.node-warp {
  position: relative;
  width: 100%;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: 0 0 #0000, 0 0 #0000, 0px 2px 2px 0px rgba(16, 24, 40, 0.05);
}

.flow-node {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 12px;
  overflow: hidden;
  font-size: 14px;
  background-color: #fff;
  border-radius: 12px;
}

.node-m-selected {
  border-color: #296dff70;
}
.boxShadow {
  box-shadow: 0 0 #0000, 0 0 #0000, 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
}

.operate-panel {
  position: absolute;
  top: -18px;
  right: 0px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 20px;
  padding-right: 10px;
  padding-bottom: 4px;
}

.next-panel {
  position: absolute;
  top: 7px;
  left: 200px;
  width: 24px;
  height: 24px;
  padding-left: 6px;
}
</style>
