<template>
  <div style="position: relative;"
       :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
    <div class="border1" v-if="!props.isView"></div>
    <div class="border2" v-if="!props.isView"></div>
    <div class="border3" v-if="!props.isView"></div>
    <div class="border4" v-if="!props.isView"></div>
    <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 style="width: 100%;height: 100%;border:0" @click="sendPulse"
                 :style="{backgroundColor: props.data.options.backgroundColor,color:props.data.options.color,}">
        {{ props.data.options.text }}
      </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 { Handle, Position } from '@vue-flow/core';

const input = 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 sendPulse = () => {
  if (props.data.options.sendType.includes('ok')) {
    props.data.outputData.ok = Math.floor(new Date().getTime() / 1000);
    console.log('ok');
  }
  if (props.data.options.sendType.includes('reset')) {
    props.data.outputData.reset = Math.floor(new Date().getTime() / 1000);
    console.log('reset');
  }
};
</script>
<style scoped>
.custom-node {
  position: absolute;
}

.border1 {
  position: absolute;
  top: -1px;
  width: 100%;
  height: 1px;
  background: transparent;
  -webkit-backdrop-filter: invert(1);
  backdrop-filter: invert(1);
}

.border2 {
  position: absolute;
  top: 0;
  left: -1px;
  width: 1px;
  height: 100%;
  background: transparent;
  -webkit-backdrop-filter: invert(1);
  backdrop-filter: invert(1);
}

.border3 {
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
  background: transparent;
  -webkit-backdrop-filter: invert(1);
  backdrop-filter: invert(1);
}

.border4 {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: transparent;
  -webkit-backdrop-filter: invert(1);
  backdrop-filter: invert(1);
}
</style>
