<template>
  <div
    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
    <NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
                 @resize="resize" />

    <div class="custom-node"
         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
      <div class="tableTh"></div>
      <vue3ScrollSeamless
        class="scroll-wrap"
        :classOptions="classOptions"
        :dataList="list">
        <ul class="ui-wrap">
          <li class="li-item" v-for="(item,i) of list" :key="i">
            <p style="color: #fff">{{ item.title }}</p>
          </li>
        </ul>
      </vue3ScrollSeamless>
    </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 { vue3ScrollSeamless } from 'vue3-scroll-seamless';

let list = ref([{
  'title': '水调歌头·明月几时有'
}, {
  'title': '苏轼 〔宋代〕'
}, {
  'title': '明月几时有？把酒问青天。'
}, {
  'title': '不知天上宫阙，今夕是何年。'
}, {
  'title': '我欲乘风归去，又恐琼楼玉宇，高处不胜寒'
}, {
  'title': '起舞弄清影，何似在人间。'
}, {
  'title': '转朱阁，低绮户，照无眠。'
}, {
  'title': '不应有恨，何事长向别时圆？'
}, {
  'title': '人有悲欢离合，月有阴晴圆缺，此事古难全。'
}, {
  'title': '但愿人长久，千里共婵娟。'
}
]);
const classOptions = ref({
  limitMoveNum: 6
});
const props = defineProps({
  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);
};
</script>
<style scoped>
.custom-node {
  position: absolute;
}
</style>

