<template>
	<view>
		<view class="searchWrap">
			<view class="searchLeft">
				<image src="../../../static/image/icon_search.png" mode=""></image>
				<input type="text" v-model="keyword" placeholder="请输入关键字" @confirm="search"/>
				<image @click="clearInput" src="../../../static/image/icon_clear.png" mode=""></image>
			</view>
			<view class="searchRight" @click="close">
				取消
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				keyword:this.$store.state.keyword
			}
		},
		comments:{
			...mapState(["keyword"])
		},
		onBackPress() {
			this.$store.commit('defaultKeyword')
			uni.redirectTo({
				url:'check'
			})
		},
		methods: {
			close(){
				this.$store.commit('defaultKeyword')
				uni.redirectTo({
					url:'check'
				})
			},
			clearInput(){
				this.keyword = ''
			},
			search(){
				if(this.keyword == ''){
					uni.showToast({
						title:'请输入关键字',
						icon:'none'
					})
					return
				}
				this.$store.commit('setKeyword',{keyword:this.keyword})
				uni.navigateTo({
					url:'check'
				})
			}
		}
	}
</script>

<style>
	.searchWrap{height: 72rpx;padding: 16rpx 32rpx;display: flex;}
	.searchWrap .searchLeft{flex: 1;background: #f2f3f5;border-radius: 68rpx;padding: 0 16rpx 0 32rpx;display: flex;align-items: center;}
	.searchLeft image{width: 32rpx;height: 32rpx;}
	.searchLeft input{flex: 1;font-size: 28rpx;padding:0 8rpx;}
	.searchWrap .searchRight{width: 100rpx;display: flex;justify-content: flex-end;color: #646566;font-size: 34rpx;line-height: 72rpx;}
</style>