<template>
<!-- 搜索框 -->
		<view class="weui-search-bar">
		  <view class="weui-search-bar__form">
		    <!-- 搜索框 -->
		    <view class="weui-search-bar__box">
		      <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
		      <input type="text" class="weui-search-bar__input" bindblur="handleInput" placeholder="站点名称" />
		    </view>
		  </view>
		  <!-- 搜索按钮,调用搜索查询方法 -->
		  <view class="weui-search-bar__cancel-btn" @click="handleConfirm">搜索</view>
		</view>

</template>

<script>
	export default {
				props: ['searchBar'],
				methods: {
					// 用户输入触发
					handleInput: function(e) {
						this.setData({
							inputValue: e.detail.value
						})
					},
					// 点击清空输入框icon
					handleDeleteClick: function() {
						this.setData({
							inputValue: ''
						})
					},
					// 点击取消触发
					handleTextbtnClick() {
						// 触发父组件中的方法
						this.setData({
							inputValue: ''
						})
					},
					// 用户点击确定触发
					handleConfirm() {
						this.triggerEvent('handleSearch', this.data.inputValue)
					}
				}

			}
</script>

<style lang="scss">
	/* 搜索框样式 */
	.weui-search-bar {
	  position: relative;
	  padding: 8px 10px;
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: flex;
	  box-sizing: border-box;
	  background-color: #EFEFF4;
	  border-top: 1rpx solid #D7D6DC;
	  border-bottom: 1rpx solid #D7D6DC;
	}
	
	/* 搜索框前的放大镜图标 */
	.weui-icon-search_in-box {
	  position: absolute;
	  left: 10px;
	  top: 7px;
	}
	
	.weui-search-bar__form {
	  position: relative;
	  -webkit-box-flex: 1;
	  -webkit-flex: auto;
	  flex: auto;
	  border-radius: 5px;
	  background: #FFFFFF;
	  border: 1rpx solid #E6E6EA;
	}
	
	.weui-search-bar__box {
	  position: relative;
	  padding-left: 30px;
	  padding-right: 30px;
	  width: 100%;
	  box-sizing: border-box;
	  z-index: 1;
	}
	/* 输入框高度与字体大小 */
	.weui-search-bar__input {
	  height: 28px;
	  line-height: 28px;
	  font-size: 14px;
	}
	
	/* 搜索 */
	.weui-search-bar__cancel-btn {
	  margin-left: 10px;
	  line-height: 28px;
	  color: #09BB07;
	  white-space: nowrap;
	}
</style>
