<template>
	<view class="search-box" :class="{'shape-circle':shape==='circle'}">
		<view class="search-btn u-flex u-flex-1">
			<image src="@/static/iconImg/icon-search.svg" class="icon-search" />
			<view class="u-flex-1 u-p-l-24"><input v-model="search.keyword" @confirm="confirm" type="text"
					placeholder-style="font-size:28rpx;" :placeholder="placeholder" /></view>

		</view>
		<view @tap.stop="clear" v-if="search.keyword">
			<uni-icons type="clear" size="16" color="#999"></uni-icons>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	const props = defineProps({
		placeholder: {
			type:String,
			default:'搜索'
		},
		shape:{
			type:String,
			default:''
		}
	})
	
	const search = reactive({
		keyword: "",
	})

	function clear() {
		search.keyword = ''
	}
	const emits = defineEmits(['confirm'])

	function confirm(e) {
		emits('confirm', search.keyword)
	}
</script>

<style lang="scss">
	.search-box {
		background: #F9F9F9;
		padding: 10rpx 30rpx 10rpx 30rpx;
		border-radius: 12rpx;
		display: flex;
		box-sizing: border-box;
		&.shape-circle{
			border-radius: 100px;
		}
		.icon-search {
			width: 26rpx;
			height: 26rpx;
		}
	}
</style>