<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-timeline style="width: 100%">
        <el-timeline-item
          :hide-timestamp="!props.data.options.isTimestamp"
          placement="top"
          v-for="(activity, index) in list"
          :key="index"
          :style="{'--el-text-color-secondary': props.data.options.timestampColor}"
          :timestamp="activity[props.data.options.timestampField || 'timestamp']"
        >
          <span :style="{color: props.data.options.color}">
          {{ activity[props.data.options.field || 'content'] }}
          </span>
        </el-timeline-item>
      </el-timeline>
    </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';

const list = ref([
  {
    content: '事件1',
    timestamp: '2018-04-15'
  },
  {
    content: '事件2',
    timestamp: '2018-04-13'
  },
  {
    content: '事件3',
    timestamp: '2018-04-11'
  }
]);
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
  }
});

watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
    if (props.inputData?.data && props.inputData?.data.length > 0) {
      list.value = props.inputData?.data?.map(e => {
        return {
          content: e[props.data.options.field],
          timestamp: e[props.data.options.timestampField]
        };
      });
      console.log(list.value);
    } else {
      list.value = [
        {
          content: '事件1',
          timestamp: '2018-04-15'
        },
        {
          content: '事件2',
          timestamp: '2018-04-13'
        },
        {
          content: '事件3',
          timestamp: '2018-04-11'
        }
      ];
    }
  }
}, { deep: true, immediate: true });
const emit = defineEmits(['resize']);
const resize = (e) => {
  emit('resize', e, props.id);
};
</script>
<style scoped>
.custom-node {
  position: absolute;
}
</style>

