<template>
	<path :class="['line', {'contact': onContact}]" :d="transPath" @dblclick="onDblClick"></path>
</template>

<script>
	import {DOCK_POINT_OFFSET} from "../../../../config";

	export default {
		name: "LinkLine",
    props: ['data'],
    created() {
      this.onContact = false
    },
		mounted() {
      console.log();
		},
		watch: {
			'data': function (v) {
        this.onContact = v.onContact;
			}
		},
		computed: {
			transPath() {
				const {prev, next, outputType, outputIndex} = this.data;
				let t = prev.design.output[outputType];
				if(!t){
					debugger
				}
				const from = prev.design.output[outputType][outputIndex];
				const to = next.design.input['default'][0];
				const fromPos = {
					x: from.x + prev.design.x,
					y: from.y + prev.design.y,
				};
				const toPos = {
					x: to.x + next.design.x,
					y: to.y + next.design.y,
				};
				//const absXOff = Math.abs(from.x - to.x);
				let x1 = fromPos.x + 100;
				/*if(absXOff < 200){
					x1 = from.x + absXOff / 2;
				}*/
				let x2 = toPos.x - 100;
				/*if(absXOff < 200){
					x2 = to.x - absXOff / 2;
				}*/
				return `M${fromPos.x - DOCK_POINT_OFFSET},${fromPos.y + DOCK_POINT_OFFSET} C${x1},${fromPos.y + DOCK_POINT_OFFSET} ${x2},${toPos.y + DOCK_POINT_OFFSET} ${toPos.x + DOCK_POINT_OFFSET},${toPos.y + DOCK_POINT_OFFSET}`
			},
		},
		methods: {
			onDblClick(e) {
				this.$emit('dblclick', this.data);
			}
		}
	}
</script>

<style scoped>
</style>
