<template>
  <div class="search-input">
    <div class="input-wrapper">
      <div class="input-block">
        <van-icon class="search-icon" name="search" />
        <input class="inner-input" v-model="modelValue" :placeholder="placeholder" />
        <van-icon class="close-icon" name="clear" v-if="modelValue !== ''" @click="modelValue = ''" />
      </div>

      <!-- 占位符 -->
      <!-- <div class="placeholder-block" v-if="modelValue === '111'">
        <van-icon class="search-icon" name="search" />
        <span class="placeholder-text">{{ placeholder }}</span>
      </div> -->
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'

const modelValue = defineModel('modelValue')

const props = defineProps({
  placeholder: {
    type: String,
    default: '请输入关键词'
  }
})
</script>
<style scoped lang="scss">
.search-input {
  position: relative;
  height: 40px;
  width: 100%;
  margin-top: 8px;
  box-sizing: border-box;
}

.input-wrapper {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 4px;
}

.input-block {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;

  .search-icon, .close-icon {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 20px;
    color: #9b9b9b;
  }
  .close-icon {
    left: unset;
    right: 20px;
  }
}

.inner-input {
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  height: 100%;
  text-align: center;
  font-size: 14px;
}

.placeholder-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  pointer-events: none;

  .search-icon {
    font-size: 20px;
    margin-right: 3px;
    color: #9b9b9b;
  }

  .placeholder-text {
    color: #9b9b9b;
  }
}
</style>
