<template>
    <view>
        <view class="search-content pr">
            <view class="search-icon  pa" @tap="search_input_event">								
                <!-- <uni-icons :type="propIcon" size="12" :color="propIconColor"></uni-icons> -->
				<view class="search icon icon-color icon-font"></view>
			</view>
			
            <input type="text" confirm-type="search" class="round " :placeholder="propPlaceholder" :placeholder-class="propPlaceholderClass" v-model="keywords" @confirm="search_input_event" :style="'color:'+propTextColor+';background:'+propBgColor+';'+((propBrColor || null) != null ? 'border:1px solid '+propBrColor+';' : '')">
        </view>
    </view>
</template>
<script>

    const app = getApp();
    export default {
        data() {
            return {
				keywords:"",
			};
        },
        components: {},
        props: {
            propUrl: {
            	type: String,
            	default: '/pages/goods-search/goods-search'
            },
            propFormName: {
            	type: String,
            	default: 'keywords'
            },
            propPlaceholder: {
            	type: String,
            	default: '输入商品名称搜索'
            },
            propPlaceholderClass: {
            	type: String,
            	default: 'cr-grey'
            },
            propTextColor: {
            	type: String,
            	default: '#666'
            },
            propBgColor: {
            	type: String,
            	default: '#FFFFFF'
            },
            propBrColor: {
            	type: String,
            	default: ''
            },
            propIsRequired: {
            	type: Boolean,
            	default: true
            },
            propIsOnEvent: {
            	type: Boolean,
            	default: false
            },
            // propIcon: {
            // 	type: String,
            // 	default: 'search'
            // },
            propIsIconOnEvent: {
            	type: Boolean,
            	default: false
            },
        },
        methods: {
            // 搜索事件
            search_input_event() {
				
                // var keywords = e.detail.value || null;
				// console.log(this.keywords)
				this.keywords = this.keywords || null;
                // 是否验证必须要传值
                if (this.propIsRequired && this.keywords == null) {		
					uni.showToast({
					    icon: 'none',
					    title: "请输入搜索关键字",
					    duration: 1000
					});
                    return false;
                }
                
                // 是否回调事件
                // if(this.propIsOnEvent) {
                    this.$emit('onsearch', this.keywords);//回调
                // } else {
                //     // 进入搜索页面
                //     uni.navigateTo({
                //         url: this.propUrl+'?'+this.propFormName+'=' + keywords
                //     });
                // }
            },
            
            // icon事件
            // search_icon_event(e) {
            //     // 是否回调事件
            //     if(this.propIsIconOnEvent) {
            //         this.$emit('onicon', {});
            //     }
            // }
        }
    };
</script>
<style>
	.round{
		border-radius: 50rpx ;
	}
	
	.pr{
		position: relative;
	}
	.pa{
		position: absolute;
	}
	.dis-inline-block{
		display: inline-block;
	}
	
    .search-content .search-icon {
        text-align: center;
		height: 30px;
		line-height: 30px;
		width: 30px;
		
    } 
	
	.search-content .search-icon .icon-color{
		color: #666;
	}
	
	.search-content .search-icon .icon-font{
		font-size:20px ;
	}
	
    .search-content input {
        font-size: 12px;
        padding: 0 15px 0 30px;
        box-sizing: border-box;
        height: 30px;
        line-height: 30px;
    } 
</style>