<template>
	<view>
		<input :disabled="disabled" class="input" v-model="model" :placeholder="props.placeholder" @change="onChange" />
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue'

	const props = defineProps({
		modelValue: Object,
		placeholder: String,
		disabled:Boolean
	})

	const emit = defineEmits(['update:modelValue', 'change'])

	const model = computed({
		get() {
			return props.modelValue
		},
		set(val) {
			emit('update:modelValue', val)
		}
	})

	const onChange = (val) => {
		let data = props.modelValue?.[val.detail.value]?.value || ''
		emit('change', modelValue)
	}
</script>

<style lang="scss" scoped>
	.input {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		color: #333;

		.uni-input-placeholder {
			font-size: 24rpx;
		}
	}
</style>