<template>
	<!-- <van-search
    :value="val"
    :placeholder="styleStr.placeholder"
    :background="styleStr.background"
    :input-align='styleStr.textPosition'
    :input-style="formatStyle"
    :text-color='styleStr.textColor'
    :custom-style='postionStyle'
    readonly
  /> -->
	<view class="search-box" :style="{ background: bg }" @click="goSearch">
		<u-search :placeholder="styleStr.placeholder" v-model="val" :input-align="styleStr.textPosition" :value="val"
			:bg-color="styleStr.color" :text-color="styleStr.textColor" :radius="styleStr.radius" :show-action="false"
			:margin="marginStyle"></u-search>
	</view>
</template>

<script>
	export default {
		props: ["styleStr"],
		data() {
			return {
				val: "",
				formatStyle: "",
				postionStyle: "",
				bg: "",
				marginStyle: ""
			};
		},
		created() {
			if (
				this.styleStr.background && this.styleStr.background.indexOf("#") == -1 &&
				this.styleStr.background.indexOf("rgb") == -1
			) {
				
				this.bg = "#" + this.styleStr.background;
			} else {
				this.bg = this.styleStr.background;
			}
			this.marginStyle =
				`${this.styleStr.top??0}px ${this.styleStr.right??0}px ${this.styleStr.bottom??0}px ${this.styleStr.left??0}px `
			// if (this.styleStr.p) {
			//   let p = this.styleStr.p;
			//   this.postionStyle = `position:${p.position};left:${p.left}px;width:${p.width};top:${p.top}px;z-index:9999999;`;
			// }
			//console.log(this.postionStyle);
		},
		methods: {
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			}
		},
	};
</script>

<style>
	.search-box {
		padding: 5px;
		position: relative;
		z-index: 2;
	}
</style>
