<script setup lang="ts">
const props = defineProps<{
  noticeStyle?: 'white' | 'black'
}>()
function toSearchPage() {
  uni.navigateTo({
    url: '/pages/search/search',
  })
}
onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      console.log('getSystemInfo success: ', res)
    },
  })
  // #ifdef APP-IOS
  console.log('searchBar mounted')

  // #endif
})
</script>

<template>
  <view class="search-bar">
    <view class="search-input" @click="toSearchPage">
      <image class="prefix-icon" src="/static/icons/Search.svg" alt="" mode="aspectFit" />
      <text class="search-placeholder">搜索产品</text>
    </view>
    <!-- <view class="notices">
      <image
        class="notices-icon"
        :src="noticeStyle === 'white' ? '/static/icons/Notice_white.svg' : '/static/icons/Notice.svg'" alt=""
        mode="aspectFit"
      />
    </view> -->
  </view>
</template>

<style lang="less" scoped>
.search-bar {
  padding: 0 28rpx;
  display: flex;
  align-items: center;

  .search-input {
    display: flex;
    align-items: center;
    background-color: rgba(#f9f9f9, 0.5);
    border-radius: 10rpx;
    padding: 14rpx;
    flex: 1;
    height: 68rpx;
    box-sizing: border-box;

    .prefix-icon {
      height: 32rpx;
      width: 32rpx;
      margin-right: 8rpx;
    }

    .search-icon {
      font-size: 64rpx;
      margin-right: 20rpx;
      color: #999;
    }

    .search-placeholder {
      color: #999;
      font-size: 28rpx;
    }
  }

  .notices {
    height: 48rpx;
    width: 48rpx;
    flex-shrink: 0;
    margin-left: 36rpx;

    > image {
      max-width: 100%;
      height: 48rpx;
    }
  }
}
</style>
