<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.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 `
    console.log(this.styleStr.bg);
    // 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>
