<template>
  <view class="search-bar">
    <view class="search-input-wrapper">
      <view class="search-icon flex-row align-center">
        <image src="/static/images/search.png" mode="aspectFit" class="search-icon-img"></image>
      </view>
      <input
        class="search-input"
        v-model="localSearchKeyword"
        :placeholder="placeholder"
        placeholder-class="placeholder"
        @input="handleInput"
        @confirm="handleSearch"
      />
      <!-- 清除图标 -->
      <view v-if="localSearchKeyword" class="clear-icon" @click="clearSearch">
        <uni-icons type="clear" size="18" color="#999"></uni-icons>
      </view>
    </view>
    <view v-if="showSearchButton" class="search-btn" @click="handleSearch">搜索</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useSearch } from '@/composables/common/useSearch'

// 接收组件值
const props = defineProps({
  placeholder: {
    type: String,
    default: '请输入搜索关键字',
  },
  showSearchButton: {
    type: Boolean,
    default: true,
  },
  showSearchText: {
    type: Boolean,
    default: true,
  },
  debounceTime: {
    type: Number,
    default: 300,
  },
  minLength: {
    type: Number,
    default: 1,
  },
  maxHistoryCount: {
    type: Number,
    default: 10,
  },
})

const emit = defineEmits(['search', 'input', 'clear'])

// 本地搜索关键词状态
const localSearchKeyword = ref('')

// 使用搜索逻辑
const {
  isSearching,
  searchHistory,
  handleSearch: performSearch,
  debounceSearch,
} = useSearch({
  debounceTime: props.debounceTime,
  minLength: props.minLength,
  maxHistoryCount: props.maxHistoryCount,
})

// 处理输入
const handleInput = (e) => {
  const value = e.detail.value
  emit('input', value)

  // 防抖搜索
  debounceSearch(() => {
    if (value.trim().length >= props.minLength) {
      emit('search', value.trim())
    }
  })
}

// 处理搜索
const handleSearch = () => {
  const keyword = localSearchKeyword.value.trim()
  if (keyword.length >= props.minLength) {
    performSearch(keyword)
    emit('search', keyword)
  }
}

// 清空搜索
const clearSearch = () => {
  localSearchKeyword.value = ''
  emit('clear')
}

// 暴露方法给父组件
defineExpose({
  searchKeyword: localSearchKeyword,
  isSearching,
  searchHistory,
  clearSearch,
  handleSearch,
})
</script>

<style lang="scss" scoped>
@import '@/styles/common.scss';
.search-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 80rpx;
  padding: 0 30rpx;
  background: #fff;
  border-radius: 24rpx;

  .search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    margin-right: 24rpx;
    position: relative; // 添加相对定位

    .search-icon {
      margin-right: 16rpx;
      font-size: 32rpx;
      color: #999;
      // background: red;
      .search-icon-img {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .search-input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      border: none;
      outline: none;
      background: transparent;
      padding-right: 40rpx; // 为清除图标留出空间

      &::placeholder {
        color: #999;
      }
    }

    .clear-icon {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      padding: 8rpx;
      cursor: pointer;

      &:active {
        opacity: 0.7;
      }
    }
  }

  .search-btn {
    color: $secondary-color;
    font-size: 28rpx;
    font-weight: 500;
    cursor: pointer;

    &:active {
      opacity: 0.7;
    }
  }
}

.placeholder {
  color: #999;
}
</style>
