<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 style="background-color: #094170">
        <div class="scrollTable" style="font-weight: bold;" :style="`width: ${i.width || '100px'} `"
             v-for="i in props.data.options.tableOptions">
          {{ i.name }}
        </div>
      </div>
      {{ props.inputData.tableData }}
      <vue3ScrollSeamless
        :classOptions="classOptions"
        :dataList="list"
      >
        <div class="scrollTable" style="font-weight: bold;" :style="`width: ${i.width || '100px'} `"
             v-for="(i,k) in props.data.options.tableOptions">
          {{ ((props.inputData.tableData || [])[k] || {})[i.field] }}
        </div>
      </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 a = {
  table: [
    {
      a: 1,
      b: 2
    },
    {
      a: 1,
      b: 2
    },
    {
      a: 1,
      b: 2
    }
  ]
};
console.log(JSON.stringify(a));

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
  }
});
console.log(props.inputData);

const emit = defineEmits(['resize']);
const resize = (e) => {
  emit('resize', e, props.id);
};
</script>
<style scoped>
.custom-node {
  position: absolute;
}

.scrollTable {
  display: inline-block;
  color: #fff
}
</style>

