<template>
	<div class="my-textarea">
		<textarea
			:placeholder="placeholder"
			:value="modelValue"
			@input="onInput"
			@change="onChange"
		></textarea>
		<div class="bths">
			<button><svg-icon name="mobang" size="10" /></button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, markRaw, onMounted } from 'vue'
	const emit = defineEmits(['update:modelValue', 'input', 'change'])
	const props = defineProps({
		modelValue: { type: String },
		placeholder: {
			type: String,
			default: 'Enter the scene you want to describe...'
		}
	})
	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: 11.5rem;
		border: 0.1rem solid #e4e4e7;
		border-radius: 1rem;
		padding: 1rem 0.5rem;
		display: flex;
		flex-direction: column;
		> textarea {
			padding: 0 0.5rem;
			width: 100%;
			flex: 1;
			border: none;
			outline: none;
			resize: none;
			font-family: Medium;
			font-size: 1rem;
			color: #333;
			&::placeholder {
				color: #c9c9c9;
			}
			&::-webkit-scrollbar {
				width: 0.4rem;
			}
			&::-webkit-scrollbar-thumb {
				border-radius: 0.4rem;
				background: rgba(0, 0, 0, 0.2);
			}
			&::-webkit-scrollbar-track {
				border-radius: 0.4rem;
				background: rgba(0, 0, 0, 0.1);
			}
		}
		> .bths {
			padding: 0.5rem 0.5rem 0;
			> button {
				width: 2rem;
				height: 2rem;
				padding: 0;
				border-radius: 0.4rem;
				background-color: #f0f0f0;
				border: 1px solid #e4e4e7;
				&:active {
					opacity: 0.5;
				}
			}
		}
	}
</style>
