<template>
  <view class="searchBox" :style="{ width: width }">
    <image class="search-icon" :src="searchIcon" mode="aspectFit"></image>
    <input
      class="search-input"
      :value="value"
      @input="onInput"
      :placeholder="placeholder"
      placeholder-class="search-placeholder"
      @confirm="onSearch"
      confirm-type="search"
    />
    <view class="search-btn" @click="onSearch">{{ btnText }}</view>
  </view>
</template>

<script>
import CommonEnum from '@/enum/common.js';
export default {
  name: 'SearchBox',
  props: {
    value: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '690rpx'
    },
    placeholder: {
      type: String,
      default: '请输入高僧姓名'
    },
    btnText: {
      type: String,
      default: '搜索'
    },
    // 建议传递 CommonEnum.SEARCH 作为默认图标
    searchIcon: {
      type: String,
      default: () => CommonEnum.SEARCH
    }
  },
  methods: {
    onInput(e) {
      // 只更新输入值，不触发搜索
      this.$emit('input', e.detail.value)
    },
    onSearch() {
      // 只在点击搜索按钮或按回车时触发搜索
      if (this.value.trim()) {
        this.$emit('search', this.value)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.searchBox {
  display: flex;
  align-items: center;
  height: 70rpx;
  background: #FFFBF5;
  border-radius: 10rpx;
  border: 1rpx solid #C7A26D;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  padding: 0 12rpx;
}
.search-icon {
  width: 32rpx;
  height: 32rpx;
  margin: 0 28rpx;
}
.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  background: transparent;
  border: none;
  outline: none;
  height: 100%;
}
.search-placeholder {
  color: #bfa16b;
  font-size: 28rpx;
}
.search-btn {
  background: #bfa16b;
  color: #fff;
  font-size: 26rpx;
  border-radius: 6rpx;
  padding: 0 24rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16rpx;
}
</style> 