<template>
	<!-- 搜索 -->
	<view class="serachBox">
		<view class="serach-box">
			<view class="searchInput">
				<input placeholder="请输入..." class="city-serach-input" v-model="name" />
				<icon v-if="name" class="iconfont icon-error" @click="handlecolse"></icon>
				<view class="voice" v-if="voice && !name">
					<uni-icons class="mic" type="mic-filled" size="26" @click="onMic"></uni-icons>
					<uni-icons class="camera" type="camera-filled" size="26" @click="onCamera"></uni-icons>
				</view>
			</view>
			<view class="searchBtn">
				<view @click="handleSerach">搜索</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "search",
		props: {
			voice: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				name: ""
			};
		},
		methods: {
			// 搜索
			handleSerach() {
				this.$emit("handleSearch", this.name)
			},
			//取消搜索
			handlecolse() {
				this.name = ""
				this.$emit("handleSearch", "")
			},
			onMic() {
				this.$emit("mic")
			},
			onCamera() {
				this.$emit("camera")
			}
		}
	}
</script>

<style scoped lang="scss">
	.serachBox {
		height: 40px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 0 15px 10px;
		z-index: 99;
		background-color: #efefef;

		.serach-box {
			height: 40px;
			border-radius: 10px;
			position: relative;
			background-color: #fff;
		}

		.searchInput {
			position: absolute;
			left: 0;
			right: 60px;
			height: 40px;

			icon {
				position: absolute;
				right: 10px;
				top: 10px;
				display: flex;
				z-index: 99999;
			}

			.voice {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				position: absolute;
				right: 10px;
				top: 0;
				bottom: 0;
				width: 150rpx;
				display: flex;
				z-index: 99999;

				.mic {
					margin-right: 10rpx;
				}
			}
		}

		.searchBtn {
			position: absolute;
			width: 60px;
			right: 0px;
			height: 40px;
			line-height: 40px;
			background: $maincolor;
			border-radius: 0 10px 10px 0;
			text-align: center;
			color: #fff;
		}

		input {
			height: 40px;
			padding: 0 5px;
			text-align: center;
			position: absolute;
			left: 0px;
			right: 0px;
			border-radius: 10px;

		}

		.icon {
			width: 50px;
			height: 40px;
			position: absolute;
			right: 15px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}
</style>