<template>
	<view>
		<view class="_searchbar" @tap="clksearch">
			<view class="_icon _search"></view>
			<input v-if="show" ref="refinp" :focus="showfocus" :placeholder="placeholder" style="flex: 1;font-size: 0.9em;color: #333333;" confirm-type="search" type="text" v-model="searchval" @confirm="confirm(true)" @blur="confirm(false)" />
			<text v-else style="font-size: 0.9em;color: #808080;">{{ placeholder === undefined?lang('searchbar.placeholder'):placeholder }}</text>
			<text @tap="confirm(true)" class="_btn" v-if="show">{{btntxt===undefined?lang('searchbar.btn'):btntxt}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ['confirm'],
		props: {
			placeholder: {
				type: String
			},
			btntxt: {
				type: String
			},
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				show: false,
				showfocus: false,
				searchval: ''
			}
		},
		mounted() {
			this._time = 0;
			this.searchval = this.value || '';
			this.lastsearch = this.searchval;
			if (this.searchval != '')
				this.show = true;
		},
		methods: {
			clksearch() {
				this.show = true;
				this.$nextTick(() => {
					this.showfocus = true
				});
			},
			confirm() {
				this.hidekeyboard();
				var x = new Date().getTime() - this._time;
				if (x > 500) {
					this._time = new Date().getTime();
					this.$emit("confirm", {
						value: this.searchval
					});
				}
				if (!this.searchval)
					this.show = false;
			},
			hidekeyboard() {
				// #ifndef APP-PLUS
				uni.hideKeyboard();
				// #endif
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
			}
		}
	};
</script>

<style scoped>
	._icon._search {
		background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zycgd2lkdGg9JzIwMCcgaGVpZ2h0PScyMDAnPjxwYXRoIGQ9J000NTQuNjU2IDg0OS45MkMyMzEuNDI0IDg0OS45MiA1MS4yIDY2OC42NzIgNTEuMiA0NDUuNDQgNTEuMiAyMjMuMjMyIDIzMS40MjQgNDEuOTg0IDQ1NC42NTYgNDEuOTg0YzIyMi4yMDggMCA0MDMuNDU2IDE4MS4yNDggNDAzLjQ1NiA0MDMuNDU2Qzg1OC4xMTIgNjY4LjY3MiA2NzYuODY0IDg0OS45MiA0NTQuNjU2IDg0OS45MnogbTAtNzQ2LjQ5NkMyNjYuMjQgMTAzLjQyNCAxMTIuNjQgMjU3LjAyNCAxMTIuNjQgNDQ1LjQ0czE1My42IDM0Mi4wMTYgMzQyLjAxNiAzNDIuMDE2IDM0Mi4wMTYtMTUzLjYgMzQyLjAxNi0zNDIuMDE2LTE1My42LTM0Mi4wMTYtMzQyLjAxNi0zNDIuMDE2eicgZmlsbD0nIzEyOTZkYic+PC9wYXRoPjxwYXRoIGQ9J005NDIuMDggMTAwOC42NGMtMTIuMjg4IDAtMjMuNTUyLTQuMDk2LTMyLjc2OC0xMy4zMTJMNzM3LjI4IDgyMi4yNzJjLTE4LjQzMi0xOC40MzItMTguNDMyLTQ3LjEwNCAwLTY1LjUzNnM0Ny4xMDQtMTguNDMyIDY1LjUzNiAwbDE3Mi4wMzIgMTcyLjAzMmMxOC40MzIgMTguNDMyIDE4LjQzMiA0Ny4xMDQgMCA2NS41MzYtOS4yMTYgOS4yMTYtMjAuNDggMTQuMzM2LTMyLjc2OCAxNC4zMzZ6JyBmaWxsPScjMTMyMjdhJyBjbGFzcz0nJz48L3BhdGg+PC9zdmc+");
	}

	._icon {
		width: 1em;
		height: 1em;
		margin: 0 0.4em;
		background-size: cover;
	}

	._searchbar {
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		flex: 1;
		justify-content: center;
		align-items: center;
		height: 2.5em;
		border: 1px solid var(--bg5);
		border-radius: 0.3em;
		background: var(--bg1);
	}

	._btn {
		padding: 0 0.5em;
		line-height: 2.5em;
		font-size: 0.9em;
		color: var(--txt6);
	}
</style>