<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="{
        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'
      }"
    >
      <div
        :key="k"
        v-for="(i, k) in list"
        :style="{
          whiteSpace: props.data.style.whiteSpace || 'nowrap',
          textAlign: props.data.style.isColonCentered ? 'none' : props.data.style.align || 'center'
        }"
      >
        <span
          :style="{
            color: props.data.style.color1,
            lineHeight: props.dimensions.height * props.ratioHeight + 'px',
            fontSize: `${props.data.style.fontSize || 12}px`,
            display: props.data.style.isColonCentered ? 'inline-block' : 'inline',
            width: props.data.style.isColonCentered ? `calc(${props.data.style.ratio}% - ${(props.data.style.fontSize + 6) / 2}px)` : +'auto',
            textAlign: props.data.style.isColonCentered ? props.data.style.align || 'center' : 'none'
          }"
          >{{ i.label || i.key }}</span
        >
        <span
          :style="{
            color: props.data.style.color1,
            lineHeight: props.dimensions.height * props.ratioHeight + 'px',
            width: `${(props.data.style.fontSize || 12) + 4}px`,
            fontSize: `${props.data.style.fontSize || 12}px`
          }"
          style="text-align: center"
          >:</span
        >
        <span
          :style="{
            color: props.data.style.color2,
            lineHeight: props.dimensions.height * props.ratioHeight + 'px',
            fontSize: `${props.data.style.fontSize || 12}px`,
            display: props.data.style.isColonCentered ? 'inline-block' : 'inline',
            width: props.data.style.isColonCentered ? `calc(${100 - props.data.style.ratio}% - ${(props.data.style.fontSize + 6) / 2}px)` : +'auto',
            textAlign: props.data.style.isColonCentered ? props.data.style.align || 'center' : 'none'
          }"
          >{{ i.value }}</span
        >
      </div>
    </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
  },
  parentNodeId: {
    type: String,
    required: true
  },
  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
  },
  nodes: {
    type: Array,
    required: false
  },
  pNode: {
    type: Object,
    required: true
  },
  monitorType: {
    type: Array,
    required: true
  }
});
const list = ref([]);
const pNode = computed(() => props.nodes.find((n) => n.id === props.parentNodeId));
const getList = () => {
  let deviceData = props.networkData.find((e) => e.id === pNode.value.data.options.id)?.options;
  let options = pNode.value.data.options.infos;
  console.log(deviceData);
  console.log(options);
  console.log(props.monitorType);
  list.value =
    options?.map((e, i) => {
      let item = {};
      item.label = props.monitorType.find((v) => v.value === e)?.label;
      item.key = e;
      item.value = deviceData[e];
      console.log(item);
      return item;
    }) || [];
};
onMounted(() => {
  getList();
});
watch(
  () => pNode.value,
  (obj1, obj2) => {
    getList();
  },
  { deep: true }
);
</script>
<style scoped>
.custom-node {
  position: absolute;
}
</style>
