<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="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
      <el-button type="primary"
                 :style="{width:props.dimensions.width *props.ratioWidth +'px',height:props.dimensions.height*props.ratioHeight+'px'}"
                 :icon="Refresh">数据映射
      </el-button>
    </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 { Refresh } from '@element-plus/icons-vue';
import { Handle, Position } from '@vue-flow/core';

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 convertData = () => {
  const rule = {};
  props.data.options.dataMap.forEach(item => {
    rule[item.target] = item.source;
  });
  // console.log('props.inputData', props.inputData);
  // console.log('rule', rule);
  let res = {};
  Object.keys(rule).forEach(item => {
    if (Object.keys(props.inputData).includes(rule[item])) {
      // res[rule[item]] = props.inputData[item];
      res[item] = props.inputData[rule[item]];
    } else {
      // res[item] = props.inputData[item];
    }
  });
  // console.log('res', res);
  props.data.outputData = res;
};
watch(() => JSON.parse(JSON.stringify(props.inputData)), (obj1, obj2) => {
  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
    convertData();
  }
}, { deep: true, immediate: true });
watch(() => JSON.parse(JSON.stringify(props.data.options.dataMap)), (obj1, obj2) => {
  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
    convertData();
  }
}, { deep: true, immediate: true });
const emit = defineEmits(['resize']);
const resize = (e) => {
  emit('resize', e, props.id);
};
</script>
<style scoped>
.custom-node {
  width: 100%;
  height: 100%;
}

</style>
