<template>
  <div class="search-container">
    <!-- <span class="icon">🔍</span> -->
    <!-- <input v-model="searchValue" type="text" class="input" placeholder="搜一搜" @keyup.enter="onSearch" /> -->
    <van-search
      v-model="searchValue"
      shape="round"
      class="vant-input"
      background="#fff"
      placeholder="请输入搜索关键词"
    />
  </div>
</template>

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

  const searchValue = ref('')
  function onSearch() {
    console.log('Search for:', searchValue.value)
  }
</script>

<style scoped lang="scss">
  .search-container {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    .vant-input {
      flex: 1;
      padding: 0px !important;
      /* 设置 Vant Search 内部输入高度 */
      --van-search-input-height: 48px;
      :deep(.van-search__content) {
        min-height: 48px;
      }
      :deep(.van-field__control) {
        height: 48px;
        line-height: 48px;
      }
    }
  }
</style>
