<template>
	<view>
		<view v-if="searchTop >= top" class="search" id="search" :style="{ 'padding-top': data.height_style + 'rpx', 'padding-bottom': data.height_style + 'rpx', 'background-color': data.background_color }" @click="jump">
			<view class="search-wrap" :style="{ 'text-align': data.text_align, 'color': data.text_color, 'background-color': data.border_color, 'border-radius': data.border_radius + 'rpx' }">
				<view class="icon-search"><uni-icons :color="data.icon_color" type="search" size="17" /></view>
				<view class="icon-text">{{ data.text || '请输入关键字搜索' }}</view>
			</view>
		</view>
		<view v-if="top >= searchTop" :style="{ 'padding-top': data.height_style + 'rpx', 'padding-bottom': data.height_style + 'rpx', 'background-color': data.background_color }"></view>
	</view>
</template>

<script setup>
	import { computed,watch,ref,nextTick,onMounted } from "vue";
	import { navigateTo } from "@/el-ui/libs/navigate";
	
	const props = defineProps({
		top: {
			type: Number,
			default: function() {
				return 0;
			}
		},
		data: {
			type: Object,
			default: function() {
				return {};
			}
		}
	});
	
	const emits = defineEmits(["modelValue","update:modelValue","input"]);
	
	let searchTop    = ref(1000000);
	let searchHeight = ref(0);
	
	onMounted(()=>{
		nextTick(()=>{
			uni.createSelectorQuery().select('#search').boundingClientRect(function (rect) {
				if(rect) {
					searchTop.value    = rect.top;
					searchHeight.value = rect.height;
					emits("input", rect.top);
				}
			}).exec();
		});
	});
	
	
	const jump = ()=>{
		navigateTo(`pages/search/index`);
	}
</script>

<style lang="scss">
.search {
	width: 100%;
	box-sizing: border-box;
	padding: 20rpx 30rpx;
	background-color: RGBA(243, 240, 253, 1);
	.search-wrap {
		height: 64rpx;
		line-height: 64rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		color: rgba(156, 156, 156, 1);
		background-color: #ffffff;
		padding-left: 30rpx;
		position: relative;
		.icon-search {
			font-size: 24rpx;
			display: inline-block;
			height: 64rpx;
			line-height: 64rpx;
		}
		.icon-text {
			padding-left: 10rpx;
			font-size: 24rpx;
			display: inline-block;
			height: 64rpx;
			line-height: 64rpx;
			position: relative;
			top: -2px;
		}
	}
}
</style>