<template>
	<el-dialog v-model="visible" title="编辑提示词" width="720px" :close-on-click-modal="false" destroy-on-close @close="handleClose">
		<div class="prompt-input-dialog">
			<el-input v-model="promptContent" type="textarea" :rows="12" maxlength="5000" show-word-limit placeholder="请输入提示词内容" />
		</div>

		<template #footer>
			<el-button @click="handleClose">取消</el-button>
			<el-button type="primary" @click="handleConfirm">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

interface Props {
	modelValue: boolean;
	defaultPrompt?: string;
}

interface Emits {
	(e: 'update:modelValue', value: boolean): void;
	(e: 'confirm', promptContent: string): void;
}

const props = withDefaults(defineProps<Props>(), {
	modelValue: false,
	defaultPrompt: '',
});

const emit = defineEmits<Emits>();

const visible = ref(false);
const promptContent = ref('');

watch(
	() => props.modelValue,
	(val) => {
		visible.value = val;
		if (val) {
			promptContent.value = props.defaultPrompt || '';
		}
	}
);

watch(visible, (val) => {
	if (!val) {
		emit('update:modelValue', false);
	}
});

const handleConfirm = () => {
	emit('confirm', promptContent.value.trim());
	handleClose();
};

const handleClose = () => {
	visible.value = false;
};
</script>

<style scoped lang="scss">
.prompt-input-dialog {
	display: flex;
	flex-direction: column;
}
</style>
