<template>
  <view
    id="featureSearchBar"
    class="Mall4j con component-search-bar"
    :style="{'margin-bottom':fieldData.position===2&&fixSearchBar?(fieldData.boxHeight+16) + 'px': '0',}"
  >
    <view
      class="search-bar-container"
      :style="{
        background:fieldData.bgColor,
        'position':fieldData.position===2&&fixSearchBar? 'fixed' : 'unset',
        'top':fieldData.position===2&&fixSearchBar? top : 'unset',
        'z-index':fieldData.position===2&&fixSearchBar?'999': 'unset',
      }"
      @tap="toSearchPage"
    >
      <view
        class="search-bar"
        :style="{
          height: fieldData.boxHeight + 'px',
          background:fieldData.boxColor, color: fieldData.textColor,
          borderRadius: fieldData.boxRadio+ 'px',
          justifyContent: fieldData.textAlgin
        }"
      >
        <image
          src="@/static/images/search.png"
        />
        <text>搜索</text>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  fieldData: {
    type: Object,
    default: () => {
      return {}
    }
  },
  pageScorllTop: {
    type: Number,
    default: 0
  },
  shopId: {
    type: [Number, String],
    default: 0
  }
})

const fixSearchBar = ref(false)
const searchBarTop = ref(0)
const top = ref('0')

watch(() => props.pageScorllTop, (newVal) => {
  const extraHeight = 0

  fixSearchBar.value = newVal >= searchBarTop.value + extraHeight
})

onMounted(() => {
  // #ifndef H5
  if (props.shopId === 0) {
    top.value = inject('$lineHeight') + 'rpx'
  }
  // #endif
  getSearchBarScrollTop()
})

/**
 * 获取搜索框所在位置
 */
const instance = getCurrentInstance() // 获取组件实例
const getSearchBarScrollTop = () => {
  nextTick(() => {
    const view = uni.createSelectorQuery().in(instance).select('#featureSearchBar')
    view.boundingClientRect(data => {
      searchBarTop.value = data.top
    }).exec()
  })
}
/**
 * 跳转搜索页面
 */
const toSearchPage = () => {
  // 平台首页，跳转到平台搜索页面
  uni.navigateTo({
    url: props.shopId === 0 ? '/pages/search-page/search-page' : `/package-shop/shop-page/shop-search/shop-search?shopId=${props.shopId}`
  })
}

</script>

<style lang="scss" scoped>
@use "index";
</style>
