<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>
			<view class="searchBtn">
				<view @click="handleSerach">搜索</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "search",
		data() {
			return {
				name: ""
			};
		},
		methods: {
			// 搜索
			handleSerach() {
				this.$emit("handleSearch", this.name)
			},
			//取消搜索
			handlecolse() {
				this.name = ""
				this.$emit("handleSearch", "")
			}
		}
	}
</script>

<style scoped lang="scss">
	.serachBox {
		height: 40px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 0 15px 10px;
		z-index: 9;
		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;
			}
		}

		.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>
