<script setup lang="ts">
/**
 * C 端搜索条：圆角 + accent focus，暗色可读；不依赖 wd-search 白底。
 */
import { computed, ref } from 'vue'
import { useTheme } from '@/composables/useTheme'

const props = withDefaults(defineProps<{
  modelValue?: string
  placeholder?: string
}>(), {
  modelValue: '',
  placeholder: '搜索',
})

const emit = defineEmits<{
  'update:modelValue': [string]
  search: [string]
  clear: []
  focus: []
  blur: []
}>()

const { isDark } = useTheme()
const focused = ref(false)

const inputStyle = computed(() => {
  const dark = isDark.value
  const border = focused.value
    ? '1px solid rgb(212,179,131)'
    : dark
      ? '1px solid rgba(255,255,255,0.1)'
      : '1px solid rgba(0,0,0,0.08)'
  const bg = dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)'
  const color = dark ? '#ececec' : '#171717'
  return `background:${bg};border:${border};color:${color};`
})

const onInput = (e: { detail?: { value?: string } }) => {
  emit('update:modelValue', e.detail?.value ?? '')
}

const onConfirm = () => emit('search', props.modelValue)

const onClear = () => {
  emit('update:modelValue', '')
  emit('clear')
}
</script>

<template>
  <view class="bar" :class="{ 'bar--focus': focused }" :style="inputStyle">
    <wd-icon name="search-line" size="18px" color="rgb(136,136,136)" />
    <input
      class="input"
      type="text"
      confirm-type="search"
      :value="modelValue"
      :placeholder="placeholder"
      placeholder-class="ph"
      @input="onInput"
      @confirm="onConfirm"
      @focus="focused = true; emit('focus')"
      @blur="focused = false; emit('blur')"
    >
    <view v-if="modelValue" class="clear" @click.stop="onClear">
      <wd-icon name="close" size="16px" color="rgb(136,136,136)" />
    </view>
  </view>
</template>

<style scoped lang="scss">
.bar {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx 24rpx;
  border-radius: 999rpx;
  transition: border-color 0.2s ease;
}
.input {
  flex: 1;
  font-size: 28rpx;
  height: 44rpx;
  line-height: 44rpx;
  background: transparent;
}
.ph { color: rgb(136, 136, 136); }
.clear {
  padding: 4rpx;
  display: flex;
  align-items: center;
}
</style>
