<template>
  <view class="bg">
    <view class="iconfont icon-sousuo search-icon"></view>
    <uni-easyinput
      v-model="state.value"
      placeholder="搜索"
      :inputBorder="false" 
			:styles="{backgroundColor: 'transparent' }"
      @clear="searchReset"
      @confirm="search"
    ></uni-easyinput>
  </view>
</template>

<script setup>
  import { reactive } from "vue";
  const emits = defineEmits(["search"]);
  const state = reactive({
    value: "",
  });
  function search() {
    emits("search", state.value);
  }
  function searchReset() {
    emits("search", "");
  }
</script>

<style scoped>
  .bg{
    margin: 10rpx 20rpx;
    background: #f4f6f8;
    border-radius: 20rpx;
    position: relative;
    display: flex;
    align-items: center;
  }
  .search-icon{
    margin-left: 40rpx;
    color: #BDC3D6;
  }

</style>
