<template>
  <div
    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
                 @resize="resize" />
    <div class="custom-node"
         :style="{color:'#fff',width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
      <vue-number-roll-plus
        style="display: inline-block;margin-right: 4px;"
        :number="item"
        :background="props.data.options.backgroundColor"
        :style="{border:props.data.options.isBorder?  ` 1px solid ${props.data.options.borderColor}` :''}"
        v-for="(item, index) in list"
      ></vue-number-roll-plus>
    </div>
    <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
  </div>
</template>
<script setup>

import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core';
import VueNumberRollPlus from 'vue3-number-roll-plus';
import 'vue3-number-roll-plus/main.css';

const list = ref([]);
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
  }
});

const emit = defineEmits(['resize']);
const resize = (e) => {
  emit('resize', e, props.id);
};
watch(() => [JSON.parse(JSON.stringify(props.data?.options?.number)), JSON.parse(JSON.stringify(props.inputData?.value || ''))], (obj1, obj2) => {
  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
    let value = props.inputData?.value || props.data.options.number || '';
    list.value = value.toString().split('');
  }
}, { deep: true, immediate: true });
</script>
<style scoped>
.custom-node {
  position: absolute;
}


:deep(.real-time-num) {
  margin-left: 0;
  vertical-align: top;
  height: var(--number-roll-plus-height);
  width: var(--number-roll-plus-width);
  line-height: var(--number-roll-plus-height);
}
</style>
<style>

:root {
  --number-roll-plus-width: 30px;
  --number-roll-plus-height: 40px;
}
</style>

