<template>
  <div
    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
    <NodeResizer color="#000" 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'}">
      <el-date-picker
        v-model="value"
        type="datetimerange"
        range-separator="到"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        style="width: 100%;height: 100%"
      />
    </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 value = ref('');
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
  }
});

watch(() => value, () => {
  if (props.data?.options?.startTimeId) {
    props.data.outputData[props.data.options.startTimeId || 'startTime'] = value.value[0];
  }
  if (props.data?.options?.endTimeId) {
    props.data.outputData[props.data.options.endTimeId || 'endTime'] = value.value[1];
  }
}, { deep: true });
const emit = defineEmits(['resize']);
const resize = (e) => {
  emit('resize', e, props.id);
};
</script>
<style scoped>
.custom-node {
  position: absolute;
}
</style>

