<template>
	<uni-popup background-color="#fff" ref="fillRef">
		<view class="popup-content">
			<input v-model="result" style="width: 100%" @blur="onBlur" type="text" class="input-box" />
		</view>
	</uni-popup>
</template>

<script setup>
	import {ref, watch} from "vue";
	const fillRef = ref(null);
	const result = ref('');
	const emits = defineEmits(['blur']);
	const props = defineProps({
		value: {
			type: String,
			default: ''
		},
		index: {
			type: Number,
		}
	})
	
	watch(() => props.value, (val) => {
		result.value = val;
	})
	
	function showPopup() {
		fillRef.value.open('top');
	}	
	function onBlur() {
		emits("blur", {result: result.value,index: props.index});
	}
	
	defineExpose({
		showPopup
	})
</script>

<style lang="scss" scoped>
.popup-content {
	padding: 10px;
}
</style>