<template>
  <view class="search-bar" :style="{ background:bgcolor, borderRadius:borderRs}">
    <view class="search-input-container" >
      <input 
        v-model="searchQuery" 
        class="search-input" 
        :placeholder="placeholders" 
        @input="handleInput"
      />
      <view class="search-icon-container" @click="handleSearch">
        <uni-icons type="search" size="30" color="#fff"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SearchBar',
  props: {
    placeholders: {
      type: String,
      default: '搜索'
    },
    borderRs: '',
	bgcolor: '',
  },
  data() {
    return {
      searchQuery: ''
    };
  },
  methods: {
    handleInput(event) {
      this.searchQuery = event.target.value;
    },
    handleSearch() {
      // 处理搜索逻辑
      console.log('搜索内容:', this.searchQuery);
    }
  }
};
</script>

<style scoped>
.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
  /* background-color: #19367A; 
  border-radius: 0px 0px 24rpx 24rpx; */
  /* border-radius: 30rpx; */
		
}

.search-input-container {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #fff; /* 输入框背景色 */
  border-radius: 30rpx;
  overflow: hidden; /* 确保子元素不会超出容器 */
}

.search-input {
  flex: 1;
  padding: 10rpx 0;
  padding-left: 20rpx;
  font-size: 28rpx;
  color: #333;
  outline: none;
  border: none;
  height: 80rpx; /* 确保输入框高度 */
}

.search-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80rpx;
  height: 80rpx; /* 确保图标容器高度与输入框一致 */
  background-color: #D42E78; /* 搜索图标背景色 */
  border-radius: 0 30rpx 30rpx 0; /* 圆角处理 */
  color: #fff;
}

.search-icon {
  font-size: 30rpx;
}
</style>