<template>
  <div :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#000" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />

    <div
      class="custom-node"
      :style="{
        textAlign: props.data.style.align || 'center',
        width: props.dimensions.width * props.ratioWidth + 'px',
        lineHeight: props.dimensions.height * props.ratioHeight + 'px',
        height: props.dimensions.height * props.ratioHeight + 'px',
        pointerEvents: props.isView ? 'auto' : 'none'
      }"
    >
      <span
        :style="{
          whiteSpace: props.data.style.whiteSpace || 'nowrap',
          color: props.data.style.color,
          fontSize: props.dimensions.height * props.ratioHeight + 'px'
        }"
      >
        {{ format(props.data.options.value) || (!props.isView ? '文字' : '123') }}</span
      >
    </div>
  </div>
</template>
<script setup>
import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core';

const props = defineProps({
  ratioWidth: {
    type: Number,
    required: false,
    default: 1
  },
  ratioHeight: {
    type: Number,
    required: false,
    default: 1
  },
  isView: {
    type: Boolean,
    required: false
  },
  inputData: {
    type: Object,
    required: false
  },
  id: {
    type: String,
    required: true
  },
  isHideHandle: {
    type: Boolean,
    required: false
  },
  selected: {
    type: Boolean,
    required: false
  },
  data: {
    type: Object,
    required: true
  },
  dimensions: {
    type: Object,
    required: true
  },
  networkData: {
    type: Array,
    required: false
  }
});

const format = (e) => {
  if (!e) return '';
  return e.replace(/\$\{(.*?)\}/g, (match, key) => {
    const keys = key.split(',');
    console.log(props.networkData);
    let result = props.networkData.find((v) => v.id === props.data.options.id)?.options || {};

    for (let k of keys) {
      result = result?.[k];

      if (result === undefined) return '';
    }

    return result;
  });
};

watch(
  () => [JSON.parse(JSON.stringify(''))],
  async (obj1, obj2) => {
    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
    }
  },
  { deep: true, immediate: true }
);
</script>
<style scoped>
.custom-node {
  position: absolute;
}
</style>
