<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="{backgroundColor:props.data.options.backgroundColor,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;  text-align: center;position: relative;top: 50%;transform: translateY(-50%)"
        :number="item"
        :height="props.dimensions.height*props.ratioHeight"
        background="#fff0"
        :style="{fontSize:props.data.options.fontSize+'px',color:props.data.options.borderColor,'--number-roll-plus-width':((props.dimensions.width*props.ratioWidth) / props.data.options.numQuantity) - (props.data.options.isBorder? 2:0) +'px',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);
};
const padArray = (arr,x,value=0)=>{
  if (arr.length > x) {
    return arr.slice(-x);
  } else if (arr.length < x) {
    const padding = new Array(x - arr.length).fill(value);
    return [...padding, ...arr];
  } else {
    // 正好 x 位
    return arr;
  }
}
watch(() => [JSON.parse(JSON.stringify(props.data?.options?.numQuantity)),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 = padArray(value.toString().split(''),props.data.options.numQuantity)
  }
}, { 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>

