<template>
  <view class="search-wrapper" :style="{ paddingTop: pTop + 'rpx', backgroundColor: bgColor }">
    <view class="search-main" @tap="emits('click')">
      <image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
      <input type="text" :placeholder="place" placeholder-style="color: rgba(0,0,0,0.35);" :style="{ fontSize: size + 'rpx' }" disabled />
    </view>
    <slot name="right" />
  </view>
</template>

<script setup>
const props = defineProps({
  place: { type: String }, //提示语
  pTop: { type: Number }, //距离上边距离 使用padding 为了有背景色
  bgColor: { type: String }, //背景色
  size: { type: Number, default: 27 }, //搜素框文字大小
})
const emits = defineEmits(['click'])



</script>
<style lang="scss" scoped>
.search-wrapper {
  display: flex;
  align-items: center;
  height: 110rpx;
  background-color: $J-bg-ff;
  padding: 0 30rpx;
  .search-main {
    flex: 1;
    display: flex;
    align-items: center;
    height: 70rpx;
    background-color: $J-bg-f5;
    border-radius: $J-b-r12;
    image {
      padding: 0 22rpx;
      width: 26rpx;
      height: 26rpx;
    }
    input {
      flex: 1;
    }
    .search-text {
      padding: 0 30rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: $J-color-t29;
    }
  }
}
</style>
