<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="width: 100%; height: 100%;">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[100, 200, 300, 400]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
    <Handle v-if="!props.isView" :id="`${props.id}.-s`" type="source" :position="Position.Right" />
  </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 currentPage = ref(4);

const pageSize = ref(100);
const total = ref(300);
const size = ref('default');
const background = ref(false);
const disabled = ref(false);

const getOutput = () => {
  let output = {
    pageSize: pageSize.value,
    currentPage: currentPage.value
  };
  props.data.outputData = output;
};

const handleSizeChange = (val) => {
  getOutput();
};
const handleCurrentChange = (val) => {
  getOutput();
};
onMounted(() => {
  getOutput();
});
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);
};
watch(() => JSON.parse(JSON.stringify(props.inputData || '{}')), (obj1, obj2) => {
  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
    total.value = props.inputData?.total || 0;
  }
}, { deep: true, immediate: true });
</script>
<style scoped>
.custom-node {
  position: absolute;
}
</style>

