<template>
	<view class="widget_style">
		<input placeholder-class="widget_input_placehold" v-model="content" class="widget_input" :style="style1" :placeholder="placehold" />
		<view class="widget_button" :style="style2" @click="onClickSearch">{{buttonText}}</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				content:'',
				style1:'',
				style2:'',
			}
		},
		props:{
			width:{
				type:Number,
				default:50
			},
			placehold:{
				type:String,
				default:'请输入内容'
			},
			buttonText:{
				type:String,
				default:'搜索'
			}
		},
		created() {
			// 编织设置动态宽度
			this.style1 = 'min-width:calc('+this.width+'vw);';
			this.style2 = 'min-width:calc('+(this.width / 5)+'vw);';
		},
		destroyed() {
			
		},
		methods:{
			onClickSearch(){
				this.$emit('onSearch',{text:this.content});
			}
		}
	}
</script>

<style>
	.widget_style{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.widget_input{
		height: 50rpx;
		background-color: #fff;
		border: 2rpx solid #fb5e65;
		padding-left: 12rpx;
		padding-right: 12rpx;
		font-size: 24rpx;
	}
	.widget_input_placehold{
		color: #BBB;
	}
	.widget_button{
		height: 55rpx;
		color: #fff;
		font-size: 23rpx;
		padding: 5rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fb5e65;
	}
</style>
