<template>
	<!-- 文字节点 -->
	<div class="text" @mousedown="onMouseDown">
		<div
			tabindex="0"
			class="input"
			:style="data.textStyle"
			ref="inputRef"
			:contenteditable="active"
			@input="onInput"
			@blur="onBlur"
			@paste.prevent
			@keydown.stop
		></div>
		<div class="tools" @mousedown="onMouseDown" v-if="active">
			<myTextTools :textStyle="data.textStyle"></myTextTools>
		</div>
		<span class="delete" @mousedown.stop @click="emit('delete-node')" v-show="active">
			<svg-icon name="close" size="7" size-unit="px" />
		</span>
	</div>
</template>

<script setup lang="ts">
	import { reactive, ref, onMounted, nextTick, watch } from 'vue'
	import myTextTools from '@/components/Canvas/FlowCanvas/components/tools/my-textTools.vue'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	const props = defineProps({
		active: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object,
			default: () => ({})
		}
	})
	const emit = defineEmits(['update-data', 'delete-node'])
	const data = reactive({
		text: props.data?.text || t('FlowCanvas.clickEditText'),
		textStyle:{
			'--font-size':props.data?.textStyle?.['--font-size'] || '16px',
			'--font-color':props.data?.textStyle?.['--font-color'] || '#000',
			'--font-style':props.data?.textStyle?.['--font-style'] || 'normal',//italic
			'--font-family':props.data?.textStyle?.['--font-family'] || 'Medium',
			'--font-weight':props.data?.textStyle?.['--font-weight'] || 'initial',//blod
			'--font-decoration':props.data?.textStyle?.['--font-decoration'] || 'none',//underline
		}
	})
	const time = ref(null)
	const inputRef = ref<any>()
	const onInput = () => {
		const text = inputRef.value.innerHTML
		data.text = text
	}
	// watch(
	// 	() => props.active,
	// 	(newVal) => {
	// 		if (!newVal) return
	// 		nextTick(() => {
	// 			// 光标定位到文本末尾
	// 			const range = document.createRange()
	// 			const selection = window.getSelection()
	// 			range.selectNodeContents(inputRef.value)
	// 			range.collapse(false)
	// 			selection.removeAllRanges()
	// 			selection.addRange(range)
	// 		})
	// 	}
	// )
	const onMouseDown = (e: MouseEvent) => {
		if (props.active) e.stopPropagation()
	}
	const onBlur = () => {
		// emit('update-data', data)
	}
	onMounted(() => {
		inputRef.value.innerHTML = data.text
		emit('update-data', data)
	})
	defineExpose({ data })
</script>

<style lang="less" scoped>
	.text {
		user-select: none;
		position: relative;
		&.active {
			> .input {
				border-color: #000;
				cursor: text;
			}
		}
		> .input {
			border: 1px solid transparent;
			padding: 2px;
			outline: none;
			min-width: 2px;
			font-size: 16px;
			color: var(--font-color);
			font-style: var(--font-style);
			font-weight: var(--font-weight);
			font-size: var(--font-size);
			text-decoration: var(--font-decoration);
			font-family: var(--font-family);
		}
		> .delete {
			position: absolute;
			top: 4px;
			right: 4px;
			transform: translate(100%, -100%);
			background-color: #fff;
			padding: 2px;
			border-radius: 50%;
			cursor: pointer;
		}
		> .tools{
			position: absolute;
			left: 50%;
			transform: translate(-50%,-100%);
			top: -10px;
			height: 41px;
			border: 2px solid #EBEBEB;
			border-radius: 11px;
			background-color: #fff;
		}
	}
</style>
