<template>
	<view class="searchInput">
		<view class="input">
			<input style="height: 60rpx;" @input="onInput" v-model="input" />
		</view>
		<button class="btn" type="primary" @tap="btnClick">搜索</button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	const input = ref('')
	const props = defineProps(['title', 'modelValue'])
	const emit = defineEmits(['search'])
	const btnClick = (e) => {
		emit('search', props.value)
	}
	const onInput = (e) => {
		emit('update:modelValue', e.detail.value)
	}
	onMounted(() => {
		input.value = props.modelValue
	})
</script>

<style scoped lang="scss">
	.searchInput {
		width: 100%;
		height: 60rpx;
		border: 1px solid #ccc;
		border-radius: 30rpx;

		.input {
			display: inline-block;
			margin: 0 10rpx 0 20rpx;
			width: calc(100% - 10rpx - 20rpx - 100rpx - 6rpx);
		}

		.btn {
			display: inline-block;
			width: 100rpx;
			height: 48rpx;
			line-height: 48rpx;
			vertical-align: top;
			margin-top: 6rpx;
			padding: 0;
			border-radius: 24rpx;
			font-size: 26rpx
		}
	}
</style>