<template>
  <view class="search-bar" :class="{ 'search-bar-fixed': fixed }" :style="{ top: fixedTop }">
    <view class="search-container" :class="{ 'search-glass': glass }">
      <!-- 搜索输入框 -->
      <view class="search-input-wrap" @tap="handleFocus">
        <u-icon name="search" :size="24" :color="iconColor"></u-icon>
        <input
          v-if="!readonly"
          v-model="inputValue"
          class="search-input"
          type="text"
          :placeholder="placeholder"
          :placeholder-style="`color: ${placeholderColor}`"
          :focus="focused"
          :maxlength="maxlength"
          @input="handleInput"
          @focus="handleInputFocus"
          @blur="handleInputBlur"
          @confirm="handleSearch"
        />
        <text v-else class="search-text" :class="{ 'search-placeholder': !modelValue }">
          {{ modelValue || placeholder }}
        </text>

        <!-- 清除按钮 -->
        <view v-if="showClear && inputValue" class="search-clear" @tap.stop="handleClear">
          <u-icon name="close-circle-fill" :size="24" color="#CCCCCC"></u-icon>
        </view>
      </view>

      <!-- 搜索按钮 -->
      <view v-if="showButton" class="search-button" @tap="handleSearch">
        <text class="search-button-text">{{ buttonText }}</text>
      </view>

      <!-- 取消按钮 -->
      <view v-if="showCancel && focused" class="search-cancel" @tap="handleCancel">
        <text class="search-cancel-text">取消</text>
      </view>
    </view>

    <!-- 热门搜索 -->
    <view v-if="showHot && hotKeywords.length > 0 && focused" class="search-hot">
      <view class="hot-header">
        <text class="hot-title">热门搜索</text>
      </view>
      <view class="hot-list">
        <view
          v-for="(keyword, index) in hotKeywords"
          :key="index"
          class="hot-item"
          @tap="handleHotClick(keyword)"
        >
          <text class="hot-text">{{ keyword }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

interface Props {
  modelValue?: string          // 搜索值
  placeholder?: string         // 占位文字
  readonly?: boolean           // 只读模式
  fixed?: boolean              // 是否固定定位
  fixedTop?: string            // 固定定位的top值
  glass?: boolean              // 毛玻璃效果
  showButton?: boolean         // 是否显示搜索按钮
  buttonText?: string          // 搜索按钮文字
  showCancel?: boolean         // 是否显示取消按钮
  showClear?: boolean          // 是否显示清除按钮
  showHot?: boolean            // 是否显示热门搜索
  hotKeywords?: string[]       // 热门关键词
  maxlength?: number           // 最大长度
  autofocus?: boolean          // 自动聚焦
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: '搜索酒店、民宿',
  readonly: false,
  fixed: false,
  fixedTop: '0',
  glass: false,
  showButton: false,
  buttonText: '搜索',
  showCancel: true,
  showClear: true,
  showHot: false,
  hotKeywords: () => [],
  maxlength: 50,
  autofocus: false
})

const emit = defineEmits<{
  'update:modelValue': [value: string]
  'search': [value: string]
  'focus': []
  'blur': []
  'cancel': []
  'clear': []
  'hot-click': [keyword: string]
}>()

const inputValue = ref(props.modelValue || '')
const focused = ref(props.autofocus)

// 图标颜色
const iconColor = computed(() => {
  return focused.value ? '#FF6B35' : '#999999'
})

// 占位符颜色
const placeholderColor = computed(() => {
  return '#CCCCCC'
})

// 监听外部值变化
watch(() => props.modelValue, (val) => {
  inputValue.value = val || ''
})

// 输入事件
const handleInput = (e: any) => {
  const value = e.detail.value
  inputValue.value = value
  emit('update:modelValue', value)
}

// 聚焦
const handleFocus = () => {
  if (props.readonly) {
    emit('focus')
  } else {
    focused.value = true
  }
}

// 输入框聚焦
const handleInputFocus = () => {
  focused.value = true
  emit('focus')
}

// 输入框失焦
const handleInputBlur = () => {
  setTimeout(() => {
    if (!props.showCancel) {
      focused.value = false
    }
    emit('blur')
  }, 200)
}

// 搜索
const handleSearch = () => {
  emit('search', inputValue.value)
  if (!props.showCancel) {
    focused.value = false
  }
}

// 取消
const handleCancel = () => {
  inputValue.value = ''
  focused.value = false
  emit('update:modelValue', '')
  emit('cancel')
}

// 清除
const handleClear = () => {
  inputValue.value = ''
  emit('update:modelValue', '')
  emit('clear')
}

// 热门搜索点击
const handleHotClick = (keyword: string) => {
  inputValue.value = keyword
  emit('update:modelValue', keyword)
  emit('hot-click', keyword)
  emit('search', keyword)
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';
@import '@/static/styles/mixins.scss';

.search-bar {
  width: 100%;
  background: $bg-page;
}

.search-bar-fixed {
  position: fixed;
  left: 0;
  right: 0;
  z-index: $z-fixed;
  @include safe-area-top;
}

/* ========== 搜索容器 ========== */
.search-container {
  display: flex;
  align-items: center;
  gap: $spacing-md;
  padding: $spacing-md $spacing-xl;
  background: $bg-page;
}

.search-glass {
  @include glass-bg(20rpx, 0.95);
}

/* ========== 搜索输入框 ========== */
.search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  height: 64rpx;
  padding: 0 $spacing-md;
  background: $bg-card;
  border-radius: $radius-round;
  transition: $transition-all;

  &:active {
    background: $bg-hover;
  }
}

.search-input {
  flex: 1;
  font-size: $font-base;
  color: $text-primary;
  height: 100%;
}

.search-text {
  flex: 1;
  font-size: $font-base;
  color: $text-primary;
  @include text-ellipsis;
}

.search-placeholder {
  color: $text-placeholder;
}

/* 清除按钮 */
.search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32rpx;
  height: 32rpx;
  transition: $transition-all;

  &:active {
    opacity: 0.6;
  }
}

/* ========== 搜索按钮 ========== */
.search-button {
  padding: 0 $spacing-xl;
  height: 64rpx;
  background: $gradient-primary;
  border-radius: $radius-round;
  @include flex-center;
  transition: $transition-all;

  &:active {
    transform: scale(0.95);
    opacity: 0.9;
  }
}

.search-button-text {
  font-size: $font-base;
  color: $text-inverse;
  font-weight: $font-medium;
}

/* ========== 取消按钮 ========== */
.search-cancel {
  padding: 0 $spacing-sm;
  transition: $transition-all;

  &:active {
    opacity: 0.6;
  }
}

.search-cancel-text {
  font-size: $font-base;
  color: $text-secondary;
}

/* ========== 热门搜索 ========== */
.search-hot {
  padding: $spacing-xl;
  background: $bg-card;
  margin-top: $spacing-sm;
  border-radius: $radius-md;
}

.hot-header {
  margin-bottom: $spacing-md;
}

.hot-title {
  font-size: $font-base;
  color: $text-primary;
  font-weight: $font-semibold;
}

.hot-list {
  display: flex;
  flex-wrap: wrap;
  gap: $spacing-md;
}

.hot-item {
  padding: $spacing-sm $spacing-lg;
  background: $bg-page;
  border-radius: $radius-round;
  transition: $transition-all;

  &:active {
    background: $primary-50;
  }
}

.hot-text {
  font-size: $font-sm;
  color: $text-secondary;
}
</style>
