<template>
	<view class='search-box'
		:style='{padding:`${padding}rpx`,margin:`${margin}rpx`,borderRadius:`${radius}rpx`,background:backgroundColor}'>
		<view class='search-item' :class="[{'flex-y-center': type == 'text'},{'flex-between': type == 'input'}]"
			:style='{borderRadius:`${radius}rpx`,background:searchColor,color:frontColor}'>
			<block v-if="type=='text'">
				<i class="iconfont icon-search"></i>
				<view class='ml-md f-paragraph'>{{placeholder}}</view>
			</block>
			<block v-if="type=='input'">
				<view class="flex-y-center flex-1">
					<i class="iconfont icon-search"></i>
					<input type='text' class="flex-1 f-paragraph ml-md mr-md" :disabled="disabled"
						:placeholder='placeholder'
						:placeholder-class='frontColor === "#fff" ? "c-base" : "c-placeholder"' confirm-type="search"
						@input="handerInput" :value="keyword" @confirm="confirm" :auto-focus="autofocus"></input>
				</view>
				<view class=' search-item-btn flex-center radius' :style="{background:primaryColor}" @tap='confirm'
					v-if="showbtn">搜索
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from "vuex"
	export default {
		name: 'search',
		props: {
			type: {
				type: String,
				default () {
					return 'text'
				}
			},
			placeholder: {
				type: String,
				default () {
					return "请输入关键字进行搜索"
				}
			},
			searchStyle: {
				type: String,
				default () {
					return 'circle'
				}
			},
			textAlign: {
				type: String,
				default () {
					return 'center'
				}
			},
			padding: {
				type: Number,
				default () {
					return 30
				}
			},
			margin: {
				type: Number,
				default () {
					return 0
				}
			},
			radius: {
				type: Number,
				default () {
					return 0
				}
			},
			backgroundColor: {
				type: String,
				default () {
					return '#fff'
				}
			},
			searchColor: {
				type: String,
				default () {
					return '#F6F5FA'
				}
			},
			frontColor: {
				type: String,
				default () {
					return '#888'
				}
			},
			autofocus: {
				type: Boolean,
				default () {
					return false
				}
			},
			disabled: {
				type: Boolean,
				default () {
					return false
				}
			},
			showbtn: {
				type: Boolean,
				default () {
					return false
				}
			},
			focus: {
				type: Boolean,
				default () {
					return false
				}
			},
			keyword: {
				type: String,
				default () {
					return ''
				}
			}
		},
		created() {

		},
		data() {
			return {
				text: '',
				searchImg: 'https://lbqny.migugu.com/admin/public/search.png'
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
		}),
		methods: {
			confirm(e) {
				let val = this.text;
				this.$emit("confirm", val)
			},
			handerInput(e) {
				let val = e.detail.value;
				this.text = val;
				this.$emit("input", val)
			}
		},
	}
</script>


<style>
	.search-box {
		padding: 16rpx 16rpx;
		display: flex;
		align-items: center;
		background: #efeff5;
	}

	.search-item {
		width: 100%;
		height: 70rpx;
		background: #ffffff;
		border-radius: 30rpx;
		padding: 0 0 0 25rpx;
		line-height: 1;
		font-size: 26rpx;
	}

	.search-item-btn {
		width: 110rpx;
		height: 70rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.search-btn {
		padding: 0 20rpx 0 40rpx;
	}

	.flex-1 {
		flex: 1;
	}

	.icon-md {
		width: 40rpx;
		height: 40rpx;
	}

	.ml-md {
		margin-left: 16rpx;
	}
</style>
