<template>
	<div class="my-textarea">
		<textarea
			:placeholder="placeholder || $t('FlowCanvas.promptDefaultPlaceholder')"
			:value="modelValue"
			@input="onInput"
			@change="onChange"
			@copy.stop
			@keydown.stop
		></textarea>
		<div class="bths">
			<button><svg-icon name="mobang" size="10" size-unit="px" /></button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, markRaw, onMounted } from 'vue'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	const placeholder = t('FlowCanvas.promptDefaultPlaceholder')
	const emit = defineEmits(['update:modelValue', 'input', 'change'])
	const props = defineProps({
		modelValue: { type: String },
		placeholder: {
			type: String,
			default: ''
		}
	})
	const onInput = (e) => {
		const value = e.target.value
		emit('update:modelValue', value)
		emit('input', value)
	}
	const onChange = (e) => {
		emit('change', e.target.value)
	}
</script>

<style lang="less" scoped>
	.my-textarea {
		width: 100%;
		height: 115px;
		border: 1px solid #e4e4e7;
		border-radius: 10px;
		padding: 10px 5px;
		display: flex;
		flex-direction: column;
		> textarea {
			padding: 0 5px;
			width: 100%;
			flex: 1;
			border: none;
			outline: none;
			resize: none;
			font-family: Medium;
			font-size: 10px;
			color: #333;
			&::placeholder {
				color: #c9c9c9;
			}
			&::-webkit-scrollbar {
				width: 4px;
			}
			&::-webkit-scrollbar-thumb {
				border-radius: 4px;
				background: rgba(0, 0, 0, 0.2);
			}
			&::-webkit-scrollbar-track {
				border-radius: 4px;
				background: rgba(0, 0, 0, 0.1);
			}
		}
		> .bths {
			padding: 5px 5px 0;
			> button {
				width: 20px;
				height: 20px;
				padding: 0;
				border-radius: 4px;
				background-color: #f0f0f0;
				border: 1px solid #e4e4e7;
				&:active {
					opacity: 0.5;
				}
			}
		}
	}
</style>
